JS冒泡事件与事件捕获-低调大师

JS冒泡事件与事件捕获

2018-01-06 579

JS冒泡事件与事件捕获

案例

<!DOCTYPE html>
<html>
<head>
    <title>冒泡事件</title>
    <script type="text/javascript">
    
        window.onload = function(){
            window.onclick = function(){
                alert("Window"); // 顶级
            };
            
            document.onclick = function(){
                alert("Document"); // 次顶级
            };
            
            document.documentElement.onclick = function(){
                alert("Html"); // 次次顶级
            };
            
            document.body.onclick = function(){
                alert("Body"); // 次次次顶级
            };
            document.getElementById("myDiv").onclick = function(){
                alert("Div"); // 最先执行，并且会传递到上一层。点击两次，则按顺序执行两次。如果上级也有点击事件的话
            };
        }
    

    </script>
</head>
<body>
    <div id="myDiv">点我</div>
</body>
</html>

小结

1.点击myDiv。依次是Div-Body-Html-Document-Window

2.点击其他空白地方。依次是Html-Document-Window

3.连续点击两次，会按顺序执行两次

4.冒泡的前提是，父级也定义了相应的事件

再看一个更复杂的例子

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>事件捕捉</title>
    <script type="text/javascript">
    
        window.onload = function(){
            window.addEventListener("click", function(){
                alert("Window - true");
            }, true); // true - 事件句柄在捕获阶段执行 ,false- false- 默认。事件句柄在冒泡阶段执行
            
            document.addEventListener("click", function(){
                alert("Document - true");
            }, true);
            
            document.documentElement.addEventListener("click", function(){
                alert("Html - true");
            }, true);
            
            document.body.addEventListener("click", function(){
                alert("Body - true");
            }, true);
            document.getElementById("myDiv").addEventListener("click", function(){
                alert("Div - true");
            }, true);

            window.addEventListener("click", function(){
                alert("Window - false");
            }, false); // true - 事件句柄在捕获阶段执行 ,false- false- 默认。事件句柄在冒泡阶段执行

            document.addEventListener("click", function(){
                alert("Document  - false");
            }, false);

            document.documentElement.addEventListener("click", function(){
                alert("Html  - false");
            }, false);

            document.body.addEventListener("click", function(){
                alert("Body  - false");
            }, false);
            document.getElementById("myDiv").addEventListener("click", function(){
                alert("Div  - false");
            }, false);

            window.onclick = function(){
                alert("Window - click"); // 顶级
            };

            document.onclick = function(){
                alert("Document - click"); // 次顶级
            };

            document.documentElement.onclick = function(){
                alert("Html - click"); // 次次顶级
            };

            document.body.onclick = function(){
                alert("Body - click"); // 次次次顶级
            };
            document.getElementById("myDiv").onclick = function(){
                alert("Div - click"); // 最先执行，并且会传递到上一层。点击两次，则按顺序执行两次。如果上级也有点击事件的话
            };
        }
    

    </script>
</head>
<body>
    <div id="myDiv">点我</div>
    
</body>
</html>

小结

1.点击的执行结果是

Window - true

Document - true

Html - true

Body - true

Div - true

Div - false

Div - click

Body - false

Body - click

Html - false

Html - click

Document - false

Document - click

Window - false

Window - click

2.顺序与js代码顺序无关

3.就算没有定义点击事件，一样可以捕获点击事件，只要点击到，就能捕获到

再次改造，阻止冒泡

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>事件捕捉</title>
    <script type="text/javascript">
    
        window.onload = function(){
            document.addEventListener("click", function(){
                alert("Document - true");
            }, true);

            window.addEventListener("click", function(){
                alert("Window - true");
            }, true); // true - 事件句柄在捕获阶段执行 ,false- false- 默认。事件句柄在冒泡阶段执行


            document.documentElement.addEventListener("click", function(){
                alert("Html - true");
            }, true);
            
            document.body.addEventListener("click", function(){
                alert("Body - true");
            }, true);
            document.getElementById("myDiv").addEventListener("click", function(){
                alert("Div - true");
            }, true);

            window.addEventListener("click", function(){
                alert("Window - false");
            }, false); // true - 事件句柄在捕获阶段执行 ,false- false- 默认。事件句柄在冒泡阶段执行

            document.addEventListener("click", function(){
                alert("Document  - false");
            }, false);

            document.documentElement.addEventListener("click", function(){
                alert("Html  - false");
            }, false);

            document.body.addEventListener("click", function(){
                alert("Body  - false");
            }, false);
            document.getElementById("myDiv").addEventListener("click", function(){
                alert("Div  - false");
            }, false);

            window.onclick = function(){
                alert("Window - click"); // 顶级
            };

            document.onclick = function(){
                alert("Document - click"); // 次顶级
            };

            document.documentElement.onclick = function(){
                alert("Html - click"); // 次次顶级
            };

            document.body.onclick = function(){
                alert("Body - click"); // 次次次顶级
            };
            document.getElementById("myDiv").onclick = function(){
                alert("Div - click"); // 最先执行，并且会传递到上一层。点击两次，则按顺序执行两次。如果上级也有点击事件的话
                event.stopPropagation(); // 阻止冒泡
            };
        }
    

    </script>
