关于JavaScript 三种绑定事件方式之间的区别以及对应的解绑（整理）

前言：最近整理电脑里的文档，当时写的比较乱，现在再看一遍有了更好的理解，随着jQuery和其他框架的大量应用，好多原生的基础的内容都记忆错乱了，整理电脑的机会也把以往的知识整理一下，自己以后可以看也可以给一些初学的在这些知识点上有混淆的人一些帮助。总结不准确的地方欢迎指出。

JavaScript三种绑定事件的方式（在绑定多个事件时才显示区别）：

1. //直接在DOM里绑定事件（执行前面一个）

<div id="btn" οnclick="clickone()" οnclick="clicktwo()"></div> 

<script>

function clickone(){ alert("hello"); } //执行这个

function clicktwo(){ alert("world!"); }

</script>

2.  //脚本里面绑定（只执行后面一个）

<div id="btn"></div>

<script>

document.getElementById("btn").onclick = function（）{ alert("hello"); }

document.getElementById("btn").onclick = function（）{ alert("world"); } //执行这个

</script>

3.//通过侦听事件处理相应的函数（按顺序执行）

<div id="btn"></div>

①addEventListener方法   兼容火狐谷歌,不兼容IE8及以下

<script>

document.getElementById("btn").addEventListener("click",clickone,false);//是否捕捉,一般都是false

function clickone(){ alert("hello"); } //先执行

document.getElementById("btn").addEventListener("click",clicktwo,false);//是否捕捉,一般都是false

function clicktwo(){ alert("world"); } //后执行

</script>

②attachEvent方法  只支持IE678,不兼容其他浏览器

<script>

document.getElementById("btn").attachEvent("onclick",clickone);

function clickone(){ alert("hello"); } //先执行

document.getElementById("btn").attachEvent("onclick",clicktwo);

function clicktwo(){ alert("world"); } //后执行

</script>

解决办法(兼容不同浏览器)：

var div=document.getElementsByTagName("div")[0];

       addEvent('click',div,fn)

       function addEvent(str,ele,fn){

         ele.attachEvent?ele.attachEvent('on'+str,fn):ele.addEventListener(str,fn);

       }

       function fn(){

         console.log("春雨绵绵");

       }

对应解绑：

①removeEventListener方法   兼容火狐谷歌,不兼容IE8及以下（addEventListener）

ele.removeEventListener("click",fn);

②detachEvent方法  只支持IE678,不兼容其他浏览器（attachEvent）

ele.detachEvent("onclick",fn);

解决办法(兼容不同浏览器)：

function remove(str,ele,fn){       

  ele.detachEvent?ele.detachEvent("on"+str,fn):ele.removeEventListener(str,fn);      

 }