读书笔记(05) – 事件 – JavaScript高级程序设计

41次阅读

共计 5130 个字符,预计需要花费 13 分钟才能阅读完成。

HTML 依托于 JavaScript 来实现用户与 WEB 网页之间的动态交互,接收用户操作并做出相应的反馈,而事件在此间则充当桥梁的重要角色。
日常开发中,经常会为某个元素绑定一个事件,编写相应的业务逻辑,在元素被点击时执行,并反馈到用户操作界面。
这个过程中,事件就像一个侦听器,当点击动作发生时,才会执行对应的程序。这种模式可称之为观察员模式。
接下来就讲讲 DOM 事件相关知识。
何为事件
事件就是用户或浏览器自身执行的某种动作
常用的 DOM 事件有 click/mouseover/mouseout/keyup/keydown 等。
事件流
事件流描述的是从页面中接收事件的顺序
HTML 描述的是一个 DOM 文档结构,而事件流所描述的是 DOM 文档节点接收事件顺序。
而事件流有两种事件模式,捕获 / 冒泡,两者所描述的事件传递顺序对立相反。
事件模式:捕获与冒泡
冒泡
事件冒泡:事件开始时由最具体的元素(文档中嵌套层次最深的那个节点)接收,然后逐级向上传播到较为不具体的节点(文档)
规范要求事件冒泡到 document 对象,而浏览器则会将事件一直冒泡到 window 对象。
所有浏览器都支持事件冒泡(包括 IE9 以下)。

捕获
事件捕获:(与事件冒泡相反)事件捕获的思想是不太具体的节点应该更早接收到事件,而最具体的节点应该最后接收到事件
与冒泡一样,虽然规定事件应该从 document 对象开始传播,但浏览器普遍都是从 window 对象开始捕获。
IE9 以下不支持事件捕获

DOM 事件流

“DOM2 级事件 ” 规定事件流包括三个阶段,顺序进行

事件捕获阶段
处于目标阶段
事件冒泡阶段

TIPS: 实际的目标元素在捕获阶段不会接收到事件,在处于目标阶段时接收事件发生处理,并被看成是冒泡阶段的一部分。
尽管 ”DOM2 级事件 ” 规范明确要求捕获阶段不会涉及事件目标,但浏览器会在捕获阶段触发事件对象上的事件。
 事件处理程序
响应某个事件的函数方法,我们称之为事件处理程序(或事件侦听器)
window.onclick = function() {
//…
}
// 这里的 function(){}就是事件处理程序
HTML 事件处理程序
HTML 中元素支持的事件,可以使用一个同名的 HTML 特性来指定,而这个特性的值就是 js 能执行的代码或表达式。写法上可以看出类似 HTML 中 id/type/class 等属性的写法,都是 on+’…’
缺点:HTML 是结构层(显示层),而 JavaScript 是行为层(业务层)。在显示层上去编写业务逻辑代码处理,会使得 HTML 与 JavaScript 代码耦合过于紧密,不好维护。
DOM 级别一共可以分为四个级别:DOM0 级、DOM1 级、DOM2 级和 DOM3 级。
而 DOM 事件分为 3 个级别:DOM 0 级事件处理程序,DOM 2 级事件处理程序和 DOM 3 级事件处理程序。DOM 1 级中没有规范事件的相关内容,所以没有 DOM 1 级事件处理。
DOM0 级事件处理程序
每个元素 (HTML 元素) 都有自己的事件处理程序属性,属性名通常以 on 开头,例如 onclick/onmouseover。为这个属性的值设置一个函数,就可以指定事件处理程序。而将其属性值赋值为 null,则完成解绑。(同个元素无法绑定多个同名事件)
var myBtn = document.getElementById(‘myBtn’);

// 为 myBtn 绑定事件处理程序, 只能绑定一个
myBtn.onclick = function() {
alert(‘Hello world!’);
}

// 解绑
myBtn.onclick = null;
DOM2 级事件处理程序
“DOM2 级事件 ” 定义了两个方法,addEventListener()/removeEventListener(),用于为元素绑定和解绑事件。
(可绑定多个事件,区别于 DOM0 级 /HTML 仅能绑定一个)。
el.addEventListener(eventName, callBack, useCapture)

eventName: 事件名称
callBack: 回调函数,当事件触发时,函数会传入一个参数 event,为当前的事件对象
useCapture: 默认是 false,代表事件句柄在冒泡阶段执行,true 则代表在捕获阶段执行

var myBtn = document.getElementById(‘myBtn’);

var handleClick = function() {
alert(‘Hello world!’);
}
// 绑定事件处理程序
myBtn.addEventListener(‘click’, handleClick, false);

// 解绑
myBtn.removeEventListener(‘click’, handleClick);
TIPS:DOM2 级事件处理程序,解绑时 function 必须与传入 addEventListener 相同
// 绑定
myBtn.addEventListener(‘click’, function() {
// 匿名函数
});

// 解绑
myBtn.removeEventListener(‘click’,function() {
// 匿名函数
});

// add/remove 分别绑定了两个匿名函数(函数为引用类型),所以两个函数并不相同,所以无法成功解绑
TIPS:绑定多个事件处理程序时,执行顺序按绑定顺序执行
myBtn.addEventListener(‘click’, function() {
// step1…
})
myBtn.addEventListener(‘click’, function() {
// step2…
})

// 执行顺序:step1 -> step2
浏览器支持情况:IE9 以下不支持 DOM2 级事件处理程序
IE 事件处理程序
IE9 以下不支持 DOM2 级事件,但 IE 提供了与 DOM2 级事件类似的两个方法,attachEvent()/detachEvent,IE9 以下不支持事件捕获,所以 attachEvent 仅支持冒泡阶段触发,只接收两个参数(eventName, function)。
// 绑定
myBtn.attachEvent(‘onclick’, handleClick);

