本文共 1218 字，大约阅读时间需要 4 分钟。

1、通过JavaScript对象属性来绑定

var btn = document.getElementById('oBtn');btn.onclick = function(){alert('xixi');}

但是这种方法的缺陷就是只能对一个元素的一个事件进行绑定，会出现覆盖的效果，只会执行最后面定义的。

2.通过HTML属性处理函数的绑定

example:

click  //1、click                       //2、

这种方法适合编写简短的小事件，不会涉及到太大的性能问题。

3利用所有文档元素的方法

这种方法有兼容性问题

（1）addEventListener(type,handler,boolean),兼容IE8以后的所有浏览器（2）attachEvent(type,handler),适用IE8以下的版本用法：oDiv1.addEventListener('click',function(){alert('div11');}，false);

事件的执行顺序与事件的注册顺序是一致的，false:发生在冒泡阶段 , true则发生在捕获阶段

    oDiv1.attachEvent('onclick',function(){alert('haha');});注销的方法分别是removeEvent()  and detach()

可以自己封装一个函数来做兼容：

//add~eventfunciton addEvent(elem,type,fn){if(elem.addEventListener)//judge {    elem.addEventListener(type,fn,false);//默认是冒泡 }else if(elem.attachEvent){    elem[type+fn] = function(){    fn.call(elem);    };   elem.attachEvent('on'+type,elem[type+fn]);}else{elem['on'+type] = fn;}//remove~ eventfunction removeEvent(elem,type,fn){if(elem.removeEventListener){elem.removeEventListener(type,fn,false);}else if{elem.detachEvent('on'+type,elem[type+fn]);}else{elem['on'+type] = fn;}}//call functionaddEvent(oBtn,'click',function(){alert(this.innerHTML);});removeEvent(oBtn,'click',,function(){alert(this.innerHTML);});

转载地址：https://blog.csdn.net/namechenfl/article/details/84257039 如侵犯您的版权，请留言回复原文章的地址，我们会给您删除此文章，给您带来不便请您谅解！