JavaScript之EventListener事件的传递顺序--冒泡和捕获传播-低调大师

JavaScript之EventListener事件的传递顺序--冒泡和捕获传播

2019-04-11 605

addEventListener() 方法
在用户点击按钮时触发监听事件：

document.getElementById("myBtn").addEventListener("click", displayDate);

第一个参数是事件的类型 (如 "click" 或 "mousedown"). 把on去掉
第二个参数是事件触发后调用的函数。
第三个参数是个布尔值用于描述事件是冒泡还是捕获。该参数是可选的。
下面的例子是演示监听事件的传播顺序以及如何阻止这种传播。
冒泡和捕获传播

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        
        <style type="text/css">
            
            div{
                width: 300px;
                height: 300px;
                background-color: beige;
            }
            p{
                width: 200px;
                height: 200px;
                background-color: cadetblue;
            }
        </style>
    </head>
    <body>
        
        <div id="div1">
            <p id="p1"></p>
        </div>
        
            <a href="http://www.baidu.com" onclick="return click1()">百度</a>
            
            <form action="" method="post" onsubmit="return mysubmit()">
                <input type="text" name="username" placeholder="请输入用户名" />
                <input type="password" name="pwd" placeholder="请输入密码" />
                <input type="submit" value="提交"/>
            </form>
            
        <script type="text/javascript">
            div1.addEventListener("click",function(){
                alert("触发了div的click");
//                return false; 阻止默认行为
//                event.stopPropagation(); //停止传播（冒泡或捕获）
                
            },true);
            p1.addEventListener("click",function(){
                alert("触发了p的click");
//                event.stopPropagation();//停止传播  冒泡传播
            
            },true);
            
            function click1(){
                alert("你点击了a标签");
                return false;//在a标签里也要加return 这样才能阻止默认的传播行为
            }
            
            function mysubmit(){
                alert("马上要提交了");
                return false;//同上
            }
            
        </script>
    </body>
</html>

微信关注我们

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

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

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

python实现二叉树数据结构的多种遍历方式

二叉树的遍历比较有意思，首先是遍历的方式比较多，大的来说分为深度遍历和广度遍历，深度遍历又分为先序遍历/中序遍历/后序遍历，其中深度遍历用递归来实现，广度遍历用队列来实现。深度遍历和广度遍历是相对的概念，深度遍历是沿着树的深度遍历树的节点，尽可能深的搜索树的分支；广度遍历是从树的根层级开始一层一层的遍历，遍历完上一层再遍历下一层；如下：深度遍历顺序：0-1-3-7-8-4-9-2-5-6（先序遍历）广度遍历顺序：0-1-2-3-4-5-6-7-8-9 但对于深度遍历而言还有三种方式：先序遍历/中序遍历/后序遍历；先序遍历的顺序为：根节点->左子树->右子树；中序遍历为：左子树->根节点->右子树；当然后序遍历是：左子树->右子树->根节点；其中的序指的是根节点相对于左右节点的遍历位置。在上二叉树中

2019-04-11

668

properties配置文件一般是使用properties保存配置文件内容,然后在mybatis配置文件中进行读取在resource文件下新建db.properties文件内容如下 # 数据库配置文件 driver = com.mysql.cj.jdbc.Driver url = jdbc:mysql:// /mybatis username = password = 然后,接着把文件放入源码包中配置mybatis-config.xml文件 <?xml version="1.0" encoding="UTF-8" ?> <!DOCTYPE configuration PUBLIC "-//mybatis.org//DTD Config 3.0//EN" "http://mybatis.org/dtd/mybatis-3-config.dtd"> <configuration>  <properties resource="db.properties"/> <!-- 定义别名 --&g...

2019-04-12

380

资源下载

更多资源

Mario

马里奥是站在游戏界顶峰的超人气多面角色。马里奥靠吃蘑菇成长，特征是大鼻子、头戴帽子、身穿背带裤，还留着胡子。与他的双胞胎兄弟路易基一起，长年担任任天堂的招牌角色。

腾讯云软件源

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

Spring

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

Sublime Text

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