不使用 jQuery 的 JavaScript 事件注册

Question

如何在不使用 jQuery 的情况下正确地执行如下操作。

   $(document).ready(function(){
      $("#someButton").click(function(){
        alert("Hello");
      });
   });

谢谢。

Answer 1

最简单的方法是:

// DOM Level 0 way
window.onload = function () {
  document.getElementById("someButton").onclick = function() {
    alert("Hello");
  };
};

这适用于所有浏览器，但请注意，使用此方法只能将一个 事件处理程序附加到事件。

另请注意，onload 事件并不完全等同于 jQuery 的 ready 事件，onload 将在页面已完全加载(图像、子框架等...)，而 ready 在解析 DOM 后立即触发。

如果你想附加多个事件处理器，你可以使用 DOM Level 2标准element.addEventListerner方法(或 element.attachEvent 对于 IE)

获得跨浏览器绑定(bind)事件的方法的最简单抽象是:

function addEvent(el, eventType, handler) {
  if (el.addEventListener) { // DOM Level 2 browsers
    el.addEventListener(eventType, handler, false);
  } else if (el.attachEvent) { // IE <= 8
    el.attachEvent('on' + eventType, handler);
  } else { // ancient browsers
    el['on' + eventType] = handler;
  }
}

然后你可以:

var button = document.getElementById("someButton");
addEvent(button, 'click', function () {
  alert("Hello");
});

addEvent(button, 'click', function () {
  alert("world!");
});

还要注意 addEventListener 和 IE 的 attachEvent 方法有它们的区别，当您使用 addEventListener 将多个处理程序附加到一个事件时，它们将以相同的顺序触发，因为处理程序被绑定(bind) (FIFO)，attachEvent 将以相反的顺序 (LIFO) 触发处理程序。

检查示例 here .