打开APP
userphoto
未登录

开通VIP,畅享免费电子书等14项超值服

开通VIP
捕获和冒泡
userphoto

2016.01.03

关注

把事件捕获和冒泡的过程统称为事件的传播

事件的传播是可以阻止的:

  • 在W3c中,使用stopPropagation()方法
  • 在IE下设置cancelBubble = true;
在捕获的过程中stopPropagation();后,后面的冒泡过程也不会发生了~  在IE中则使用cancelBubble(IE中只有冒泡,没有捕获)
3.阻止事件的默认行为,例如click <a>后的跳转~
  • 在W3c中,使用preventDefault()方法;
  • 在IE下设置window.event.returnValue = false;
不是所有的事件都能冒泡,例如:blur、focus、load、unload,(这个是从别人的文章里摘过来的,我没测试)

JavaScript所有事件的两个阶段:捕获和冒泡
一下是一段简单的HTML代码

<body>
     <ul>
            <li>
              click here
           </li>
     </ul>
</body>

如果我们点击了Li,则先回响应body的捕获事件,接下来就是ul li ,然后进入冒泡时间,顺序相反。
如果我们分别设置了响应函数,则会分别响应

我们可以阻止冒泡

function(e)
{
   
if (e && e.stopPropagation)        // 支持W3C的stopPropation()方法        e.stopPropagation() else        // 否则,我们得使IE的方式来取消事件冒泡        window.event.cancelBubble = true;

}


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

true : 捕获阶段

false : 冒泡阶段



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

本站仅提供存储服务,所有内容均由用户发布,如发现有害或侵权内容,请点击举报
打开APP,阅读全文并永久保存 查看更多类似文章
猜你喜欢
类似文章
【热】打开小程序,算一算2024你的财运
stopPropagation和cancelBubble的区别
理解JavaScript中的事件
DOM 事件深入淺出(二)
js 停止事件冒泡 阻止浏览器的默认行为(阻止超连接 # ) - 有米啦 http://b...
Keep Bootstrap dropdown open on click
web前端 javascript 兼容低版本 IE 6 7 8复合写法
更多类似文章 >>
生活服务
热点新闻
分享 收藏 导长图 关注 下载文章
绑定账号成功
后续可登录账号畅享VIP特权!
如果VIP功能使用有故障,
可点击这里联系客服!

联系客服