微信号:FrontDev

介绍:分享 Web 前端相关的技术文章、工具资源、精选课程、热点资讯

又被事件冒泡坑了一把,这次要彻底弄懂浏览器的事件流

2016-07-07 19:55 前端大全

(点击上方公众号,可快速关注)

作者:伯乐在线专栏作者 - 昱见

链接:http://web.jobbole.com/86584/

点击 → 了解如何加入专栏作者


打算封装一个弹窗组件,做的时候忘记了考虑事件冒泡的因素,结果被坑得不要不要的。为了解决自己的问题,去查阅了不少资料,把事件流相关的知识都给总结一下。


事件冒泡:一个简单,但是坑了我无数回的知识点!


JavaScript与HTML的交互通过事件来实现。而浏览器的事件流是一个非常重要的概念。不去讨论那些古老的浏览器有事件捕获与事件冒泡的争议,只需要知道在DOM2中规定的事件流包括了三个部分,事件捕获阶段、处于目标阶段、事件冒泡阶段。


一、事件捕获


事件捕获,是从document元素开始,越高级的父级元素越早接收到事件,因此这是一个从上而下的过程。


还是那句话,没在实际应用中踩过坑,可能你真的不算掌握了这个知识点。那么,事件捕获有什么常见的坑呢?


1. 坑一:新插入的子元素没有绑定点击事件


可能不少同学在初学js的时候遇到过这样一个坑。一个ul元素中初始的状态有4个li元素,我们可以循环给li元素添加click事件,执行我们想要的动作。这个例子的坑就在于,新添加的li元素不会有我们绑定的click事件。


<ul class="container">

 

    <!-- 先循环给原有的4li绑定click事件 -->

    <li class="item"></li>

    <li class="item"></li>

    <li class="item"></li>

    <li class="item"></li>

    

    <!-- 这是新添加的li元素,但是该元素没绑定click事件 -->

    <li class="item new"></li>

</ul>


是的,就是这么坑,为了解决这个问题,我们就要利用事件捕获的原理。


$('ul.container').click(function(event) {

    var target = event.target;

    if (target.className == 'item') {

        // dosomething

    }

})


在上面的解决方案中,我并不是直接给li绑定事件,而是给所有li的父级ul绑定事件。根据事件捕获的原理,事件会自上而下传递给li,我们只需要通过一些简单的条件判断来确定我们的目标元素即可,如上例中的判断li的className。


这个方式就是大名鼎鼎的事件委托。


事件委托是一个很重要而且在实际中会常常用到的知识点。


2. 坑二: 如果目标元素有子元素,那么怎么办?


当我们在使用className判断目标元素时,会遇到这样的情况。


<li class="item">

    <div class="title">xxx</title>

    <p class="desc">xxxxxxs</p>

</li>


当我们试图使用事件委托希望给所有的li添加元素时,在利用className判断的过程中发现,目标event.target元素居然是li.item的子元素,这个时候就没办法准确的将事件绑定到li上了,这个时候我们应该怎么办?


这种情况,我们要做的,就是阻止事件捕获的传递,那么,要如何阻止呢?


我知道的一种方式,利用css,给li所有子元素添加如下css属性即可


li.item >  * {

  pointer-events: none;

}


按道理来说,应该是有js方式的,可是查了很多文章都没有提及,因此就暂时这样吧,到时候遇到了在补充。


在jquery中,已经帮助我们实现了事件委托,并且帮我们解决掉了这些坑。我们只需要按照一定语法使用即可,而我们不用再自己去进行条件判断,比如我们要给所有的li.item元素绑定事件,写法如下


// on中的第二参数就是我们的目标元素的选择器

$('ul.container').on('click', 'li.item', function(event) {

    // dosomething

})


二、事件冒泡


说完了事件捕获,然后来说说事件冒泡这个坑。所谓事件冒泡,就是让DOM树最底层的目标元素最先接收到事件,然后往上传递,这是一个自下而上的过程。


我们常常会遇到一种弹窗样式,弹窗出来时,内容在中间,然后会有一层半透明的遮罩将页面内容与弹窗区分开。弹窗内容会有一些按钮绑定点击事件,比如确认与取消。而在半透明遮罩上,可能也会绑定一个点击事件,当点击时,将弹窗隐藏。如果我由于经验不足,将该遮罩层设置成了弹窗按钮的父级,那么就会遇到事件冒泡带来的麻烦。


也就是说,在如下例子中 container是全屏遮罩,button是弹窗里面的点击按钮。他们都同时绑定了click事件,执行不同的动作。但是在实际执行的时候,当我点击了button,那么button和container的click事件都会执行,自下而上按顺序执行


<div className="container">

    <div className="button">click</div>

</div>


我为这个事情写了一个小例子,大家可以动手感受一下这个坑。点击空白会生成一个弹窗


http://yangbo5207.github.io/static/demo/event-flow/dev/


好吧解决问题的方法很简单,就是阻止冒泡事件。


$xxx.click(function(e) {

    e.stopPropagation();

    

    // ie

    e.cancelBubble = true;

})


理解了整个事件流,我们可以感受事件在DOM中的传递过程与方向,并且利用他来解决我们的问题和各种坑,虽然是一个简单的知识点,但是却非常容易被忽略,因此建议大家找机会将它掌握牢固。


而还有一个坑,可能大家在实际中会很少遇到,这个坑就是,某些事件类型天生就不支持事件冒泡!


blur: 在元素失去焦点时触发,该事件不支持冒泡

focus: 在元素获得焦点时触发,该事件不支持冒泡

mouseenter: 当鼠标移入元素时触发,该事件不支持冒泡

mouseleave: 当鼠标移出元素时触发,该事件不支持冒泡

… …


以及IE6 IE7 IE8中 的 change、select、submit、reset 事件事实上都没有参照规范定义产生事件冒泡。


当你在需要的冒泡的时候,绑定了这些事件,而你恰好不知道居然还有事件天生就不支持冒泡的,那么你可能就悲剧了。所以这个点只要在脑袋里面有个印象就好了,我只记得我曾经遇到过这样一个坑,但暂时想不起来应用场景了 – -!


我所知道的,遇到过的关于事件流的坑就这么多了,想来应该也算是非常完整的一个总结了,值得大家点一下推荐和收藏的哦!


专栏作者简介 ( 点击 → 加入专栏作者 


昱见:平时会将自己学习总结在我的公众号isreact上分享,欢迎大家搜索关注!

打赏支持作者写出更多好文章,谢谢!



【今日微信公号推荐↓】

更多推荐请看值得关注的技术和设计公众号


其中推荐了包括技术设计极客 和 IT相亲相关的热门公众号。技术涵盖:Python、Web前端、Java、安卓、iOS、PHP、C/C++、.NET、Linux、数据库、运维、大数据、算法、IT职场等。点击《值得关注的技术和设计公众号》,发现精彩!


 
前端大全 更多文章 我理想中的前端工作流 唯快不破:Web 应用的 13 个优化步骤 Vue+WebSocket+ES6+Canvas 制作「你画我猜」小游戏 50W+年薪,用友友金所招大牛啦! 也谈前端面试常见问题之「数组乱序」
猜您喜欢 分布式搜索引擎(二) 公众号每周一推:TimYang 在创业公司当好工程师的 7 个特质 年薪50万的程序员的日常是什么样的? 据说程序员写完代码是这个样子,99%的人都中枪了