《JavaScript进阶之事件高级内容》
1、什么是事件
这个元素对象所具备的一些被动能力,当该元素被进行某种方式的触发之后,会对与自己绑定的某些函数进行处理和执行,我们将这种触发叫做元素的事件。
2、事件的作用
事件是javaScript和DOM之间交互的桥梁。你若触发,我便执行——事件发生,调用它的处理函数执行相应的JavaScript代码给出响应。
典型的例子有:页面加载完毕触发load事件;用户单击元素,触发click事件。
3、注册/绑定事件
解释:给指定元素添加事件的行为,我们称之为注册事件或者绑定事件。
2.1 传统方式
步骤
1. 找到on开头的事件,比如:onclick、onload……等
2. 将指定元素与该事件进行绑定
3. 将元素和绑定的事件直接赋值给一个函数,或者要处理的代码
//语法格式:
元素对象.事件名 = function(){
代码块;
}
特点
注册事件具有唯一性。同一个元素同一个事件只能设置一个 处理函数,当前注册的处理函数会将前面注册的处理函数覆盖。
2.2监听注册方式
**介绍:**该方式是W3C标准推荐的一种注册事件的方式
步骤
1. 获取要绑定的事件的元素对象
2. 用该元素对象点出addEventListener方法
3. 给该方法的第一个参数type传入事件类型(事件名称前不加on)
4. 给该方法的第二个参数listener传入事件处理的函数
5. 第三个参数options是可选参数,boolean值,作用于事件流。true表示在事件捕获阶段调用事件处理函数,反之为false就是表示事件在冒泡阶段处理函数。
//语法格式:
元素对象.addEventListener(事件类型,函数名称/匿名函数);
注意:
IE以前的旧版本不支持以上绑定事件的方法,所以可以使用(元素对象.attchEvent())的方法注册事件
4、删除事件
3.1 传统方式
//语法格式:
元素对象.事件名 = function(){
代码块;
//当该事件触发完以后删除事件,或者说还原
绑定事件的元素对象.事件类型 = null;
// 因为事件没有绑定之间默认值就是null,所以我们只要将它赋值为null即可
}
3.2 监听方式
// 语法格式:
绑定事件的元素对象.removeEventListener(事件类型,方法名);
注意:
IE以前的旧版本不支持以上删除事件的方法,所以可以使用(元素对象.detachEvent())的方法删除事件
5、事件流
5.1 什么是事件流
事件发生时会在元素节点与根节点之间按照特定的顺序传播,路径所经过的所有节点都会收到该事件,这个传播过程就是DOM事件流。简单来说事件流就是从页面中接收事件的顺序。
5.2 两种事件流模型
事件传播的顺序对应浏览器的两种事件流模型:捕获型事件 流和冒泡型事件流。
1、冒泡型事件流
IE提出,事件的传播是从最具体的元素事件接收,然后逐个 向上级最不具体的元素事件传播到DOM的最顶层节点,即从DOM树的叶子到根。
2、捕获型事件流
网景提出,事件的传播是从最不具体的元素事件开始,然后逐级向下一级传播到最具体的元素事件接收,即从根到DOM树的叶子。
5.3 DOM事件流
DOM标准采用捕获+冒泡。这两种事件都会触发DOM的所有对象,从DOM对象开始也在DOM对象结束。
W3C最终统一协调规定:先捕获再冒泡,并规定事件流包括三个阶段:事件捕获阶段、当前目标阶段、事件冒泡阶段。
5.4 DOM事件流三阶段
1、**事件捕获阶段:**检查具有这个事件的所有元素从外到内有哪些
2、**当前目标阶段:**事件当前的处理者
3、**冒泡阶段:**按照从内到外的顺序依次进行事件冒泡
注意:
- JavaScript代码中只能执行事件捕获或者事件冒泡其中的一个阶段
- onclick 和 attachEvent 只能得到冒泡阶段
- addEventListener 函数的第三个参数:true表示再事件捕获阶段调用事件处理函数,反之为false就是表示事件在冒泡阶段处理函数
- 实际开发中很少使用事件捕获,而更关注的是事件冒泡
- 有些事件没有事件冒泡阶段,比如onblur(对象失去焦点后)、onfocus、onmouseenter(鼠标移动到图片上)、onmouseleave(鼠标移出元素后)
- 事件冒泡在实际开发中某些时候会产生一系列的问题需要注意。
6、Event(事件)对象
6.1 什么是事件对象
事件对象就是当我们触发一个事件后,对该事件的一些描述信息。例 如,你触发了一个点击事件,你点在哪个位置,坐标是多少;或者是当你 触发一个键盘事件的时候,你按的是哪个键。
每一个事件都会有一个对应的对象来描述这些信息,我们就把这个对 象叫做事件对象Event
6.2 事件对象的使用
事件触发时就会产生事件对象,并且会自动跟随事件函数的参数传 递,事件对象Event会当作事件函数的实参传递到函数内部,所有要使用事 件 对象,则需要给事件绑定的函数添加一个形参,这个形参来接收事件 对象 Event。
但在IE低版本中这种方法存在兼容性的问题,所有在旧版本中通常使 用浏览器中的window对象寻找event,再获取相关对象。
6.3 事件对象属性
- keyCode:键盘事件键盘按下时键盘的大写字母的ASCII码值
- key:键盘事件键盘按下时按键的键值
- clientX:鼠标相对于浏览器窗口可视区域的X坐标
- clientY:鼠标相对于浏览器窗口可视区域的Y坐标
- pageX:鼠标相对于当前Document文档的X坐标(IE9以上)
- pageY:鼠标相对于当前Document文档的Y坐标(IE9以上)
- screenX:鼠标相对于显示器的X坐标
- screenY:鼠标相对于显示器的Y坐标
- target:返回触发事件的对象(标准)
- srcElement:返回触发事件的对象(非标准)
- type:返回触发事件的事件类型
- cancelBubble:该属性阻止事件冒泡(非标准)
- stopPropagation():该方法阻止事件冒泡(标准)
- returnValue:该属性阻止默认事件(非标准)
- preventDefault():该方法阻止默认事件(标准)
6.4 事件中this与target的区别
- e.target:是事件触发的元素
- this:是事件绑定的元素
7、事件委托
7.1 什么是事件委托
事件委托又叫事件代理,事件委托就是利用事件冒泡,只指定一个事件处理程序,就可以管理某一类型的所有事件。简单来说就是把一个元素 响应事件的函数委托到另一个元素。实则就是不给子元素绑定事件,只给 夫元素注册事件,把处理代码在父元素的事件中执行。
7.2 解释
有三个同事预计会在周一收到快递。为签收快递,有两种办法:一是三个人在公司门口等快递;二是委托给前台MM代为签收。现实当中,我们大都采用委托的方案(公司也不会容忍那么多员工站在门口就为了等快递)。前台MM收到快递后,她会判断收件人是谁,然后按照收件人的要求签收,甚至代为付款。这种方案还有一个优势,那就是即使公司里来了新员工(不管多少),前台MM也会在收到寄给新员工的快递后核实并代为签收。
这里其实还有2层意思的:
第一,现在委托前台的同事是可以代为签收的,即程序中的现有的dom节点是有事件的;
第二,新员工也是可以被前台MM代为签收的,即程序中新添加的dom节点也是有事件的。
7.3 为什么要使用事件委托
我在以前的学习中给ul下的每个li添加相同的事件,使用for循环的方式添加,但我们不知道它的效率如何。在JS中添加事件的数量将直接关系到页面的整体运行性能,如果使用事件委托则大大减少了交互的次数,优化了性能。并且函数或者对象越多销毁的内存就会越多,而事件委托就大大减小了函数对象的创建成本。
7.4 委托的原理
给父元素注册事件,利用事件冒泡的原理,当子元素的事件触发,最后会冒泡到父元素,然后控制响应的子元素。
举个例子:页面上有这么一个节点树,div>ul>li>a;比如给最里面的a加一个click点击事件,那么这个事件就会一层一层的往外执行,执行顺序a>li>ul>div,有这样一个机制,那么我们给最外面的div加点击事件,那么里面的ul,li,a做点击事件的时候,都会冒泡到最外层的div上,所以都会触发,这就是事件委托,委托它们父级代为执行事件。
7.5 委托的使用
- 只操作一次DOM,提高程序的性能
- 动态创建的子元素也用于此事件
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>事件委托</title>
</head>
<body>
<ul>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
<script>
window.onload = function() {
var ul = document.querySelector("ul");
ul.addEventListener("click", function(e) {
console.log(e.target);
console.log(this);
e.target.style["backgroundColor"] = "pink";
})
}
</script>
</body>
</html>
r(“click”, function(e) {
console.log(e.target);
console.log(this);
e.target.style[“backgroundColor”] = “pink”;
})
}