原生JS如何绑定函数，事件处理程序
1.HTML事件处理程序
就是以行间样式的形式写到HTML里面,相当于给元素加了一个行间属性，属性名是函数名，属性值是事件处理程序，属性值是可以执行的JavaScript代码，也可以将事件处理程序写在页面引用的脚本中去。
Joe
Joe
这样有两个缺点，
一，考虑到渲染顺序的问题，用户可能在页面加载完成之后，函数加载完成之前点击事件，这会引发错误。
二，不符 “结构” ,“ 样式”,“行为"相分离的原则，一旦需要更改事件处理程序，就要更改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;
}
}