addEventListener（type, fn , true/false）绑定事件第三个参数作用以及利用事件的冒泡，实现事件委托

（一）：

第一个参数type，事件的类型，如click，mouseover等；

fn，事件监听执行的function；

第三参数，决定事件执行的过程（大概这样解释。。），捕获或者冒泡，首先我们看一张图片：

这里写图片描述

由图片我们可以看到，事件是先捕获再冒泡的，而第三个参数就决定了是先捕获还是先冒泡，如果是true就是捕获，反正则是冒泡，我们可以看个例子：

html：

<ul id="ul">
    <li>1111</li>
    <li>2222</li>
    <li>3333</li>
    <li>4444</li>
</ul>

javascript：

 var ul = document.querySelector('#ul');
 ul.addEventListener('click' ,function () {
     alert('ul')
 },false);

 var li = document.querySelector('#ul > li');
 li.addEventListener('click' ,function () {
     alert('li')
 },true)

上面的例子中，把 li 事件监听的执行过程是捕获，而捕获先于冒泡执行，所以是先alert（‘’li“）再
alert（‘’ul“）, 但是如果我们这样改一下：

var ul = document.querySelector('#ul');
ul.addEventListener('click' ,function () {
     alert('ul')
 },true);

var li = document.querySelector('#ul > li');
li.addEventListener('click' ,function () {
    alert('li')
},true)

那么结果就是先alert（‘’ul“）再alert（‘’li“）了。

（二）：

还是上面那个例子如果我们想要实现点 li 绑定事件，例如点击改变背景，正常情况下我们可能是这样写代码：

var li = document.querySelectorAll('#ul > li') ;
for ( var i = 0 ; i < li.length ; i++ ){
     li[i].index = i;
     li[i].onclick = function () {
         this.style.background = 'red';
     }
 }

当然这样也是没有什么问题的，但是如果 li 非常多，那么利用事件冒泡就会方便很多，实现方法就是在 li 的父元素上绑定事件：

 var ul = document.querySelector('#ul');
 ul.addEventListener('click' ,function (e) {

      var ev = e || event ;
      var li = ev.target;
      li.style.background = 'blue';
      console.log(ev.currentTarget);//事件监听的对象，ul
 },false);

类似与jquery的事件委托：

$('#ul').on('click' , 'li' , function(){

    $(this).css('background' , 'blue');
})

来源：CSDN

作者：Slice-dudu

链接：https://blog.csdn.net/qq_34626003/article/details/71079449

标签

alert