zoukankan      html  css  js  c++  java
  • 事件冒泡

      当一个事件发生时,当前 DOM 元素本身可能不能处理这个事件,事件必须从这个按钮传播出去,从而到达能够处理这个事件的代码中。事件向上传递的过程便是事件冒泡。这是一个典型的责任链模型,由责任链上的节点依次对事件进行处理。当然,必要的时候我们也可以根据需要禁止事件的传播。

      比如,当多个嵌套的 DOM 元素均监听同一事件时,如果我们不阻断事件的传播,事件会自下而上被依次处理:

    <html>
        <head>
            <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
            <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
        </head>
        <body onclick='console.log("from body");'>
            <div onclick='console.log("from div");'>
                <button onclick='console.log("from button");'>点击我</button>
            </div>
        </body>
    </html>

      处理事件的顺序是 button---> div ---> body 。

      与事件冒泡对应的是事件捕获,事件捕获的顺序与事件冒泡的顺序相反,由外层到内层依次对事件进行捕获:

  • 相关阅读:
    [省选联考 2020 A 卷] 组合数问题
    [HAOI2018]苹果树
    [集训队作业2013]城市规划
    多项式牛顿迭代
    多项式开方
    分治 FFT 模板的三种过法
    Graham 求静态凸包
    exp 初探
    HAOI2018 染色
    如何关闭wps热点,如何关闭wpscenter,如何关闭我的wps
  • 原文地址:https://www.cnblogs.com/niuyourou/p/12507985.html
Copyright © 2011-2022 走看看