基于事件冒泡、事件捕获和事件委托详解
事件冒泡、事件捕获和事件委托
在javascript里，事件委托是很重要的一个东西，事件委托依靠的就是事件冒泡和捕获的机制，我先来解释一下事件冒泡和事件捕获：
事件冒泡会从当前触发的事件目标一级一级往上传递，依次触发，直到document为止。
事件捕获会从document开始触发，一级一级往下传递，依次触发，直到真正事件目标为止。
这么说是不是很抽象，其实就像我敲击了一下键盘，我在敲击键盘的同时，我是不是也敲击了这台电脑，我写个例子大家就明白了：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<style type="text/css">
#box1 { width: 300px; height: 300px; background: blueviolet; }
#box2 { width: 200px; height: 200px; background: aquamarine; }
#box3 { width: 100px; height: 100px; background: tomato; }
div { overflow: hidden; margin: 50px auto; }
</style>
<body>
<div id="box1">
<div id="box2">
<div id="box3"></div>
</div>
</div>
<script>
function sayBox3() {
console.log('你点了最里面的box');
}
function sayBox2() {
console.log('你点了最中间的box');
}
function sayBox1() {
console.log('你点了最外面的box');
}
// 事件监听，第三个参数是布尔值，默认false，false是事件冒泡，true是事件捕获
document.getElementById('box3').addEventListener('click', sayBox3, false);
document.getElementById('box2').addEventListener('click', sayBox2, false);
document.getElementById('box1').addEventListener('click', sayBox1, false);
</script>
</body>
</html>
我们画了三个box，结构是父子关系，分别绑定了打印事件，现在我们来点击最中间的红色box：
我们发现，我们仅仅是点击了红色的box，但是绿色和紫色的box也被触发了打印事件，触犯顺序是 红色>绿色>紫色，这种现象就是事件冒泡了。
我们再试试事件捕获，把上面代码里监听事件的第三个参数改为true，然后点击红色的box：
我们还是只点击最中间的红色box，和上一次一样，也是三个box都触发了事件，但是顺序反过来了，紫色>绿色>红色，这种现象称为事件捕获。
通过上面的例子，应该很容易就理解了事件冒泡和事件捕获，我们平时都是默认冒泡的，冒泡是一直冒到document根文档为止。
现在来谈谈事件委托，事件委托又称之为事件代理，我们通过一个通俗的例子来解释：
有三个同事预计会在周一收到快递，为了签收快递，有两种办法：1.三个人在公司门口等快递；2.委托给前台MM代为签收。现实当中，我们大都采用委托的方案（公司也不会容忍那么多员工站在门口就为了等快递）。前台MM收到快递后，她会判断收件人是谁，然后按照收件人的要求签收，甚至代为付款。这种方案还有一个优势，那就是即使公司里来了新员工（不管多少），前台MM也会在收到寄给新员工的快递后核实并代为签收(可以给暂时不存在的节点也绑定上事件)。
我们再举另一个例子：
现在有一个ul，ul里又有100个li，我想给这100个li都绑定一个点击事件，我们一般可以通过for循环来绑定，但是要是有1000个li呢？ 为了提高效率和速度，所以我们这时可以采用事件委托，只给ul绑定一个事件，根据事件冒泡的规则，只要你点了ul里的每一个li，都会触发ul的绑定事件，我们在ul绑定事件的函数里通过一些判断，就可以给这100li都触发点击事件了。
具体怎么实现，看代码：
// 这里不讲IE，结尾再说
function clickLi() {
alert('你点击了li');
}
document.getElementById('isUl').addEventListener('click', function(event) {
// 每一个函数内都有一个event事件对象，它有一个target属性，指向事件源
var src = event.target;
// 我们判断如果target事件源的节点名字是li，那就执行这个函数
// target里面的属性是非常多的，id名、class名、节点名等等都可以取到
if(src.nodeName.toLowerCase() == 'li') {
clickLi() ；
}
});
这样我们就通过给ul绑定一个点击事件，让所有的li都触发了函数。
那如果想给不同的li绑定不同的函数怎么办？
假设有3个li，我们先写3个不同的函数，再给3个li设置不同的id名，通过判断id名是不是就能给不同的li绑定不同的函数啦：
<body>
<ul id="isUl">
<li id="li01">1</li>
<li id="li02">2</li>
<li id="li03">3</li>
</ul>
<script>
function clickLi01() {
alert('你点击了第1个li');
}
function clickLi02() {
alert('你点击了第2个li');
}
function clickLi03() {
alert('你点击了第3个li');
}
document.getElementById('isUl').addEventListener('click', function(event) {
var srcID = event.target.id;
if(srcID == 'li01'){
clickLi01();
}else if(srcID == 'li02') {
clickLi02();
}else if(srcID == 'li03') {
clickLi03();
}
});
</script>
</body>
这就是所谓的事件委托，通过监听一个父元素，来给不同的子元素绑定事件，减少监听次数，从而提升速度。
那么，能不能阻止元素的事件冒泡呢，答案是可以的。
一开始那个例子，假如我们真的只想点击最里面的那个红色box，不想另外两个box的事件被触发，我们可以在给红色box绑定事件的函数里这么写：
function sayBox3(event) {
// 阻止冒泡
event.stopPropagation();
console.log('你点了最里面的box');
}
document.getElementById('box3').addEventListener('click', sayBox3, false);
这样我们再点击红色的box，那就只会触发它本身的事件啦。
那阻止冒泡有没有实际用途呢？答案是有的，我们看这个例子：
这是一个模态框，现在的需求是当我们点击红色的按钮需要跳转页面，然后点击白色的对话框不需要任何反应，点其它任何地方就关闭这个模态框。
这里就需要用到阻止冒泡了，红色的按钮是白色对话框的子元素，白色对话框又是这整个模态框的子元素，我们给模态框加上一个点击事件关闭，然后给红色的按钮加上一个点击事件跳转，这时就产生了一个问题，只要点击白色的对话框，由于冒泡机制，这个模态框也会关闭，实际上我们并不想点击白色的对话框有任何反应，这时我们就给这个白色的对话框绑定一个点击事件，函数里写上event.stopPropagation();，这样就OK了。
关于IE
老版本的IE存在兼容问题，根本不支持addEventListener()的添加事件和removeEventListener()的删除事件，它有自己的监听方法：
// 添加事件，事件流固定为冒泡 attachEvent(事件名，事件处理函数) // 删除事件 detachEvent(事件名，事件处理函数)
还有IE里的事件对象是window.event，事件源是srcElement，阻止冒泡写法也不一样：
function() {
// IE里阻止冒泡
window.event.cancelBubble = true;
// IE里获取事件源的id
var srcID = window.event.srcElement.id;
}
function(event) {
// 非IE里阻止冒泡
event.stopPropagation();
// 非IE里获取事件源的id
var srcID = event.target.id;
}
补充
关于js的浏览器兼容问题，一般用能力检测来解决，if(){}else{}
我们平时工作一般都是用jquery，IE这些特殊情况早就帮我们做好兼容啦。
jquery在1.7的版本之后，最流行的事件监听方法是$(元素).on(事件名，执行函数)，它还有一种事件委托的写法$(委托给哪个元素).on(事件名，被委托的元素，执行函数)
最后说一点，如果元素被阻止冒泡了，千万别去用事件委托的方式监听事件，因为事件委托的原理是利用事件冒泡，当冒泡被阻止，就无法监听了。
以上为个人经验，希望能给大家一个参考，也希望大家多多支持猪先飞。
相关文章
- 这篇文章主要介绍了C#基于委托实现多线程之间操作的方法,实例分析了C#的委托机制与多线程交互操作的相关技巧,具有一定参考借鉴价值,需要的朋友可以参考下...2020-06-25
- 这篇文章主要介绍了详解C#中委托，事件与回调函数讲解,小编觉得挺不错的，现在就分享给大家，也给大家做个参考。...2020-06-25
- 这篇文章主要介绍了jquery事件冒泡，以及如何阻止jQuery事件冒泡现象，感兴趣的朋友可以参考一下...2016-01-07
- 这两天在做地图这块，一点点js代码，各种坑。第一次接触js，各种难，下面就这几天的研究做一些总结，求坑 在事件监听器中使用闭包 在执行事件监听器时，通常可取的做法是将私有数据和持久性数据附加到对象中。JavaScript 不支...2014-05-31
- 这篇文章主要介绍了c# 委托，匿名函数，lambda的相关知识，文中讲解非常细致，代码帮助大家更好的理解和学习，感兴趣的朋友可以了解下...2020-11-03
C#使用委托(delegate)实现在两个form之间传递数据的方法
这篇文章主要介绍了C#使用委托(delegate)实现在两个form之间传递数据的方法,涉及C#委托的使用技巧,需要的朋友可以参考下...2020-06-25- 这篇文章主要介绍了Spring异常捕获且回滚事务解决方案,文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下...2020-06-03
- 这篇文章主要介绍了C#使用委托的步骤,以实例形式深入浅出的讲解了C#关于委托的定义、声明、实例化及相关的用法,具有很好的参考借鉴价值,需要的朋友可以参考下...2020-06-25
- 这篇文章主要介绍了JavaScript错误捕获的相关资料，帮助大家更好的理解和学习使用JavaScript，感兴趣的朋友可以了解下...2021-04-24
- 这篇文章主要介绍了事件冒泡、事件捕获和事件委托，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教...2021-07-08
- 冒泡事件就是点击子节点，会向上触发父节点，祖先节点的点击事件。本文主要介绍JQuery阻止事件冒泡的实例解析。需要的朋友来看下吧 ...2016-12-02
- c#并行任务多种优化方案分享，使用异步委托+回调函数方式实现，大家参考使用吧...2020-06-25
- 这篇文章主要给大家介绍了关于C#中委托的基础入门与实现方法的相关资料,究竟什么是委托,用最通俗易懂的话来讲,你就可以把委托看成是用来执行方法（函数）的一个东西,需要的朋友可以参考下...2021-08-03
C# Winform实现捕获窗体最小化、最大化、关闭按钮事件的方法
这篇文章主要介绍了C# Winform实现捕获窗体最小化、最大化、关闭按钮事件的方法,可通过重写WndProc来实现,需要的朋友可以参考下...2020-06-25- 这篇文章主要介绍了C#中委托用法,较为详细的分析了C#中委托的概念与相关的使用技巧,具有一定参考借鉴价值,需要的朋友可以参考下...2020-06-25
- 这篇文章主要为大家详细介绍了C#中委托（Delegates）的使用方法，感兴趣的朋友可以参考一下...2020-06-25
- 这篇文章主要介绍了C#中委托和事件的区别,并分别以实例形式展示了通过委托执行方法与通过事件执行方法,以及相关的执行流程与原理分析,需要的朋友可以参考下...2020-06-25
- 这篇文章主要介绍了C#用匿名方法定义委托的实现方法,涉及C#匿名方法与委托的相关使用技巧,需要的朋友可以参考下...2020-06-25
- 今天研究了一下，在C#里面却是可以不用自定义消息这么复杂的方法来实现跨窗体调用控件，C#有更好的办法就是委托。...2020-06-25
- 这篇文章主要介绍了C#委托现实,实例分析了C#委托的使用技巧,具有一定参考借鉴价值,需要的朋友可以参考下...2020-06-25