事件绑定和事件委托区别

 

事件绑定：顾名思义就是给页面上的元素绑定事件（处理程序），分为动态绑定和静态绑定。

静态绑定，也是最直接的事件绑定【通过事件属性，直接显示的给元素绑定事件，例如

<div onlick="myfunc()" onmouseover="myfunc2()" >
<script>
　　function myfunc(){}
　　function myfunc2(){} 
</script>
、、、、、、、
该方式缺点：当页面多元素都要添加事件时，定义繁琐。函数名称定义改变，一次要修改两个地方。

动态绑定：

<div id="mydiv">
<script>
　　var funcname1 = function(){}
　　mydiv.onclick = funcname1 //直接对dom元素的onclick属性赋值函数
　　mydiv.onclick = null //移除绑定事件
　　
　　《通过事件监听方式》
　　mydiv.addEventListener('click',funcname1); //注意这里除了直接传递一个函数，还可以传递一个callback除了传递一个函数之外，还可以传递一个属性带有 HandleEvent 方法【名字必须是 HandleEvent】的对象obj，
　　　　　　　　　　　　　　　　　　　　　　　　　　　　　系统会自动去调用这个HandleEvent 方法！！！
　　mydiv.removeEventListener('click', callback)
　　《移除事件监听》
</script>

关于事件监听的适配：因为IE 有自己的事件监听 【attachEvent()和detachEvent() 分别用于事件监听】 

 

     oBtn.attachEvent('onclick',funcname1); //IE 添加 监听

 

 

     oBtn.detachEvent('onclick',funcname1); ////IE 移除 监听

 

　　所以添加监听之前可以先判断一下 dom元素是否存在属性 attachEvent ，有就走 使用 attachEvent()添加监听逻辑，没有就 addEventListener（） 

 

 事件委托：顾名思义就是事件的处理不自己躬行，委托给他人帮忙处理。

 要了解实现委托，就必须先了解事件捕获和事件冒泡,别人网上有很多总结 【https://www.jianshu.com/p/c88c15c6074c，可以看看这篇，图文并茂，比较好理解】

事件委托应用场景： 如果一类元素数量多且都需要加上js事件时，通过循环一个一个的为每个元素单独添加js事件显然造成内存的浪费。这样的场景就适合用事件委托。

事件委托本质时事件冒泡的应用。

大致流程：为父元素添加事件，点击子元素是由于事件冒泡，添加的会传递的会向上传递到父元素，父元素捕获到事件就进行 源头判断【 ev.target 】

在进行相应处理就好了。

ex:

<ul id="parent">
    <li>c1</li>
    <li>c2</li>
    <li>c3</li>
</ul>

<script>
(function(){
   
    parent.addEventListener('click',func); //id属性 可以直接拿来用 
    function func(e){
        e = e || window.event;
        var src = e.target;
        if(src && src.nodeName.toLowerCase() === 'li'){ //判断事件发起的源头
            alert(src.innerHTML);
        }
    }
})();
</script>

事件委托优点：

减少冗余重复代码的书写，对于同一个父节点下面类似的子元素，可以通过委托给父元素的监听函数来处理每个子节点的事件。

 

不会因为元素的变动而改变事件的绑定

 

对dom元素的引用少了，有效避免内存泄露问题。