事件委托有以下好处；
1、提升效率
2、阻止冒泡
3、动态添加的DOM元素也继承有该事件
- var _li= document.querySelectorAll(‘li’);
- for(var i=0;i<_li.length;i++){
- _li[i].onclick = function(){
- alert(this);
- };
- };
↑上面的代码，是我们正常情况下给多个元素绑定事件，利用for循环，但是假如元素有100个，1000个，10000个同样的元素…这样效率不是很低吗？
1
2
3
4
- var _t11 = document.querySelectorAll(‘.t1’);
- for(var i=0;i<_t11.length;i++){
- _t11[i].onclick = function(){
- alert(this.innerHTML);
- };
- };
↑再看上面的代码，我们给4个div分别添加了click事件，点击的时候，弹出自身的innerHTML，然后点击动态添加按钮追加一个div看看，会发现新追加的div没有任何点击事件…解决这个也很简单，可以把绑定事件的for循环重新走一遍，但是没必要，可以看下面的代码;
1
2
3
4
- document.querySelector(‘.test_click1’).onclick = function(ev){
- var e = ev || event;
- var _target = e.target || e.srcElement;
- if(_target.className == “t1”){
- alert(_target.innerHTML);
- };
- };
↑再试试上面的动态添加按钮看看。。是不是动态添加的div也有点击效果了。上面就是事件委托最基本的例子，通过事件源，即target，来判断className或者判断nodeName，然后做出对应的处理。并且只要绑定一次事件，效率提高。
还有最后一个事件冒泡没有说，把点击事件放到父层，或者更高一层，甚至body上，然后判断事件源，当然这个用的可能比较少，我们完全可以通过stopPropagation()。
你太棒了