涵盖知识点：
1、事件流，事件捕获，事件冒泡概念
2、跨浏览器事件兼容解决方案（柯里化函数提前返回）
3、标准事件对象event及ie事件对象常用属性
4、ie中attatchEvent事件处理程序中this指向问题
一、事件流
1.ECMAScript标准事件流
标准事件流分为三个阶段：事件捕获阶段，处于目标阶段，事件冒泡阶段
下面是一段html代码：
<html>
<body>
<div>
<button>click me</button>
</div>
</body>
</html>
当点击button时，会触发一个click事件，触发事件会经历三个阶段：
1.1.事件捕获阶段
事件捕获阶段的思想是不太具体的节点先接收到事件，最具体的节点最后接收到事件，这个阶段做的事情是捕获事件
此例中事件捕获传播顺序为：
document, html, body, div, button
1.2.处于目标阶段
实际目标接收到事件
1.3.事件冒泡阶段
最后一个阶段，事件冒泡的顺序是从最具体的节点到最不具体的节点，这个阶段对事件做出响应
此例中事件冒泡传播顺序为
button, div, body, html, document
注意：所有的浏览器都会将事件冒泡到window对象
注意：虽然DOM事件流规定不能在事件捕获阶段涉及事件目标，但是ie9以及更高级的浏览器支持在事件捕获阶段触发事件
2.IE事件流
ie8之前，ie的事件流只有冒泡阶段，没有捕获阶段
3.事件执行顺序
一般事件的执行顺序是：事件捕获阶段 ==>> 处于目标阶段 ==>> 事件冒泡阶段 ==>> 事件默认行为
事件默认行为最后执行，为阻止事件的默认行为提供了机会
function handler (event) {
const event = event || window.event
if (event.preventDefault) {
event.preventDefault() // 非ie浏览器阻止事件默认行为
} else {
event.returnValue = false // ie浏览器阻止事件默认行为
}
}
二、DOM事件
1.DOM0级事件
// 添加事件
el.onclick = function () {
// ...
}
// 删除事件
el.onclick = null
DOM0级事件在冒泡阶段执行
2.DOM2级事件
DOM2级事件定义了两个方法，用于绑定和删除事件
1.1 addEventListener
addEventListener(type, handler, useCapture)
params: type // 要添加的事件类型
params: handler // 事件处理程序
params: useCapture // 是否在捕获阶段执行
使用addEventListener方法的好处是可以添加多个函数，并按添加顺序执行
2.2 removeEventListener
用于移除通过addEventListener添加的函数，移除时的参数必须与添加的参数一致
removeEventListener(type, handler, useCapture)
使用addEventListener添加的事件必须通过removeEventListener移除
3.ie事件
ie8及ie8之前的版本不支持addEventListener, ie实现了 attachEvent和detachEvent方法添加和删除事件
attachEvent(type, handler)
params: type //type需要加on
params: handler // 事件处理程序
需要注意的是：
el.attachEvent('onclick', function () {
console.log(this == window) //这里的this 指向window，而不是指向el
})
为了避免这个问题，我们需要手动将this指向到el
function addEvent (el, type, handler) {
el.attatchEvent('on' + type, function () {
handler.apply(el, arguments) // 改变this指向
})
}
4.跨浏览器的事件处理程序（利用柯里化提前返回的特性实现）
// 添加事件
const addEvent = function (el, type, handler, isCapture) {
if (window.addEventListener) {
return function () {
el.addEventListener(type, handler, isCapture)
}
} else if (window.attachEvent) {
return function () {
el.attachEvent('on' + type, handler)
}
}()
// 删除事件
const removeEvent = function (el, type, handler, isCupture) {
if (window.addEventListener) {
return function () {
el.removeListener(type, handler, isCapture)
}
} else if (window.attachEvent) {
return function () {
el.detachEvent('on' + type, handler)
}
}
}
三、事件对象
浏览器会为事件处理程序注入event对象，常用的event对象的属性有：
type // 事件类型
target // 事件的目标
currentTarget // 事件处理程序正在处理的元素
perventDefault() // 阻止事件默认行为
stopPropagation // 阻止事件冒泡
ie对象独有的event属性：
type // 事件类型
srcElement// 事件的目标
cancelBubble (Boolean) // 阻止事件默认行为
returnValue (Boolean) // 阻止事件冒泡
网友评论