首页 > 其他分享 >js事件冒泡

js事件冒泡

时间:2023-10-10 17:44:33浏览次数:40  
标签:单击 father js son 事件 document 冒泡

事件冒泡

所谓的冒泡就是事件的逐级向上传导的过程,当后代元素上的事件被触发时,其祖先元素的相同事件也会被触发。

因为子元素以及父元素在设置监听事件时均设置的是在事件的冒泡阶段调用回调函数,单击子元素时,因为事件的冒泡此单击事件会一直冒泡到父元素中。

 代码如下:

<!DOCTYPE html>
<html lang="en">
 
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
 
<body>
    <div class="father">father盒子
        <div class="son">son盒子</div>
    </div>
    <script>
        // onclick 和 attachEvent(ie) 在冒泡阶段触发
        /*
         冒泡阶段 如果addEventListener 第三个参数是 false 或者 省略 
        如果参数为true,则为捕获阶段
        */
        // son -> father ->body -> html -> document
        var son = document.querySelector('.son');
        // 给son注册单击事件
        son.addEventListener('click', function (event) {
            alert('son');
            // // 阻止事件冒泡
            // event.stopPropagation();
        }, false);
        // 给father注册单击事件
        var father = document.querySelector('.father');
        father.addEventListener('click', function (event) {
            alert('father');
 
            // // 阻止事件冒泡
            // event.cancelBubble = true;
 
        }, false);
        // 给document注册单击事件,省略第3个参数
        document.addEventListener('click', function () {
            alert('document');
        })
    </script>
 
</body>
 
</html>

 

标签:单击,father,js,son,事件,document,冒泡
From: https://www.cnblogs.com/ywzh/p/17755315.html

相关文章

  • pydantic学习与使用-17.使用 json_encoders 格式化 datetime 类型
    前言使用datetime日期类型时,想格式化成自定义的"%Y-%m-%d%H:%M:%S"格式datetime类型frompydanticimportBaseModelfromdatetimeimportdatetime#上海悠悠wx:283340479#blog:https://www.cnblogs.com/yoyoketang/classUserInfo(BaseModel):id:intna......
  • abp 框架使用自定义appsetings.json
    定义一个自定义的配置文件在调试配置中设置启动环境这里的值填入刚刚设置的配置文件appsetings.{配置文件名字}.json的配置文件名字启动即可系统启动时,首先会检查{配置文件名字}是否存在,存在的话使用appsettings.{配置文件名字}.json,不存在则使用appsettings.json(默认配......
  • 总结selenium 中 js 更改隐藏属性
    第一种多个元素被隐藏时通过js修改对比照片这个是没隐藏的 对比照片 这个是隐藏的 driver=webdriver.Chrome()#urlurl=r"http://127.0.0.1:5000/"driver.get(url)print("已打开网页")#执行js脚本,将元素的display属性设置为block,......
  • nginx配置返回文本或json的方法
    下面是讲解“nginx配置返回文本或json的方法”的完整攻略。方法一:返回文本在nginx配置文件中,使用add_header指令来设置响应头部信息,如下所示:location/text{add_headerContent-Typetext/plain;return200"Hello,World!";}上述配置中,location指明请求的URI为......
  • 【转】js事件冒泡
    js事件冒泡详解和使用场景最新推荐文章于 2023-07-1311:46:30 发布Youyzq于2022-11-1416:16:47发布什么是事件冒泡?事件冒泡就是指父元素和子元素有相同的事件,当触发子元素事件时,会向上冒泡,同时也会触发父元素事件事件冒泡的三个阶段1、捕获阶段:从window......
  • 事件冒泡
    一个问题​如果有下面一段代码:在HTML中,定义了嵌套的3个 <div/>,ID分别为div1、div2、div3。在JavaScript中定义一个点击事件处理函数,打印当前执行事件元素的id。把事件处理函数分别注册到这3个div中。这个时候,如果点击最里边的div3元素,你猜代码的输出结果是......
  • 【转】JS事件捕获和事件冒泡
    DOM事件流(eventflow)存在三个阶段:事件捕获阶段、处于目标阶段、事件冒泡阶段。事件捕获(eventcapturing):当鼠标点击或者触发dom事件时(被触发dom事件的这个元素被叫作事件源),浏览器会从根节点=>事件源(由外到内)进行事件传播。事件冒泡(dubbedbubbling):事件源=>根节点(由内到外)......
  • js-cookie库
    https://blog.csdn.net/weixin_49046027/article/details/121123014https://www.cnblogs.com/gopark/p/13743364.html简介js-cookie是一个简单的,轻量级的处理cookies的jsAPI,主要用来处理cookie相关的插件使用1.下载npmi-Djs-cookie2.引入importCookiesfrom'j......
  • MongoDB Node.js Driver and MongoClient All In One
    MongoDBNode.jsDriverandMongoClientAllInOneThenextgenerationNode.jsdriverforMongoDB$npmimongodb#OR$npmi-Smongodb#OR$npminstallmongodb--savehttps://mongodb.github.io/node-mongodb-native/index.htmlhttps://www.mongodb.com......
  • phpStrom配置sass编译和JS压缩混淆
    1JS压缩混淆(YUICompressor)1.1安装java文件(jre-8u201-windows-x64.exe)1.2YUICompressor下载https://github.com/yui/yuicompressor/releases1.3Phpstrom配置:设置-工具-filewatcher配置YUICompressor参数Program参数:D:\MyLocalSoftWare\compressTool\java\bin\jav......