事件绑定：顾名思义就是给页面上的元素绑定事件（处理程序），分为动态绑定和静态绑定。
静态绑定，也是最直接的事件绑定【通过事件属性，直接显示的给元素绑定事件，例如
<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元素的引用少了，有效避免内存泄露问题。