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)