原生JS如何绑定函数，事件处理程序,DOM0和DOM2的区别

1.HTML事件处理程序

就是以行间样式的形式写到HTML里面,相当于给元素加了一个行间属性，属性名是函数名，属性值是事件处理程序，属性值是可以执行的JavaScript代码，也可以将JavaScript代码写在页面引用的脚本中去。

        <div onclick = "alert('clickMe')">Joe</div>
        
        <div onclick="func">Joe</div>
        <script>
            function func(){
                alert('clickMe');
            }
        </script>

这样有两个缺点，

一，考虑到渲染顺序的问题，用户可能在页面加载完成之后，函数加载完成之前点击事件，这会引发错误。

二，不符 “结构” ,“ 样式”,“行为"相分离的原则，一旦需要更改事件处理程序，就要更改HTML，JS两个地方，这种 "耦合" 现象是程序员应该极力避免的,

2.DOM0级事件处理程序

在脚本中，给目标元素添加事件处理函数，这种方法简单，而且兼容性特好，时至今日还被极大部分浏览器所支持。

        var div = document.getElementsByTagName('div')[0];
        div.onclick = function(){
            alert('clickMe');
        }

接触绑定方式是通过覆盖函数的方式，而且这种方式也可以解除掉上面 ‘ HTML事件处理程序 ’ 方式的绑定。

        div.onclick = null;
        //解除绑定

这种方式也有缺点，就是一个DOM元素同种事件只能绑定一个处理函数。

3.DOM2级事件处理程序

这种方式是最新标准的事件处理程序表示方法，‘事件监听器’ : addEventListener(' type ',function,Bollean),第一个参数是事件的类型诸如鼠标事件，键盘事件，第二个是参数是事件处理程序，第三个参数是一个·布尔值，指定事件在事件流哪个阶段被执行，如果是false，那么事件在事件冒泡阶段被执行，而且由于事件捕获没有被大部分浏览器所实现，所以一般最后一个系数都是false。

        div.addEventListener('click',fun1,false);
        function fun1(){
            alert('a');
        }
        //为元素添加一个事件监听器

这种方式已经被极大部分浏览器所支持，只有IE以及更老的浏览器不兼容，能够实现一个元素绑定多个事件，解除方式只能用removeEventListener（' type ',function,Bollean），里面的参数必须与原来的参数保持一致，才能解除，有两个需要特别注意的问题

一，如果将函数写到方法里面那么就将无法，因为这相当于一个匿名函数，

        div.addEventListener('click',
            function(){
                alert('a')
            },
            false);
        //无法解除绑定

二，这种方法很耗费性能，因为浏览器要时刻监听用户是否触发事件，是主动监听，而不是被动触发。

4.IE事件处理函数，以及跨浏览器封装方法，

在IE浏览器有专门的方法来实现DOM2级事件处理程序，attachEvent('on'+type,func)，解除方式detach('on'+type,func)

        div.attachEvent(onclick,func);
        function func(){
            alert('a');
        }
        //绑定事件处理函数
        
        div.detachEvent(onclick,func);
        //解除绑定

此方法为IE独有，可以兼容所有IE浏览器，但是截止到19/12/17，MDN上面好像已经抛弃了，说生产环境已经抛弃了此方法。

自己可以封装一个全浏览器兼容的方法，很简单，利用对象检测就可以，第一个参数是DOM元素，第二个参数是事件类型，第三个参数是事件处理程序。

              function addEVent(ele,type,handler){
				 if(ele.addEventListener){ //兼容主流
					 ele.addEventListener(type,handler,false);
				 }else if(ele.attachEvent){ //兼容IE
					 ele.attachEvent('on'+type,handler);
				 }else{   //其他
					 ele['on'+type] = handler;
				 }
			 }

 

	DOM0		DOM2
添加方式	p.οnclick=function(){      console.log('p'); }		p.addEventListener('click',fun,false)
移除方式	p.onclick = null;		p.removeEventListener('click',fun,false)
是否绑定多个事件/处理程序	可以绑定多种类型事件，但是同一事件绑定多个处理程序会覆盖		可以绑定多种类型事件，同一事件可以绑定多个处理程序