绑定和取消绑定事件处理程序

如何将处理程序函数附加或分离到事件（例如单击，焦点或提交）

---

现代浏览器支持addEventListener()和removeEventListener()来添加或删除事件处理程序。 IE 8有其自己的方法。 如果您需要同时支持这两种方法，请使用以下小助手来代替jQuery的$.on()和$.off()方法：

var el = document.querySelector('div');

var parent = el.parentNode;
      

function addEvent(el, type, handler) {
  if (el.attachEvent) el.attachEvent('on'+type, handler); else el.addEventListener(type, handler);
}
function removeEvent(el, type, handler) {
  if (el.detachEvent) el.detachEvent('on'+type, handler); else el.removeEventListener(type, handler);
}
      

使用如下:

var el = document.querySelector('textarea');

// attach anonymous function to click event
addEvent(el, 'click', function(){ console.log('Clicked!'); })

// attach a named function
var foo = function(){ console.log('Focused!'); };
addEvent(el, 'click', foo);

// remove a previously attached function
removeEvent(el, 'click', foo);
      

用作事件处理程序的匿名函数不能解除绑定。 必须将对用于绑定事件的函数的引用传递给removeEvent()。

w3schools提供了可用HTML DOM事件列表, 这些是HTML属性名称。 当使用上述给定的辅助函数绑定/解除绑定事件时，请省略名称的 "on" 前缀以获取事件类型。 例如，使用 "mouseup" 代替 "onmouseup"。

或者，您也可以直接设置元素的事件属性。 但是，每个元素只能分配一个处理程序：

var el = document.querySelector('textarea');

// set callback
el.onblur = function(){ console.log('Blurred textarea'); };

// remove callback
delete el.onblur;

// assign handler to window object
window.onload = function(){ alert('Window has loaded.'); };
      

使用 "on" 前缀可设置和删除属性，例如元素的 onblur 或 onclick。