JS事件代理的理解

事件代理的原理？

事件委托是利用事件的冒泡原理来实现的，何为事件冒泡呢？就是事件从最深的节点开始，然后逐步向上传播事件，举个例子：页面上有这么一个节点树，div>ul>li>a;比如给最里面的a加一个click点击事件，那么这个事件就会一层一层的往外执行，执行顺序a>li>ul>div，有这样一个机制，那么我们给最外面的div加点击事件，那么里面的ul，li，a做点击事件的时候，都会冒泡到最外层的div上，所以都会触发，这就是事件代理，委托它们父级代为执行事件。

为什么要用事件代理？

由于过多的操作DOM元素会对页面整体的运行性能产生影响，因此我们更倾向于在子元素数量较大时，将事件绑定在其父元素上，进行一个事件代理，再判定操作的对象来进行相应的DOM操作
举一个例子

    
box1
    
box2
    
box3
  
  add

function $(selector){
  return document.querySelector(selector)
}
function $$(selector){
  return document.querySelectorAll(selector)
}

$$('.box').forEach(function(node){   // 遍历
  node.onclick = function(){
    console.log(this.innerText) // 控制台输出相应的HTML内容
  }
 })
var i = 4
$('#add').onclick = function(){             //当点击add时在最后一个div后面添加新的类为box的div
  var box = document.createElement('div')
  box.classList.add('box')
  box.innerText = 'box' + (i++)
  $('.container').appendChild(box)
}

当我们想让box被点击时进行操作，forEach遍历了每一个class为box的元素，显然当有100个box元素时，就要绑定100从onclick事件，这相当不好~！并且，当我们添加了新的box元素之后，由于querySelector选择的是静态的数组，因此新的box元素并不会绑定上onclick事件，结果如下图

222.PNG

因此我们更倾向于下面这种方式

function $(selector){
  return document.querySelector(selector)
}
function $$(selector){
  return document.querySelectorAll(selector)
}
$('.container').onclick = function(e){   //在父元素container上绑定onclick事件
   if(e.target.classList.contains('box')){
    console.log(e.target.innerText)
  }
}

var i = 4
$('#add').onclick = function(){
  var box = document.createElement('div')
  box.classList.add('box')
  box.innerText = 'box' + (i++)
  $('.container').appendChild(box)
}

上面代码中我们只绑定了一次onclick事件，接下来子元素box是否按照相应的操作则靠一个if函数来判断，当当前点击的元素的类包含box时，则控制台输出，与此同时，我们发现，新添加的box元素也能参与其中，如图

111.PNG