JavaScript事件机制—

JavaScript事件机制，也有让人深思的东西。在一开始未深入了解，我头脑里有几个问题发出：

1. 自下而上（冒泡）事件怎么写，自上而下（捕获）又是怎么写？

2. 捕获型和冒泡型同时设置，谁生效？

3. 冒泡能够阻止，那捕获能够阻止吗？

4. jquery的on或bind是冒泡，还是捕获？

5. 两种事件方式的应用场景是？

示例

<!DOCTYPE HTML>
<html lang="en-US">
<head>
<meta charset="UTF-8"/>
<title>Events</title>
<script type="text/javascript" src="jquery-3.0.0.js"></script>
<style>html,body{width:100%;height:100%;padding: 0;margin: 0;}div{float:left;width: 200px;height:200px;border:1px solid blue;}p{width: 100px;height:100px;border:1px solid red;}
</style>
</head><body id="body"><div id="J_d0">0<p id="J_p0"></p></div><div id="J_d1">1<p id="J_p1"></p></div><div id="J_d2">2<p id="J_p2"></p></div><div id="J_d3">3<p id="J_p3"></p></div><div id="J_d4">4<p id="J_p4"></p></div></body><script>var body = document.getElementById('body');body.addEventListener('click', hello, true); //当为false时，全部在最后执行。
 bindEvent_d_p(0,true,true);//点击p,输出//i am body//i am J_d0//i am J_p0
 bindEvent_d_p(1,false,true);//点击p,输出//i am body//i am J_p1//i am J_d1
 bindEvent_d_p(2,false,false);//点击p,输出//i am body//i am J_p2//i am J_d2
 bindEvent_d_p(3,true,false);//点击p,输出//i am body//i am J_d3//i am J_p3
 $("#J_d4").on("click", hello);$("#J_p4").on("click", hello);//点击p,输出//i am body//i am J_p4//i am J_d4function bindEvent_d_p(index, d_useCapture, p_useCapture){var d = document.getElementById('J_d'+index);var p = document.getElementById('J_p'+index);//第三个参数，指定事件是在捕获阶段还是冒泡阶段执行。               d.addEventListener('click', hello, d_useCapture);               p.addEventListener('click', hello, p_useCapture);

          }function hello() {console.log("i am " + this.id);}</script>
</html>

这里关键的是第三个参数。W3CSchool解释为“指定事件是否在捕获或冒泡阶段执行”，我觉得这个说明会让人误会，搞得像捕获或冒泡都可以不选的样子。但其实不是，只是二选一，所以最好解释为“指定事件是在捕获阶段还是冒泡阶段执行”。

定义

JavaScript的事件是以一种流（回环流）的形式存在的，一个事件会有多个元素同时响应。如下图：

PS：图例来自http://www.nowamagic.net/javascript/js_EventAnalysis.php

这个图非常清楚的说明的事件的执行顺序，完全可以解释示例中的结果。事件一直从window往触发目标元素流，当父或祖先捕获事件时，就先执行，不然就在冒泡阶段执行，直到window。

Q&A

1. 自下而上（冒泡）事件怎么写，自上而下（捕获）又是怎么写？

当需要冒泡时，第三参数设为false就行；

当需要捕获时，第三参数设为true就行；

2. 捕获型和冒泡型同时设置，谁生效？

按第三参数的设置，只有二选一，并不存在可以同时设置情况。

3. 冒泡能够阻止，那捕获能够阻止吗？

冒泡事件是能够阻止，e.stopPropagation();，大家是比较清楚的，同样的捕获事件也是能阻止的。

其实就是当先触发的事件是在捕获过程的，阻止了事件传播，就是捕获阻止，当在冒泡过程中阻止，就是冒泡阻止。

结果就是，事件流不再继续流了，无论是往下还是往上。

4. jquery的on或bind是冒泡，还是捕获？

经过上面示例可以验证， jquery的on或bind是冒泡执行的。

另外在jquery3.0.0的源码4943行地方：

