zoukankan      html  css  js  c++  java
  • 106.事件的传播机制

    事件的默认传播机制:

      1)捕获阶段:从外向内依次查找元素

      2)目标阶段:当前事件源本身的操作 //正式文档上没有目标阶段

      3)冒泡阶段:从内到外依次触发相关的行为(我们最常用的就是冒泡阶段)

      使用DMO 0级事件绑定给元素的某一个行为绑定的方法,都是在行为触发后的冒泡阶段把方法执行的 -》冒泡传播

    <style>
            body,div{  margin: 0;  padding: 0;  }
            html,body{   100%;  height: 100%;  }
            #outer{  margin: 20px auto;  padding: 20px;   300px;  height: 300px;  background: green;  }
            #inner{  padding: 20px;   200px;  height: 200px;  background: red;  }
            #center{  padding: 20px;   100px;  height: 100px;  background: orange;  }
        </style>
    <div id="outer">
        <div id="inner">
            <div id="center"></div>
        </div>
    </div>
    <script type="text/javascript">
        var outer = document.getElementById("outer")
        var inner = document.getElementById("inner")
        var center = document.getElementById("center")
        document.body.onclick = function () {
            console.log("body")
        }
        outer.onclick = function () {
            console.log("outer")
        }
        inner.onclick = function () {
            console.log("inner")
        }
        center.onclick = function () {
            console.log("center")
        }
    </script>

    //addEventListener-> 第一个参数是行为的类型,第二个参数是给当前的行为绑定的方法,第三个参数是控制在哪个阶段发生:true在捕获阶段发生,false在冒泡阶段发生(DMO2级事件)
      document.body.addEventListener("click",function (e) {
            console.log("body")
        },false);
        outer.addEventListener("click",function (e) {
            console.log("outer")
        },true);
        inner.addEventListener("click",function (e) {
            console.log("inner")
        },false);
  • 相关阅读:
    常用模块(一)
    面向对象进阶:反射以及内置方法
    面向对象三大特性之多态、封装与装饰器
    面向对象的三大特性之继承
    python之面向对象
    python之内置函数
    python之迭代器,生成器以及列表推导式
    比较好用的linux命令
    使用redission实现分布式信号量以及遇到的一些坑
    linux一些命令
  • 原文地址:https://www.cnblogs.com/z-dl/p/9001512.html
Copyright © 2011-2022 走看看