一、什么是事件委托？
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之类的，本身就没用冒泡的特性，自然就不能用事件委托了。
5246
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
