一、什么是事件委托?
1、事件委托机制,委托它们父级代为执行事件。是通过addEventListener实现的,它允许给同一个dom节点添加一个或多个同种类型或不同类型的监听事件;
例如:用常用的绑定事件的方法,同时注册两个事件,后一个事件会覆盖上面的事件
<script type="text/javascript">
window.onload = function(){
let box = document.getElementById('box');
box.onclick = function(){
console.log('打印第一次')
}
box.onclick = function(){
console.log('打印第二次')
}
}
</script>
<body>
<div id="box">你可真是个小可爱~~</div>
</body>
如果给父子元素绑定事件,只能通过冒泡的形式触发:
<script type = "text/javascript">
window.onload = function() {
var box = document.getElementById("box");
var body = document.getElementById("body");
body.onclick = function(e) {
console.log("this is body");
}
box.onclick = function(e) {
console.log("this is box");
};
}
</script>
<body id="body">
<box id="box">123</box>
</body>
如果使用addEventListener添加监听事件
<script type="text/javascript">
window.onload = function(){
let box = document.getElementById('box');
box.addEventListener('click',function(){
console.log('打印第一次')
})
box.addEventListener('click',function(){
console.log('打印第二次')
})
}
</script>
<body>
<div id="box">你可真是个小可爱~~</div>
</body>
2、触发事件时,有个阶段:事件捕获、事件冒泡;理解这两个阶段之前先看一下addEventListener的使用规范:
标准浏览器:dom对象.addEventListener(type,listener,useCapture)
IE浏览器:dom对象.attachEvent(type,listener),IE没有实现事件捕获
- type: 必须,String类型,事件类型
- listener: 必须,函数体或者JS函数
- useCapture: 可选,boolean类型。指定事件是否发生在捕获阶段。默认为false,事件发生在捕获阶段
- 事件捕获
当一个事件触发后,从Window对象触发,不断经过下级节点,直到目标节点。在事件到达目标节点之前的过程就是捕获阶段。所有经过的节点,都会触发对应的事件- 事件冒泡
当事件到达目标节点后,会沿着捕获阶段的路线原路返回。同样,所有经过的节点,都会触发对应的事件
通过例子理解两个事件机制(默认useCapture为false,触发的事件发生在捕获阶段):
<script type="text/javascript">
window.onload = function(){
let body = document.querySelector('body');
let box = document.getElementById('box');
body.addEventListener('click',function(){
console.log('打印body')
})
box.addEventListener('click',function(){
console.log('打印box')
})
}
</script>
<body>
<div id="box">你可真是个小可爱~~</div>
</body>
当useCapture = true时,触发事件发生在冒泡阶段:
<script type="text/javascript">
window.onload = function(){
let body = document.querySelector('body');
let box = document.getElementById('box');
body.addEventListener('click',function(){
console.log('打印body')
},true)
box.addEventListener('click',function(){
console.log('打印box')
},true)
}
</script>
<body>
<div id="box">你可真是个小可爱~~</div>
</body>
如果还不能理解,可以参考下面这个图:
二、常见的使用场景:
<script type="text/javascript">
window.onload = function(){
var list = document.getElementsByTagName('li');
for (var i = 0, l = list.length; i < l; i++) {
list[i].onclick = function(){
console.log(this);
}
};
}
</script>
<body>
<ul id='menu'>
<li id='list1'>list1 was clicked</li>
<li id='list2'>list2 was clicked</li>
<li id='list3'>list3 was clicked</li>
</ul>
</body>
这种方式,相当于给每个li标签都添加了监听事件,比较占用内存,如果用addEventListener添加监听事件,利用事件委托机制中的冒泡过程,提高性能,只需要添加一个监听事件:
<script type="text/javascript">
window.onload = function(){
var menu = document.getElementById('menu');
menu.addEventListener('click',function(e) {
console.log(e.target);
});
}
</script>
<body>
<ul id='menu'>
<li id='list1'>list1 was clicked</li>
<li id='list2'>list2 was clicked</li>
<li id='list3'>list3 was clicked</li>
</ul>
</body>
这里用父级ul做事件处理,当li被点击时,由于冒泡原理,事件就会冒泡到ul上,因为ul上有点击事件,所以事件就会触发,当然,这里当点击ul的时候,也是会触发的,那么问题就来了,如果我想让事件代理的效果跟直接给节点的事件效果一样怎么办,比如说只有点击li才会触发,不怕,我们有绝招:
三、Event对象
Event 对象代表事件的状态,比如事件在其中发生的元素、键盘按键的状态、鼠标的位置、鼠标按钮的状态。
1、什么时候会出现event对象呢?
例如: 当用户单击某个元素的时候,我们给这个元素注册的事件就会触发,该事件的本质就是一个函数,而该函数的形参接收一个event对象.
2、常使用的属性target:
Event对象提供了一个属性叫target,可以返回事件的目标节点,我们称为事件源,也就是说,target就可以表示为当前的事件操作的dom,但是不是真正操作dom,当然,这个是有兼容性的,标准浏览器用e.target,IE浏览器用e.srcElement,此时只是获取了当前节点的位置,并不知道是什么节点名称,这里我们用nodeName来获取具体是什么标签名,这个返回的是一个大写的,我们需要转成小写再做比较(习惯问题):target.nodeName.toLowerCase()
3、event对象的一些属性和方法:
鼠标 / 键盘属性
属性 | 描述 |
---|---|
altKey | 返回当事件被触发时,"ALT" 是否被按下。 |
button | 返回当事件被触发时,哪个鼠标按钮被点击。 |
clientX | 返回当事件被触发时,鼠标指针的水平坐标。 |
clientY | 返回当事件被触发时,鼠标指针的垂直坐标。 |
ctrlKey | 返回当事件被触发时,"CTRL" 键是否被按下。 |
metaKey | 返回当事件被触发时,"meta" 键是否被按下。 |
relatedTarget | 返回与事件的目标节点相关的节点。 |
screenX | 返回当某个事件被触发时,鼠标指针的水平坐标。 |
screenY | 返回当某个事件被触发时,鼠标指针的垂直坐标。 |
shiftKey | 返回当事件被触发时,"SHIFT" 键是否被按下。 |
IE 属性
除了上面的鼠标/事件属性,IE 浏览器还支持下面的属性:
属性 | 描述 |
---|---|
cancelBubble | 如果事件句柄想阻止事件传播到包容对象,必须把该属性设为 true。 |
fromElement | 对于 mouseover 和 mouseout 事件,fromElement 引用移出鼠标的元素。 |
keyCode | 对于 keypress 事件,该属性声明了被敲击的键生成的 Unicode 字符码。对于 keydown 和 keyup 事件,它指定了被敲击的键的虚拟键盘码。虚拟键盘码可能和使用的键盘的布局相关。 |
offsetX,offsetY | 发生事件的地点在事件源元素的坐标系统中的 x 坐标和 y 坐标。 |
returnValue | 如果设置了该属性,它的值比事件句柄的返回值优先级高。把这个属性设置为 fasle,可以取消发生事件的源元素的默认动作。 |
srcElement | 对于生成事件的 Window 对象、Document 对象或 Element 对象的引用。 |
toElement | 对于 mouseover 和 mouseout 事件,该属性引用移入鼠标的元素。 |
x,y | 事件发生的位置的 x 坐标和 y 坐标,它们相对于用CSS动态定位的最内层包容元素。 |
标准 Event 属性
下面列出了 2 级 DOM 事件标准定义的属性。
属性 | 描述 |
---|---|
bubbles | 返回布尔值,指示事件是否是起泡事件类型。 |
cancelable | 返回布尔值,指示事件是否可拥可取消的默认动作。 |
currentTarget | 返回其事件监听器触发该事件的元素。 |
eventPhase | 返回事件传播的当前阶段。 |
target | 返回触发此事件的元素(事件的目标节点)。 |
timeStamp | 返回事件生成的日期和时间。 |
type | 返回当前 Event 对象表示的事件的名称。 |
4、event对象的一些兼容性写法
//获得event对象兼容性写法
event || (event = window.event);
//获得target兼容型写法
event.target||event.srcElement
//阻止浏览器默认行为兼容性写法
event.preventDefault ? event.preventDefault() : (event.returnValue = false);
//阻止冒泡写法
event.stopPropagation ? event.stopPropagation() : (event.cancelBubble = true);
四、什么样的事件可以用事件委托,什么样的事件不可以用呢?
适合用事件委托的事件:click,mousedown,mouseup,keydown,keyup,keypress。
值得注意的是:
1、mouseover和mouseout虽然也有事件冒泡,但是处理它们的时候需要特别的注意,因为需要经常计算它们的位置,处理起来不太容易。
2、mousemove,每次都要计算它的位置,非常不好把控
3、focus,blur之类的,本身就没用冒泡的特性,自然就不能用事件委托了。