前端事件绑定

Event 对象

HTML DOM Event 对象

header 1	header 2
事件	event
事件目标	event.target
添加事件	element.addEventListener(type, listener, false)
移除事件	element.removeEventListener(type, listener, false)
阻止事件冒泡	event.stopPropagation()
取消默认行为	event.preventDefault()

IE 中的 Event 对象

header 1	header 2
事件	window.event
事件目标	event.srcElement
添加事件	element.attachEvent('on' + type, listener)
移除事件	element.detachEvent('on' + type, listener)
阻止事件冒泡	event.cancelBubble = true
取消默认行为	event.returnValue = false

事件处理程序

HTML 事件处理程序

事件直接写在html的元素里面，缺点：html和js代码紧密的耦合在一起。

<a href="" onclick="alert('msg');">测试</a>

0级 DOM事件处理程序

把一个函数赋值给一个事件的处理程序属性，优点：比较简单，跨浏览器支持。缺点：不能添加多个事件处理程序，最后一个事件会覆盖前面的事件

document.getElementById('id').onclick = function () { alert(1); }

2级 DOM事件处理程序

通过 addeventlistener() 添加事件，只能用 removeEventlistener() 删除此事件。它们都接收三个参数：要处理的事件名event（不加'on'）、作为事件处理程序的函数function（优点：可以添加多个事件处理程序，）和一个布尔值useCapture。布尔参数仅仅在现代浏览器最近的几个版本中是可加可不加的，并且true代表该事件在捕获阶段执行，false代表在冒泡阶段执行，建议写false，因为有些浏览器只有冒泡阶段。

target.addEventListener(type, listener[, useCapture]);
target.removeEventListener(type, listener[, useCapture]);

IE 事件处理程序

IE8 及更早IE版本不支持 addEventListener() 方法，Opera 7.0 及 Opera 更早版本也不支持。 但是，对于这些不支持该函数的浏览器，你可以使用 attachEvent() 方法来添加事件句柄。通过 attachEvent() 添加事件，只能用 detachEvent() 删除此事件。这两个方法接收相同的两个参数：事件处理程序名称 type 与事件处理函数 function，不支持第三个参数的原因：IE8--只支持冒泡冒泡流。

element.attachEvent(type, function)
element.detachEvent(type, function)

事件代理和委托

当我们需要对很多元素添加事件的时候，可以通过将事件添加到它们的父节点而将事件委托给父节点来触发处理函数。这主要得益于浏览器的事件冒泡机制。

<div id="box">
    <p>Lorem ipsum dolor sit amet.</p> <p>Lorem ipsum dolor sit amet.</p> <p>Lorem ipsum dolor sit amet.</p> </div> <script> let box = document.getElementById('box'); box.addEventListener('click', function (e) { // 检查事件源e.targe是否为P if (e.target.nodeName === 'P') { // 真正的处理过程在这里 alert('p'); } }) </script> 

/* * @Desc 跨浏览器兼容的事件处理程序（能力检测） */ var eventshiv = { // event兼容 getEvent: function(event) { return event ? event : window.event; }, // type兼容 getType: function(event) { return event.type; }, // target兼容 getTarget: function(event) { return event.target ? event.target : event.srcelem; }, /** * 添加事件句柄 * 2级 DOM -> IE -> 0级 DOM */ addHandler: function(elem, type, listener) { if (elem.addEventListener) { elem.addEventListener(type, listener, false); } else if (elem.attachEvent) { elem.attachEvent('on' + type, listener); } else { // 在这里由于.与'on'字符串不能链接，只能用 [] elem['on' + type] = listener; } }, // 移除事件句柄 removeHandler: function(elem, type, listener) { if (elem.removeEventListener) { elem.removeEventListener(type, listener, false); } else if (elem.detachEvent) { elem.detachEvent('on' + type, listener); } else { elem['on' + type] = null; } }, /** * 添加事件代理 */ addAgent: function (elem, type, agent, listener) { elem.addEventListener(type, function (e) { if (e.target.matches(agent)) { listener.call(e.target, e); // this 指向 e.target } }); }, /** * 取消默认行为 * 非IE -> IE */ preventDefault: function(event) { if (event.preventDefault) { event.preventDefault(); } else { event.returnValue = false; } }, /** * 阻止事件冒泡 * 非IE -> IE */ stopPropagation: function(event) { if (event.stopPropagation) { event.stopPropagation(); } else { event.cancelBubble = true; } } }; console.log('eventshiv.js 文件加载成功！');