Js中的事件捕获与冒泡

2018-03-14

事件捕获与冒泡以及其解决方法

1.事件捕获

JS还设置了另外一种处理多（父子）元素多事件触发的方式，叫做事件捕获。事件捕获与事件冒泡完全相反，先触发祖先元素的事件，然后再逐级触发子元素的事件。默认情况下，绑定事件时，采用事件冒泡原则，如果想要进行事件捕获的话，需要设置一个参数

2.事件冒泡

事件先出发后代元素，然后逐级‘向上’传递

[ ] 当你使用事件捕获时，父级元素先触发，子级元素后触发
[ ] 当你使用事件冒泡时，子级元素先触发，父级元素后触发

冒泡和捕获事件可以用下图表示（图片来自脚本之家）
。

3.addEventListener的基本用法

在复杂的项目开发中，javascript和html的解耦变得至关重要，我们被推荐使用事件动态绑定的方式来处理按钮的事件。W3C为我们提供了==addEventListener(==)函数用来为指定的dom元素动态绑定事件
这个函数有三个参数：

type: 用来设置事件类型，例如click

listener: 用来设置监听事件的函数，及type类型的事件发生后执行的函数

useCapture 可选。布尔值，指定事件是否在捕获或冒泡阶段执行
可能值:
true - 事件句柄在捕获阶段执行
false- false- 默认。事件句柄在冒泡阶段执行

4.事件冒泡与事件捕获要是同时进行怎么办

在上述绑定事件的代码中，第三个参数不是全部设置的true，就是全部设置成false,那如果既有true，又有false，有的元素设置成按事件冒泡处理，有的元素设置成按事件捕获处理，那怎么办呢？
答案是，我们的浏览器更“喜爱”事件捕获：它会先把useCapture为false的元素绑定事件放到一边，按照事件捕获正常的顺序执行useCapture为true的元素绑定事件，最后在按照事件冒泡顺序执行useCapture为false。

5.阻止冒泡、捕获

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

在W3c中，使用stopPropagation（）方法
在IE下设置cancelBubble = true；
在捕获的过程中stopPropagation（）；后，后面的冒泡过程也不会发生了~

阻止事件的默认行为，
例如click 后的跳转~

在W3c中，使用preventDefault（）方法；
在IE下设置window.event.returnValue = false;

==attachEvent==——兼容：IE7、IE8；不兼容firefox、chrome、IE9、IE10、IE11、safari、opera

==addEventListener==——兼容：firefox、chrome、IE、safari、opera；不兼容IE7、IE8

6.addEventListener的使用方式：

1	target.addEventListener(type, listener, useCapture);

target：文档节点、document、window 或 XMLHttpRequest。
type：字符串，事件名称，不含“on”，比如“click”、“mouseover”、“keydown”等。
listener ：实现了 EventListener 接口或者是 JavaScript 中的函数。
useCapture ：是否使用捕捉，一般用 false 。例如：

1	document.getElementById("testText").addEventListener("keydown", function (event) { alert(event.keyCode); }, false);

在IE 7、8中使用

1	target.attachEvent(type, listener);

target：文档节点、document、window 或 XMLHttpRequest。
type：字符串，事件名称，含“on”，比如“onclick”、“onmouseover”、“onkeydown”等。

listener ：实现了 EventListener 接口或者是 JavaScript 中的函数。例如：

1	document.getElementById("txt").attachEvent("onclick",function(event){alert(event.keyCode);});

W3C 及 IE 同时支持移除指定的事件, 用途是移除设定的事件, 格式分别如下:

W3C格式:

1	removeEventListener(event,function,capture/bubble);

Windows IE的格式如下:

1	detachEvent(event,function);

阻止冒泡的兼容性写法

function stopBubble(event){
    var e=arguments.callee.caller.arguments[0]||event;
    if(e&&e.stopPropagation){
        e.stopPropagation()
    }else if(window.event){
        window.event.cancelBubble=true;
    }
}

阻止浏览器默认行为的兼容性写法

function stopDefault(event){
    var e=arguments.callee.caller.arguments[0]||event;
    //阻止默认浏览器动作(W3C)
    if(e&&e.preventDefault){
        e.preventDefault();
    }else{
        //IE中阻止函数默认动作的方式
        window.event.returnValue=false;      
    }
    return false;
}