// 解绑
myBtn.detachEvent(‘onclick’, handleClick);
TIPS:

解绑时 function 必须与传入 attachEvent 相同,这点与 DOM2 级事件相同
与 DOM0 级的区别,DOM0 级事件处理在元素的作用域运行,而 attachEvent 事件处理在全局,this 指向 window

绑定多个事件处理程序时,执行顺序按绑定顺序逆反执行(与 DOM2 级相反)

myBtn.attachEvent(‘click’, function() {
// step1…
})
myBtn.attachEvent(‘click’, function() {
// step2…
})
// 执行顺序:step2 -> step1
Event 事件对象
常见应用
event.preventDefault()
阻止默认事件
event.stopPropagation()
阻止事件流发生传递(冒泡 / 捕获)
event.stopImmediatePropagation()
阻止剩余事件处理函数的执行,并阻止当前事件在事件流上传递
event.currentTarget
当前绑定事件的元素
event.target
当前触发事件的元素
event.stopPropagation()与.stopImmediatePropagation()的区别
同个元素绑定多个同名事件时,stopImmediatePropagation 不仅阻止了冒泡,而且会阻止后续事件的执行,可以理解为加强版的 stopPropagation
myBtn.addEventListener(‘click’, function(event) {
// step1;
event.stopImmediatePropagation();
})

myBtn.addEventListener(‘click’, function(event) {
// step2;
// 我被 stopImmediatePropagation 阻止掉了!!!
})
currantTarget 与 target 的区别
事件处理程序内部,this 等于 currentTarget(当前绑定事件的元素),而 target(当前触发事件的元素)
// currentTarget == target
myBtn.addEventListener(‘click’, function(event) {
event.target == event.currentTarget; // true -> myBtn
})

// currentTarget != target 捕获 / 冒泡
document.body.addEventListener(‘click’, function(event){
event.target == event.currentTarget; // false
// event.target -> myBtn
// event.currentTarget -> body
})
内存与性能
WEB 网页是运行在浏览器客户端的,而计算机分配给浏览器的内存及 CPU 占用是有限制的。虽说浏览器引擎不断地发展优化,但是内存占用多了,性能不免会损耗。
内存
为元素指定事件绑定程序,事实上是赋值了一个函数方法,而函数在 javaScript 中是一种引用类型的数据格式,既然是数据那就需要用到内存储存。函数创建多了,消耗掉内存。
性能
为元素指定事件绑定程序,首先需要对 DOM 进行查询,找出要绑定事件的元素。而这也会造成 DOM 元素的访问次数增加。DOM 的操作一直是网页性能的一个优化点。
了解完事件绑定带来内存跟性能的原理,我们来看一个例子,例如我们有一个 ul>li 的列表,要监听每一个 li 的点击事件,并触发事件处理程序。
单独绑定的话,10 个 li 就要对 DOM 元素查询 10 次,创建的匿名函数就有 10 个(当然可以共同创建同个函数引用),如果还有 20 个,30 个,100 个,那么这种为每个 li 元素单独绑定事件的方法,绝对不是最优解。
这就引出下面的优化方案:” 事件委托 ”。
事件委托(事件代理)
对 ” 事件处理程序绑定过多 ” 的问题,最好的解决方案就是 ” 事件委托 ”。它的原理是利用了事件流的 ” 冒泡 ” 机制,事件目标元素会把事件向上层传递,直到 document(浏览器会传到 window),所以父级节点是可以接收子节点的事件传递。
以刚刚 ul>li 的例子,li 有很多个,但它们有一个共同的父节点 ul。li 的点击事件会冒泡到 ul,因此我们可以在 ul 上绑定一个事件处理程序,处理所有 li 的点击事件,然后通过 event.target 可以确定触发事件的元素。
var ulParent = document.getElementById(‘parent’);
ulParent.addEventListener(‘click’, function(event) {
var taget = event.target;
})
通过 ” 事件委托 ” 减少了 DOM 元素的查询,以及多个函数的内存占用,而且还有一个好处,当我们的 li 是动态的,增加和移除时,都无需再做绑定和解绑事件操作,因为它都会冒泡到父级节点。
移除多余的事件绑定
文档中移除了绑定了事件的 DOM 元素,如 innerHTML/removeChild()/replaceChild()等可以对 DOM 进行替换,而移除的 DOM 元素原先所绑定的事件处理程序,并不能有效被浏览器垃圾回收,所以占用一直存在。
所以建议在移除某个 DOM 元素时,如果其绑定了事件处理程序,需手动解除绑定,释放内存。
自定义事件
除了为元素绑定支持的事件以外,我们还可以通过 Event/CustomEvent 来创建开发者自定义事件。
两者不同的是 CustomEvent 可传递一个 Object 对象来传输数据。
// Event
var eve = new Event(‘custome’);

// CustomeEvent 可传参数
var eve = new CustomeEvent(‘custome’, {
name: ‘KenTsang’,
age: 28
});

// 为 DOM 元素添加事件监听
ele.addEventListener(‘custome’, function() {
console.log(‘custome’);
})

// 触发 ele 绑定的自定义事件
ele.dispatch(eve);

事件这块还剩下一部分知识点,后续文章会再就模拟事件这块知识点进行拆分详解。
天冷了,更文不易,望大家多多点赞。
《JavaScript 高级程序设计》
作者:以乐之名本文原创,有不当的地方欢迎指出。转载请指明出处。

正文完
 0