javascript - JavaScript でのインライン スクリプトの代替

Question

html/css と javascript を分離して、インライン スクリプトを避けるべきであることは承知しています。

次のコードでそのようなことを行うにはどうすればよいでしょうか? alertMe()//関数が宣言されたコードで上記を考慮してください

<img src="LittleBrain.png"  id="littlebrain" onClick="alertMe();">

インラインコードを使用しないのはどうしてですか?

前もって感謝します。

Answer 1

サポートする必要があるブラウザーによって異なりますが、運が良く、最新のブラウザーについてのみ心配している場合は、次を使用できます。.addEventListener()

var thing = document.getElementById('thing');

thing.addEventListener('click', function(e) {
  // do something here!
}, false);

運が悪ければ、クロス ブラウザー ソリューションを考え出す必要があります。

var thing = document.getElementById('thing');

addEvent(thing, 'click', function() {
  // do something
});

function addEvent(elem, event, callback) {
  if (elem.addEventListener) {
    elem.addEventListener(event, callback, false);
  } else if (elem.attachEvent) { // IE7 and earlier
    elem.attachEvent('on' + event, function() {
      callback.apply(elem, arguments);
    });
  } else {
    elem['on' + event] = callback;
  }
}

または、jQuery のようなライブラリを使用すると、プロセス全体を簡単に正規化できます。

$('#thing').on('click', function() {
  // do something...
});