js中，我们可以给一个dom对象添加监听事件，函数就是
- addEventListener("click",function(){},true);
很容易理解，第一个参数是事件类型，比如点击(click)、触摸(touchstart)，
第二个参数就是事件函数，
比如我给一个button添加alert函数。
window.onload=function(){
document.getElementById("hello").addEventListener("onkeydown",function () {
alert("hello");
});
}
那么第三个参数是什么呢？这个参数设计到事件的捕获与冒泡，为true时捕获，false时冒泡。
什么意思呢？
我举个简单的例子，我有两个div和一个button，button在div2里面，div2在div1里面。如下图所示
image
给button、div1、div2、都添加了click事件，分别alert button、div1、div2。
window.onload=function(){
document.getElementById("btn").addEventListener("click",function () {
// body...
alert("hello");
});
document.getElementById("div1").addEventListener("click",function(){
alert("div1");
});
document.getElementById("div2").addEventListener("click",function(){
alert("div2");
});
}
那么问题就来了，我点击button，也相当于点击了div1和div2，那么，谁先出现呢？
直观的讲，谁在上面，谁在下面。
所以，在js中就分为了两个处理方法，冒泡和捕获。
-
冒泡：从里面往外面触发事件，就是alert的顺序是 button、div2、div1。
-
捕获：从外面往里面触发事件，就是alert的顺序是div1、div2、button。
要想冒泡，就要将每个监听事件的第三个参数设置为false,也就是默认的值。
要想捕获，就要将每个监听事件的第三个参数设置为true。
好了，就讲这么多了。为了更好的理解冒泡和捕获，大家可以给三个事件的第三个参数随便设置，就是说不同时设置为true或false,
给button为true，div1为false等等，根据结果就能更好的理解这两个概念了。
网友评论