绑定事件

在 JS 中，绑定事件是指将特定的函数或代码与某个事件相关联，以便在事件发生时执行该函数或代码。

绑定事件

// 方法一
// 这种方法不能为一个元素绑定多个事件，否则后面的会把前面的覆盖
document.getElementById("btn").onclick = function(){
	console.log("我是绑定的事件！");
}

// 方法二：addEventListener("事件类型(没有on)",事件处理函数,false/true(控制事件的传播方式));
// 可以为同一个元素绑定多个事件（点击时，这几个事件都会执行，谷歌、火狐、IE11 支持，IE8 不支持）
document.getElementById("btn").addEventListener("click",function () {
	console.log("锄禾日当午");
},false); // false 代表事件阶段从里向外（冒泡阶段），true 代表事件阶段从外向里（捕获阶段）
document.getElementById("btn").addEventListener("click",function () {
	console.log("汗滴禾下土");
},false); // false 代表事件阶段从里向外（冒泡阶段），true 代表事件阶段从外向里（捕获阶段）
document.getElementById("btn").addEventListener("click",function () {
	console.log("谁知盘中餐");
},false); // false 代表事件阶段从里向外（冒泡阶段），true 代表事件阶段从外向里（捕获阶段）
document.getElementById("btn").addEventListener("click",function () {
	console.log("粒粒皆辛苦");
},false); // false 代表事件阶段从里向外（冒泡阶段），true 代表事件阶段从外向里（捕获阶段）

// 方法三：attachEvent("事件类型(有on)",事件处理函数);	
// 可以为同一个元素绑定多个事件（谷歌不支持，火狐不支持，IE8 支持）
document.getElementById("btn").attachEvent("onclick",function () {
	console.log("春种一粒粟");
});
document.getElementById("btn").attachEvent("onclick",function () {
	console.log("秋收万颗子");
});
document.getElementById("btn").attachEvent("onclick",function () {
	console.log("四海无闲田");
});
document.getElementById("btn").attachEvent("onclick",function () {
	console.log("农夫犹饿死");
});

// 因为不同浏览器支持绑定事件的方法不同，所以这里定义一个通用的绑定事件的函数
// 谷歌、火狐、IE11、IE8 都支持
function addEvent(element,type,fn) {
	// 判断浏览器是否支持这个方法（校验有没有方法时，后面不需要加括号）
	if(element.addEventListener){
		element.addEventListener(type,fn,false);
	}else if(element.attachEvent){
		element.attachEvent("on"+type,fn);
	}else{
		element["on"+type] = fn;
	}
}

// 使用自定义的函数添加事件
addEvent(document.getElementById("btn"),"click",function () {
	console.log("娃哈哈");
});
addEvent(document.getElementById("btn"),"click",function () {
	console.log("营养快线");
});
addEvent(document.getElementById("btn"),"click",function () {
	console.log("旺仔牛奶");
});

// 为同一个元素绑定多个不同的事件，指向相同的事件处理函数
document.getElementById("btn").onclick = f1;
document.getElementById("btn").onmouseover = f1;
document.getElementById("btn").onmouseout = f1;
// e.type可以获取到绑定的事件类型（没有 on）
function f1(e) {
	switch (e.type) {
		case "click":
			alert("我是点击事件");
			break;
		case "mouseover":
			this.style.backgroundColor = "red";
			break;
		case "mouseout":
			this.style.backgroundColor = "green";
			break;
	}
}

绑定方式的区别

addEventListener 和 attachEvent 的区别：

方法名不一样。
参数个数不一样，addEventListener 三个参数，attachEvent 两个参数。
addEventListener：谷歌、火狐、IE11 支持，IE8 不支持。

attachEvent：谷歌、火狐、IE11不支持，IE8 支持。
this 不同：
addEventListener 中的 this 是当前绑定事件的对象。

attachEvent 中的 this 是 window 。
addEventListener 中事件的类型（事件的名字）没有 on，attachEvent 中的事件的类型（事件的名字）有 on 。

事件阶段

addEventListener("事件类型(没有on)",事件处理函数,false/true(控制事件阶段的)) 有 3 参数，其中第 3 个参数是控制事件阶段的。

事件传播有 3 个阶段，分别是捕获阶段、目标阶段和冒泡阶段。

在 DOM 树结构中，事件从根节点开始传播，首先进入捕获阶段，从根节点向下逐层检查是否有元素绑定了该事件，然后进入目标阶段，即事件被触发的那个元素上执行事件处理函数，最后进入冒泡阶段，从触发元素开始向上逐层冒泡，直到根节点。

当第 3 个参数值为 true 时，事件的传播顺序将会从上往下，即从根节点开始，经过捕获阶段到达目标元素；而当参数值为 false 时，事件的传播顺序将会从下往上，即从目标元素开始，经过冒泡阶段到达根节点。

通过 e.eventPhase 这个属性可以知道当前的事件是什么阶段：

事件捕获阶段，e.eventPhase 值等于1 : 从外向内。
事件目标阶段，e.eventPhase 值等于2 : 最开始点击的那个。
事件冒泡阶段，e.eventPhase 值等于3 : 从里向外。

需要注意的是，对于同一个元素上绑定的多个事件处理函数，它们的执行顺序并不一定是按照添加的顺序执行的，具体的执行顺序与浏览器的实现相关。

Bjb Code

绑定事件

绑定事件

绑定方式的区别

事件阶段