Javascript事件绑定常见方案详解

开始

让js对用户的操作做出相应的响应，就要对事件进行绑定
DOM元素绑定事件处理function函数，不同的操作对应不同的函数名称

常见的三种绑定方式

（1）在DOM元素上直接绑定事件
（2）在js标签（实现分离）中绑定事件
（3）通过DOM lev3级事件绑定标准（事件监听）绑定事件

第一种绑定方式（DOM元素上直接绑定）

<button onclick="Mybtn()">单击</button>
<script>
	function Mybtn(){
		window.confirm("我返回给用户的响应");
 	}
</script>

分析总结：当用户点击按钮时，触发Mybtn函数，然后返回，非常简单，这种直接写入元素中的方法很早就有，隶属于DOM的lev0级标准，所以兼容性非常好，IE8以下几乎没有问题，并且在全局范围内执行，因此Mybtn()内部的this指向全局对象window，需要注意是，想要操作这个被点击的DOM元素，this它是无效的。

第二种绑定方式（js双标签中绑定事件/实现分离）

<button id="btn">单击</button>
	<script>
		document.getElementById('btn').onclick=function(){
			window.confirm("我返回给用户的响应，我是匿名函数");			
		}
</script>

分析总结：首先获取DOM元素，将.onclick作为方法，属性值作为函数（匿名函数），这种方法会让文档结构清晰易维护和管理，并且函数内部的this直接指向该DOM对象，如果使用函数来调用其他函数（回调函数），DOM元素.οnclick=function{函数1(),函数2()}，这时函数1/函数2的this就指向了window。
缺陷：只能绑定一个事件，绑定处理一个函数，绑定两个的话第一个会被覆盖。
注意：button标签必须放在script双标签之前，否则无效。

第三种绑定方式（lev3级事件绑定标准-事件监听）

<button id="Mybtn">单击</button>
<script>
	document.getElementById('Mybtn').addEventListener('click',fun);
		function fun(){
			alert("我返回给用户的响应");
		 }
</script>

IE8标准

语法：element.attachEvent(event, function)
event：事件，IE标准需要加on，如onload
function：函数，触发时执行的函数
注意：
（1）如果添加了多个事件处理函数, 按"添加时的先后顺序来执行"
（2）事件参数去掉事件名称的’on’(W3C标准)
（3）事件处理函数中的this指向DOM节点自身（W3C标准）

总结：

常规的事件绑定只能绑定最后绑定的事件，而事件监听可以绑定多个事件，并且可以解除绑定，还可以封装事件监听，需要注意的是，IE8以下需要使用element.attachEvent(event,function)进行事件监听的绑定。