// Init the event handler queue if we're the first
if ( !( handlers = events[ type ] ) ) {handlers = events[ type ] = [];handlers.delegateCount = 0;// Only use addEventListener if the special events handler returns falseif ( !special.setup ||special.setup.call( elem, data, namespaces, eventHandle ) === false ) {if ( elem.addEventListener ) {elem.addEventListener( type, eventHandle );}}
}

这里可以很明显看到，事件的注册并没有传第三个参数，所以 jquery的on或bind肯定是冒泡执行的。

5. 两种事件方式的应用场景是？

额，这个问题并不好回答，就具体问题，具体分析了。

总结

小小的往细处想，竟然发现我其实有些细节并没明白，共勉。

本文为原创文章，转载请保留原出处，方便溯源，如有错误地方，谢谢指正。

本文地址：http://www.cnblogs.com/lovesong/p/5705541.html

分类: 1.前端基础

本文转自海角在眼前博客园博客，原文链接： http://www.cnblogs.com/lovesong/p/5705541.html ，如需转载请自行联系原作者

JavaScript事件机制——细思极恐相关推荐

细思极恐！只需54块钱，你也能让AI伪造一系列联合国发言
安妮发自凹非寺量子位出品 | 公众号 QbitAI 联合国发言生成器了解一下? 最近,有研究人员真就搞出了一个.手握这个生成器,你就可以无限生成逼真的联合国演讲风格的内容. 快速传递假新闻.随 ...
[转载] 细思极恐的星座分析（下）- 外太空？内子宫？人类的天赋从何而来？
参考链接: 显示给定出生日期的星座或黄道十二宫的Python程序在看完本文上半部分后,大家应该对星座与人类天赋之间的关系有了比较深刻的了解.在本文下半部分中,我将通过星座来猜测天赋的成因.与&quo ...
这套ai的思维让我感到了一个细思极恐的开源项目
这套ai的思维让我感到了一个细思极恐的开源项目去年,一款角色扮演游戏在国内市场悄然崛起,并在年轻人群体中得到了广泛传播,它有着一个响当当的的名字,叫「剧本杀」. 剧本杀玩法非常简单. 在游戏开始前, ...
令人细思极恐的小故事_“＆”号的令人惊讶的故事
令人细思极恐的小故事 An ampersand is an invitation to imagine what will come next. It is a continuation of a c ...
AI都干过什么让人细思极恐的事？
本文来自AI新媒体量子位(QbitAI) 谈到人工智能(AI)总会有人觉得恐怖. 到底怕在何处?你有证据么? 巧了.美国问答网站Quora上就有这么一个问题:到目前为止,AI做过最可怕的事情是什么? ...
【深度长文】细思极恐的YouTube可跳过广告
[预警]:Youtube的可跳过广告尽管极其精妙(看完你就知道了),但其实并没有到细思极恐的程度:同时本文也并非深度长文,长是比较长,深不深度就另说了!作为一个广告PM,这种标题党行为都是为了优化点击 ...
细思极恐，原来12306架构这么牛逼
作者:绘你一世倾城 https://juejin.im/post/5d84e21f6fb9a06ac8248149 每到节假日期间,一二线城市返乡.外出游玩的人们几乎都面临着一个问题:抢火车票! 12 ...
细思极恐!人工智能可能会选择故意输给你
"智能"这个词又一次被推向了媒体舆论的风口浪尖.无论是3.15晚会上点名披露安全问题的智能家居产品,还是4:1大胜韩国围棋高手李世石的Alpha Go,如火如荼的"智能& ...
细思极恐！未来百万人将下岗十大职业将消失
细思极恐!未来百万人将下岗十大职业将消失 0 2015年12月2日,中国社会科学院副院长蔡昉.人口与劳动经济研究所所长张车伟主编的<中国人口与劳动问题报告No.16--"十二五&quo ...

JavaScript事件机制——细思极恐

JavaScript事件机制——细思极恐相关推荐

最新文章

热门文章