JavaScript之事件的绑定

使用对象.事件 = 函数的形式绑定响应函数，它只能同时为一个元素的一个事件绑定一个响应函数，不能绑定多个，如果绑定了多个，则后边会覆盖掉前边的。

而使用addEventListener()可以同时为一个元素的相同事件同时绑定多个响应函数，这样当事件被触发时，响应函数将会按照函数的绑定顺序执行

addEventListener()

通过这个方法也可以为元素绑定响应函数

参数：

事件的字符串，不要on

回调函数，当事件触发时该函数会被调用

是否在捕获阶段触发事件，需要一个布尔值，一般都传false

使用addEventListener()可以同时为一个元素的相同事件同时绑定多个响应函数，这样当事件被触发时，响应函数将会按照函数的绑定顺序执行

这个方法不支持IE8及以下的浏览器

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<script type="text/javascript">
			
			window.onload = function(){
				
				//获取按钮对象
				var btn01 = document.getElementById("btn01");

				btn01.addEventListener("click",function(){
					alert(1);
				},false);
				
				btn01.addEventListener("click",function(){
					alert(2);
				},false);
				
				btn01.addEventListener("click",function(){
					alert(3);
				},false);
				
			};

		</script>
	</head>
	<body>
		
		<button id="btn01">点我一下</button>
	</body>
</html>

attachEvent()

在IE8中可以使用attachEvent()来绑定事件

参数：

事件的字符串，要on

回调函数

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<script type="text/javascript">
			
			window.onload = function(){
				
				//获取按钮对象
				var btn01 = document.getElementById("btn01");

				btn01.attachEvent("onclick",function(){
					alert(1);
				});
				
				btn01.attachEvent("onclick",function(){
					alert(2);
				});
				
				btn01.attachEvent("onclick",function(){
					alert(3);
				});
			};

		</script>
	</head>
	<body>
		
		<button id="btn01">点我一下</button>
	</body>
</html>

解决绑定兼容问题

定义一个函数，用来为指定元素绑定响应函数

addEventListener()中的this，是绑定事件的对象
attachEvent()中的this，是window
需要统一两个方法this
bind()参数：
- obj 要绑定事件的对象
- eventStr 事件的字符串(不要on)
- callback 回调函数

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<script type="text/javascript">
			
			window.onload = function(){
				//获取按钮对象
				var btn01 = document.getElementById("btn01");
				
				bind(btn01 , "click" , function(){
					alert(this);
				});				
			};

			function bind(obj , eventStr , callback){
				if(obj.addEventListener){
					//大部分浏览器兼容的方式
					obj.addEventListener(eventStr , callback , false);
				}else{
					/*
					 * this是谁由调用方式决定
					 * callback.call(obj)
					 */
					//IE8及以下
					obj.attachEvent("on"+eventStr , function(){
						//在匿名函数中调用回调函数
						callback.call(obj);
					});
				}
			}
			
		</script>
	</head>
	<body>
		<button id="btn01">点我一下</button>
	</body>
</html>

Chrome

IE

事件的解绑

注册/移除事件的三种方式

1.
var box = document.getElementById('box');
box.onclick = function () {
  console.log('点击后执行');
};
box.onclick = null;

2.
box.addEventListener('click', eventCode, false);
box.removeEventListener('click', eventCode, false);

3.
box.attachEvent('onclick', eventCode);
box.detachEvent('onclick', eventCode);

function eventCode() {
  console.log('点击后执行');
}