zoukankan      html  css  js  c++  java
  • JS事件捕获和事件冒泡

    事件冒泡大家都知道的,在实际开发中也经常的接触到,然而事件捕获是个什么鬼?

     

      对“捕获”和“冒泡”这两个概念,我想我们对冒泡更熟悉一些,因为在我们使用的所有浏览器中,都支持事件冒泡 ,即事件由子元素向祖先元素传播的,就 像气泡从水底向水面上浮一样。而在像firefox,chrome,safari这类所谓的标准浏览器中,事件传播还有个阶段,那就是捕获阶段,这个很少 有用武之地,所以被人疏忽遗忘也在所难免了,不常用不代表它不存在,本着科学严谨的态度,我们有必要去看一下它的庐山真面目。

      事实上,捕获阶段是一个和冒泡阶段完全相反的过程,即事件由祖先元素向子元素传播,和一个石子儿从水面向水底下沉一样,要说明的是在 IE,opera浏览器中,是不存在这个阶段的。从各浏览器提供的注册事件监听的方法中可见一斑,例如适用于ie,opera的attachEvent, 有两个参数,attachEvent(”on”+type,fn),而适用于所谓标准浏览器的addEventListener则有三个参 数,addEventListener(type,fn,boolean),前面两个参数不用解释,第三个参数boolean,就是决定注册事件发生在捕获阶段还是冒泡阶段,具体参考如下:true : 捕获阶段 false : 冒泡阶段(该段落摘自:http://www.cnblogs.com/Jason-Damon/archive/2011/11/20/2255952.html)

     

    W3C模型

    W3C模型是将两者进行中和,在W3C模型中,任何事件发生时,先从顶层开始进行事件捕获,直到事件触发到达了事件源元素。然后,再从事件源往上进行事件冒泡,直到到达document。

    程序员可以自己选择绑定事件时采用事件捕获还是事件冒泡,方法就是绑定事件时通过addEventListener函数,它有三个参数,第三个参数若是true,则表示采用事件捕获,若是false,则表示采用事件冒泡。

    ele.addEventListener('click',doSomething2,true) true=捕获 false=冒泡

    传统绑定事件方式

    在一个支持W3C DOM的浏览器中,像这样一般的绑定事件方式,是采用的事件冒泡方式。

    ele.onclick = doSomething2

    IE浏览器

    如上面所说,IE只支持事件冒泡,不支持事件捕获,它也不支持addEventListener函数,不会用第三个参数来表示是冒泡还是捕获,它提供了另一个函数attachEvent。

    ele.attachEvent("onclick", doSomething2);

    附:事件冒泡(的过程):事件从发生的目标(event.srcElement||event.target)开始,沿着文档逐 层向上冒泡,到document为止。

    事件的传播是可以阻止的

    在W3c中,使用stopPropagation()方法

    在IE下设置cancelBubble = true;

    在捕获的过程中stopPropagation();后,后面的冒泡过程也不会发生了~

    3.阻止事件的默认行为,例如click <a>后的跳转~

    在W3c中,使用preventDefault()方法;

    在IE下设置window.event.returnValue = false;

    4.不是所有的事件都能冒泡,abort、error、mouseEnter、mouseLeave、resize、blur、focus、load、unload

  • 相关阅读:
    WeX5那些坑
    项目总结-微信公众平台Html5
    项目总结-APP中的HTML5
    夜幕团队成员的工资究竟几 K ?
    Docker竟然还能这么玩?商业级4G代理搭建实战!
    今天,大佬云集的夜幕团队正式成立了!
    InnoDB物理行中null值的存储的推断与验证
    探究InnoDB数据页内部行的存储方式
    DAO模式
    JDBC
  • 原文地址:https://www.cnblogs.com/guxuelong/p/6590564.html
Copyright © 2011-2022 走看看