如何阻止事件冒泡及默认事件

        大家好，我是IT修真院学员，一枚正直纯洁善良的WEB程序员,今天给大家分享一下，修真院官网JS任务4，深度思考中的知识点——如何阻止事件冒泡及默认事件.

一、背景介绍

1、冒泡事件

        一个完整的事件过程包括捕获-目标-冒泡

                                                        

        什么是冒泡事件？如果页面上有一个button，并且绑定了点击事件（或者其它的事件），当你点击button的时候如果body中也绑定了一个点击事件（或者其它的事件），那么body中的点击事件也会出发。事件从盒子嵌套的最深处传播（propagation）到最外层的过程就叫做冒泡（bubbling）。

2、默认事件

        默认事件又是什么呢？默认事件是针对浏览器而言的，是浏览器的默认行为（browser default actions），

        例如：

        点击一个链接——跳转；

        在表单中点击submit按钮——向服务器发送数据；

        在文本上按住鼠标左键并移动——选中文本；

        这些都是默认事件。

二、知识剖析

        对于事件的冒泡及默认事件在一些情况下我们并不希望它发生，这时我们可以选择阻止他们的活动。

1、阻止事件冒泡

        如果你是通过addEventListener添加的事件，那么以用下面这个方法阻止事件传播：

        1）event.stopPropagation()；

        2）return false；

       如果你需要支持不遵循W3C推荐标准的传统浏览器，通常在一个函数中需要使用如下内容：

function(e) {
  var event = e || window.event; 
  //code
  event.stopPropagation()
  //return false
 }

        如果你是在标签中用on<event>来绑定事件，那么需要这样做：

<span onclick="event.stopPropagation(); 
    alert('you clicked inside the header');" 
    window.event.cancelBubble = "true">
</span>

        但是，一般来说，如果你需要任何复杂的东西，比如停止传播，那么应该避免内联事件处理程序。将事件处理程序单独编写，并将它们绑定到元素中，这在中长期项目中是一个更好的主意，可读性高，维护性也好。

2、阻止默认事件

        有两种方法：

        1）event.preventDefault()；

        2）return false；

        如果你是在标签中用on<event>来绑定事件，那么只能用 return false；

例如，阻止input获得焦点：

<input value="Focus works" onfocus="this.value=''">
<input onmousedown="return false" onfocus="this.value=''" value="Click me">

三、常见问题

        1、AngularJS中如何阻止默认事件？

        2、事件执行的三个阶段是什么？

四、解决方案

        1、$ecent.preventDefault();

        2、捕获阶段——目标阶段——冒泡阶段。

五、编码实战

六、拓展思考

七、参考文献

参考一： 事件委托

参考二： 事件冒泡、事件捕获和事件委托

参考三： 阻止事件冒泡，阻止默认事件

八、更多讨论

Q1：如何解除事件绑定?

A1：

attachEvent(事件名，函数)  //IE

addEventListener(事件名，函数 false)  //FireFox Chrome

Q2：用冒泡还是捕获？

A2：为了兼容IE低版本浏览器最好用冒泡，而且事件的默认方式是冒泡；

Q3：事件代理（委托）的原理及优缺点

A3：   原理：利用冒泡原理，将元素的事件绑定到父级元素上；

        优点：

        1、如果要用事件委托，就会将所有的操作放到js程序里面，与dom的操作就只需要交互一次，这样就能大大的减少与dom的交互次数，提高性能；

        2、新增节点不必再手动添加事件；

        缺点：应用场景少