js事件冒泡，事件捕获，事件委托

1，事件冒泡，事件捕获

百度到的事件冒泡：当事件发生后，这个事件就要开始传播(从里到外或者从外向里)。为什么要传播呢？因为事件源本身（可能）并没有处理事件的能力，即处理事件的函数（方法）并未绑定在该事件源上。例如我们点击一个按钮时，就会产生一个click事件，但这个按钮本身可能不能处理这个事件，事件必须从这个按钮传播出去，从而到达能够处理这个事件的代码中（例如我们给按钮的onclick属性赋一个函数的名字，就是让这个函数去处理该按钮的click事件），或者按钮的父级绑定有事件函数，当该点击事件发生在按钮上，按钮本身并无处理事件函数，则传播到父级去处理。

理解：事件冒泡会从当前触发的事件目标一级一级往上传递，依次触发，直到document为止。

代码实践：

---

   

       

       

       

       

       

   

   

   

       

           

               

               

           

       

   

   

---

点击最里面的元素box3

点击box2

点击box1

可以发现当点击子元素时，click事件会向上冒泡，触发上一层父元素的click事件，直到document为止

在上面的列子中注册事件时是这样写的

        document.getElementById('box1').addEventListener("click",say1,false)

        document.getElementById('box2').addEventListener("click",say2,false)

        document.getElementById('box3').addEventListener("click",say3,false)

其中的false代表的就是事件冒泡，如果是true就是事件捕获，默认是false；假如修改成true会怎么样呢？

当点击最里面的元素控制台输出

所以冒泡机制是从里向外触发事件，捕获机制是从外向里触发事件

那么能阻止事件冒泡吗

---

在需要阻止的事件函数里加上

event.stopPropagation();

上面列子box3阻止冒泡修改say3函数

function say3(event){

            console.log(3)

            event.stopPropagation();

        }

---

结果点击box3时控制台只输出3

另外ie中事件对象是window.event，所以写法有所区别

2，事件委托

事件委托又称之为事件代理，简单来说就是利用事件冒泡，通过监听一个父元素，来给不同的子元素绑定事件。

假如有一个ul元素里面有许多li元素，我们就可以通过给ul元素绑定事件从而达到给每个li元素绑定事件的目的

html:

           

• 1

           

• 2

           

• 3

           

• 4

           

• 5

           

• 6

           

• 7

           

• 8

           

• 9

       

js:

document.getElementById('my_ul').addEventListener('click',function(event){

            console.log(event.target.innerText)

        })

当我们点击li元素时就会触发my_ul中的click事件，同时控制台就输出了对应得li里面得数字