关于js冒泡、捕获、以及阻止冒泡
有如下html
<ul>
<li>
<p>
<a href="javascript:;">click me</a>
</p>
</li>
</ul>
给每个节点都添加监听事件:
document.querySelector("ul").addEventListener("click",function (event) {
alert("this is ul");
},false);
document.querySelector("li").addEventListener("click",function (event) {
alert("this is li");
},false);
document.querySelector("p").addEventListener("click",function (event) {
alert("this is p");
},false);
document.querySelector("a").addEventListener("click",function (event) {
alert("this is a");
},false);
点击a标签,alert的顺序是 a、p、li、ul。
这是默认的冒泡方式。
如果将监听事件里的false改为true,
再点击a标签,alert的顺序为ul、li、p、a。
这就是事件捕获。
如果我们将li、a改为true,ul、p仍为false,
那么顺序是,li、a、p、ul。
我是这么理解的,执行顺序,首先找true,也就是事件捕获,他的优先级大于冒泡,然后所有true的元素按从外到内的顺序执行,然后才是余下false的元素,从内到外执行。
还有就是阻止冒泡,还是第三的例子,顺序应该是li、a、p、ul。
但是我在p的监听事件里添加一句event.stopPropagation();
也就是
document.querySelector("p").addEventListener("click", function(event) {
event.stopPropagation();
alert("this is p");
}, false);
那么顺序就变成了li、a、p。
ul就不执行了,因为在执行到p节点的时候阻止了冒泡,p之后的事件就不执行了。
最新文章
- MFC 自绘按钮 消息响应
- sublime text 如何设置”在浏览器浏览“的快捷键
- python模块之os
- Django基础-过滤器
- git-ssh 配置和使用
- 2015NOIP简单说说
- 如何解压 Mac OS X 下的 PKG 文件(网摘)
- Oracle EBS 重新编译无效对象 invalid object
- MAC OSX下用pip安装lxml时遇到xmlversion.h not found的解决办法
- 转 InnoDB Error Handling
- js实现选中div内容并复制到剪切板
- MySQL的log_bin和sql_log_bin 的区别
- 前端 - jsonp 跨域ajax
- “==”和equals
- 使用padding值控制控件的隐藏与显示
- windows下Oracle Tuxedo编译应用前需要配置的相关环境变量
- 改变presentModalView大小
- Ubuntu技巧之清理系统中无用的软件包
- jq如何判断是否存在某个指定的style样式
- 数学建模及机器学习算法(一):聚类-kmeans(Python及MATLAB实现,包括k值选取与聚类效果评估)