js 事件绑定的几种方法

js 事件绑定

js中事件的绑定主要分为DOM 0 和DOM 2 中的方法

DOM0的事件绑定

直接在dom对象上绑定事件。列如：div.nclick =function(){}; 特点： 一个DOM对象只能注册一个同类型的函数，因为注册多个同类型的函数的话，就会发生覆盖，之前注册的函数就会无效。 适用所有的浏览器

<button>点击</button> <script type="text/javascript"> var btn = document.getElementsByTagName("button")[0]; btn.onclick= function(){ console.log("你好") } btn.onclick= function(){ console.log("你好！！") } </script>

使用btn.onclick = null去清除删除事件处理程序。

DOM2的事件绑定

使用addEventListene来注册事件

<button>点击</button> <script type="text/javascript"> var btn = document.getElementsByTagName("button")[0]; btn.addEventListener("click".dome) function dome (){ console.log("你好！！") } </script>

使用btn.removeEventListener(‘click, handleClick, false’)来消除事件。移除事件必须使用外部函数（匿名函数不可消除)。

btn.removeEventListener("click",dome)

在DOM 2中 一个dom对象可以注册多个相同类型的事件，不会发生事件的覆盖，会依次的执行各个事件函数。 当一个元素绑定了一个点击事件，调用了两次函数，那么事件处理程序会以添加它们的相同的顺序被触发。

`<button>点击</button> <script type="text/javascript"> var btn = document.getElementsByTagName("button")[0]; btn.addEventListener("click",dome) function dome (){ console.log("你好") } btn.addEventListener("click",dome1) function dome1 (){ console.log("你好！！") } </script>

支持事件流的捕获和冒泡，通过addEventListener(‘事件名称’,‘事件回调’,‘捕获/冒泡’)第三个参数的设置（默认false即冒泡），制定事件触发是在捕获过程还是冒泡过程。

<div id=""> <button>点击</button> </div> <script type="text/javascript"> var div = document.getElementsByTagName("div")[0]; var btn = document.getElementsByTagName("button")[0]; div.addEventListener("click",fundiv) btn.addEventListener("click",funbtn) function fundiv (){ console.log("DIV") } function funbtn (){ console.log("btn") } </script>

一般情况下冒泡是由目标元素向执行的但是在div注册事件的时候加上第三个参数并且值为 true 那么会放div的事件在捕获阶段执行

div.addEventListener("click",fundiv, true )

IE10以下中使用attachEvent 来实现IE11是支持addEventListener的 由于在IE中没有捕获阶段所以attachEvent()只能执行在冒泡阶段 事件名称前需要加on。 当一个元素绑定了一个点击事件，调用了两次函数，那么事件处理程序会以添加它们的相反的顺序被触发。

<button>点击</button> <script type="text/javascript"> var btn = document.getElementsByTagName("button")[0]; btn.attachEvent("onclick",dome) function dome (){ console.log("你好") } btn.attachEvent("onclick",dome1) function dome1 (){ console.log("你好！！") } </script>

可以使用btn.detachEvent(‘onclick’, handleClick)来实现事件消除。

btn.detachEvent("onclick",dome1)