zoukankan      html  css  js  c++  java
  • 谈事件冒泡(Bubble)和事件捕捉(capture) Chris

    事件的发生顺序

    假设在一个元素中又嵌套了另一个元素并且两者都有一个onClick事件处理函数(event handler)。如果用户单击元素2,则元素1和元素2的单击事件都会被触发。但是哪一个事件先被触发?哪一个事件处理函数会被首先执行?换句话说,事件的发生顺序到底如何?如下图是当点击span元素区域是,三个点击事件都会被触发,但是先后顺序是怎样的呢?

    1 <div onclick="func1">
    2     <p onclick="func2">
    3         <span onclick=""func3>
    4         </span>
    5     </p>
    6 </div>

    两种模型

    对于这个事件的处理顺序上,Netscape和微软有两种截然不同的处理方法:

    • Netscape主张事件会从最外层开始发生,直到最具体的元素,这种事件发生顺序被称为捕获型
    • 微软则保持事件从最内部元素开始发生,然后一直向上传播,这种事件顺序被称为冒泡型

    这两种事件顺序是截然相反的。Explorer浏览器只支持冒泡事件,Mozilla,Opera7和Konqueror两者都支持。而更古老的opera和iCab两者都不支持

    w3c

    任何发生在w3c事件模型中的事件,首是进入捕获阶段,直到达到目标元素,再进入冒泡阶段。

    对于正常的web开发,可以选择是在捕获阶段还是冒泡阶段绑定事件处理函数,这是通过addEventListener()方法实现的,如果这个函数的useCapture参数是true,则在捕获阶段绑定函数,反之false,在冒泡阶段绑定函数。

    1 element.addEventListener(event, function, useCapture)

    阻止冒泡

    在正常的开发过程中,如果想要阻止事件的传播,通过一个方法实现。

    在微软的模型中,你必须设置事件的cancelBubble的属性为true

    1 window.event.cancelBubble = true

    在w3c模型中你必须调用事件的stopPropagation()方法

    1 e.stopPropagation()

    通过调用这些方法会阻止所有冒泡向外传播。跨浏览器解决方案:

    1 function doSomething(e) {
    2     if (!e) {
    3         var e = window.event;
    4         e.cancelBubble = true;
    5     }
    6     if (e.stopPropagation) {
    7         e.stopPropagation();
    8     }
    9 }

    本文参考文档:http://blog.jobbole.com/39446/

    如需转载请注明出处。
  • 相关阅读:
    hdu 1166 敌兵布阵 线段树区间修改、查询、单点修改 板子题
    POJ 1655 Balancing Act ( 树的重心板子题,链式前向星建图)
    P1268 树的重量(板子)
    P1896 [SCOI2005]互不侵犯 状压dp
    Delphi {$M +} 与{$TYPEINFO ON} 和 {$M -} 与{$TYPEINFO OFF}
    SQL 通过SQL语句检索字段类型、长度、主键
    随笔2020.11.10
    Delphi 操作Windows系统睡眠-防止系统/电脑 进入睡眠或关闭显示器
    Delphi WinAPI SetThreadExecutionState
    Delphi TOpenDialog的使用介绍以及如何动态创建和释放
  • 原文地址:https://www.cnblogs.com/dongcanliang/p/5535291.html
Copyright © 2011-2022 走看看