1. 注册事件(绑定事件)
1.1 注册事件概述
给元素添加事件,称为注册事件或者绑定事件。
注册事件有两种方式:传统方式和方法监听注册方式
1.1.1 传统注册方式
-
利用
on
开头的事件onclick
-
<button onclick=“alert('hi~')”></button>
-
btn.onclick = function() {}
-
特点: 注册事件的
唯一性
// 唯一性: 当同一个按钮有两个或多个点击事件时,只会执行最后一个 <button>0</button> <button>1</button> var btn = document.querySelectorAll('button'); btn[0].onclick = function(){ alert("你好-0"); } btn[0].onclick = function(){ alert("你好"); }
-
同一个元素同一个事件只能设置一个处理函数,最后注册的处理函数将会覆盖前面注册的处理函数
1.1. 2 方法监听注册方式
w3c
标准 推荐方式addEventListener()
它是一个方法IE9
之前的 IE 不支持此方法,可使用attachEvent()
代替- 特点:同一个元素同一个事件可以注册多个监听器
按注册顺序依次执行
1.2 addEventListener
事件监听方式
eventTarget.addEventListener()
方法将指定的监听器注册到 eventTarget
(目标对象)上,当该对象触发指定的事件时,就会执行事件处理函数。
eventTarget.addEventListener(type, listener[, useCapture])
该方法接收三个参数:
type
:事件类型字符串,比如click
、mouseover
,注意这里不要带on
listener
:事件处理函数,事件发生时,会调用该监听函数useCapture
:可选参数,是一个布尔值,默认是 false。学完 DOM 事件流后,我们再进一步学习
// 可以给同一个元素 添加多个事件
btn.addEventListener('click', function(){
alert(22);
})
1.3 attachEvent
事件监听方式 (了解)
eventTarget.attachEvent()
方法将指定的监听器注册到 eventTarget
(目标对象) 上,当该对象触发指定的事件时,指定的回调函数就会被执行。
eventTarget.attachEvent(eventNameWithOn, callback)
该方法接收两个参数:
eventNameWithOn
:事件类型字符串,比如onclick
、onmouseover
,这里要带on
callback
: 事件处理函数,当目标触发事件时回调函数被调用
注意:IE8 及早期版本支持
1.4 注册事件兼容性解决方案
function addEventListener(element, eventName, fn) {
// 判断当前浏览器是否支持 addEventListener 方法
if (element.addEventListener) {
element.addEventListener(eventName, fn); // 第三个参数 默认是false
} else if (element.attachEvent) {
element.attachEvent('on' + eventName, fn);
} else {
// 相当于 element.onclick = fn;
element['on' + eventName] = fn;
}
兼容性处理的原则: 首先照顾大多数浏览器,再处理特殊浏览器
2. 删除事件(解绑事件)
2.1 删除事件的方式
1. 传统注册方式
eventTarget.onclick = null;
2. 方法监听注册方式
// 1.
eventTarget.removeEventListener(type, listener[, useCapture]);
// 2.
eventTarget.detachEvent(eventNameWithOn, callback);
示例
div.addEventListener('click', fn);
// 使用removeEventListener删除事件的时候,addEventListener注册事件就不能使用匿名函数
// detachEvent 同理
function fn(){
alert(22);
div.removeEventListener('click', fn);
}
2.2 删除事件兼容性解决方案
function removeEventListener(element, eventName, fn) {
// 判断当前浏览器是否支持 removeEventListener 方法
if (element.removeEventListener) {
element.removeEventListener(eventName, fn); // 第三个参数 默认是false
} else if (element.detachEvent) {
element.detachEvent('on' + eventName, fn);
} else {
element['on' + eventName] = null;
}
3. DOM事件流
3.1 定义
事件
流描述的是从页面中接收事件的顺序。
事件
发生时会在元素节点之间按照特定的顺序传播,这个传播过程即 DOM 事件流。
比如我们给一个div 注册了点击事件:
DOM 事件流分为3个阶段:
-
捕获阶段
-
当前目标阶段
-
冒泡阶段
-
事件冒泡: IE 最早提出,事件开始时由最具体的元素接收,然后逐级向上传播到到 DOM 最顶层节点的过程。
- 我们向水里面扔一块石头,首先它会有一个下降的过程,这个过程就可以理解为从最顶层向事件发生的最具体元素(目标点)的捕获过程;之后会产生泡泡,会在最低点( 最具体元素)之后漂浮到水面上,这个过程相当于事件冒泡。
- 我们向水里面扔一块石头,首先它会有一个下降的过程,这个过程就可以理解为从最顶层向事件发生的最具体元素(目标点)的捕获过程;之后会产生泡泡,会在最低点( 最具体元素)之后漂浮到水面上,这个过程相当于事件冒泡。
-
事件捕获: 网景最早提出,由 DOM 最顶层节点开始,然后逐级向下传播到到最具体的元素接收的过程。
注意
JS
代码中只能执行捕获或者冒泡其中的一个阶段。onclick
和attachEvent
只能得到冒泡阶段。addEventListener(type, listener[, useCapture])
第三个参数如果是true
,表示在事件捕获阶段
调用事件处理程序;如果是false(不写默认就是false)
,表示在事件冒泡阶段
调用事件处理程序。- 实际开发中我们很少使用事件捕获,我们更关注事件冒泡。
- 有些事件是没有冒泡的,比如
onblur
、onfocus
、onmouseenter
、onmouseleave
- 事件冒泡有时候会带来麻烦,有时候又会帮助很巧妙的做某些事件,我们后面讲解。
1. 事件捕获阶段传播顺序
document -> html -> body -> fatherNode -> childNode
2. 事件冒泡阶段传播顺序
childNode -> fatherNode -> body -> html -> document