javascript - 替代 JavaScript 中的内联脚本

Question

我知道应该通过保持 html/css 和 javascript 分开来避免内联脚本。

怎么可能在下面的代码中做这样的事情？//考虑上面代码中alertMe()声明的函数

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

怎么可能不使用行内代码？

提前致谢。

Answer 1

与addEventListener()：

var img = document.getElementById('littlebrain');
img.addEventListener('click', function(event){
  alertMe();
});

Answer 2

这取决于您必须支持的浏览器，但如果您很幸运并且只担心现代浏览器，您可以使用.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...
});

Answer 3

document.getElementById('littlebrain').onclick = function() { alertMe(); }

甚至更短：

document.getElementById('littlebrain').onclick = alertMe;

Answer 4

在 JavaScript 代码文件中，您可以img通过其 找到元素id，然后您可以设置其onclick处理程序。例如，使用 jQuery：

$("#littlebrain").click(function () {
  // ...handler code here...
});

在您的情况下，处理程序是一个命名函数，称为alertMe：

$("#littlebrain").click(alertMe);

Answer 5

var el = document.getElementById('littlebrain');
el.addEventListener('click', alertMe, false);