</head>
<body>
    <div id="myDiv">点我</div>
    
</body>
</html>

小结

Window - true

Document - true

Html - true

Body - true

Div - true

Div - false

Div - click

终止了，没有后续的内容了

本文转自TBHacker博客园博客，原文链接：http://www.cnblogs.com/jiqing9006/p/5960221.html，如需转载请自行联系原作者

微信关注我们

原文链接：https://yq.aliyun.com/articles/337124

转载内容版权归作者及来源网站所有！

低调大师中文资讯倾力打造互联网数据资讯、行业资源、电子商务、移动互联网、网络营销平台。持续更新报道IT业界、互联网、市场资讯、驱动更新,是最及时权威的产业资讯及硬件资讯报道平台。

JAVA设计模式之【装饰者模式】

JAVA设计模式之【装饰者模式】装饰模式对新房进行装修并没有改变房屋的本质，但它可以让房子变得更漂亮、更温馨、更实用。在软件设计中，对已有对象（新房）的功能进行扩展（装修）。把通用功能封装在装饰器中，用到的地方进行调用。装饰模式是一种用于替代继承的技术，使用对象之间的关联关系取代类之间的继承关系。引入装饰类，扩充新功能。角色抽象构件具体构件抽象装饰类具体装饰类案例一，窗体装饰 1.组件类 package Decorator; // 装饰者模式 /** * Created by Jiqing on 2016/10/13. */ abstract class Component { public abstract void display(); } 2.组件装饰者 package Decorator; /** * Created by Jiqing on 2016/10/13. */ public class ComponentDecorator extends Component{ private Component component; // 维持对抽象构件类型对...

2018-01-07

593

apiCloud中aui获取不到高度，pos.h为0，offsetHeight为0问题原HTML <div class="row aui-text-center"> <div class="aui-col-xs-2" style="cursor: pointer;" onclick="api.closeWin({});"> <i class="aui-iconfont aui-icon-left"></i> </div> <div class="aui-col-xs-8"> <div class="aui-searchbar-input aui-border-radius" style="margin:0.4rem 0" tapmode="" onclick=""> <i class="aui-iconfont aui-icon-search"></i> <form action="javascript:search();"> <input type="sea...

2018-01-07

552

资源下载

更多资源

腾讯云软件源

为解决软件依赖安装时官方源访问速度慢的问题，腾讯云为一些软件搭建了缓存服务。您可以通过使用腾讯云软件源站来提升依赖包的安装速度。为了方便用户自由搭建服务架构，目前腾讯云软件源站支持公网访问和内网访问。

Spring

Spring框架（Spring Framework）是由Rod Johnson于2002年提出的开源Java企业级应用框架，旨在通过使用JavaBean替代传统EJB实现方式降低企业级编程开发的复杂性。该框架基于简单性、可测试性和松耦合性设计理念，提供核心容器、应用上下文、数据访问集成等模块，支持整合Hibernate、Struts等第三方框架，其适用范围不仅限于服务器端开发，绝大多数Java应用均可从中受益。

Rocky Linux

Rocky Linux（中文名：洛基）是由Gregory Kurtzer于2020年12月发起的企业级Linux发行版，作为CentOS稳定版停止维护后与RHEL（Red Hat Enterprise Linux）完全兼容的开源替代方案，由社区拥有并管理，支持x86_64、aarch64等架构。其通过重新编译RHEL源代码提供长期稳定性，采用模块化包装和SELinux安全架构，默认包含GNOME桌面环境及XFS文件系统，支持十年生命周期更新。

Sublime Text

Sublime Text具有漂亮的用户界面和强大的功能，例如代码缩略图，Python的插件，代码段等。还可自定义键绑定，菜单和工具栏。Sublime Text 的主要功能包括：拼写检查，书签，完整的 Python API ， Goto 功能，即时项目切换，多选择，多窗口等等。Sublime Text 是一个跨平台的编辑器，同时支持Windows、Linux、Mac OS X等操作系统。