DOM事件绑定机制

DOM事件绑定分以下三种：

1、html事件处理程序绑定：

<div class="parent" onclick="alert=myfun()"></div>
<script>
    function myfun(){
      alert('点击');
    }
</script>

优点：绑定目标元素定位准确；
缺点：1）代码耦合 2）事件处理程序声明的位置问题。

2、DOM0级事件绑定：

<div class="parent" id="parent"></div>
<script>
   //获取需要绑定事件的dom节点
   var parent=document.getElementById('parent');
   //给当前dom节点绑定事件
   parent.onclick=function(){
     console.log('点击了parent');
   }
</script>

  事件解绑：

dom.onclick = null

 缺点：重新绑定事件时，之前的绑定事件被覆盖。

3、DOM2级事件绑定：

<div class="box">
     点击我
</div>
<script>
//1获取绑定事件的dom节点
var dom=document.getElementsByTagName('div')[0];
//2绑定dom二级事件  myfun是具名函数
var myfun=function(){
   console.log(xixi);
}
dom.addEventListener('click',myfun);
//匿名函数如下
dom.addEventListener('click',function() {
   console.log(he);
})
</script>

事件解绑：

//解绑事件   事件解绑只能解绑具名函数，匿名函数无法解绑
dom.removeEventListener('click',myfun);

优点：可以在不影响之前绑定的事件基础上，再绑定其他事件；
缺点：IE8及以下浏览器不支持。