前端事件绑定知识点

image.png

事件流

事件流描述的是从页面中接受事件的顺序。

• IE 的事件流是事件冒泡流，事件由子元素获取并沿DOM树向上传播。即事件最开始由最具体的元素(文档中嵌套层次最深的那个节点)接收，然后逐级向上转播至最不具体的节点(document)，用 stopPropagation() 方法终止冒泡。
• Netscape 的事件流是事件捕获流，事件由根元素获取并沿DOM树向下分发。与事件冒泡流相反，事件捕获的思想是不太具体的节点(document)应该更早接收到事件，而最具体的节点最后接收到事件。已经不适用了

image.png image.png image.png image.png

事件处理程序

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)

---

事件代理和委托

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

---

跨浏览器兼容的事件处理程序（能力检测）

<pre>
/*

• @Author: bxm09
• @Date: 2017-03-24 15:51:37
• @Last Modified by: bxm09
• @Last Modified time: 2017-07-24 13:16:04
• @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 文件加载成功！');
</pre>