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

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

甚至更短：

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

Answer 3

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

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

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

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

Answer 4

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

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

替代JavaScript中的内联脚本

5 个答案: