js事件的三种绑定方式
作者：互联网
事件绑定方式一【HTML事件处理程序】
HTML事件处理程序：
将事件直接内嵌内HTML结构标签元素内的 【不推荐用，因为不灵活】
例：
<input type="button" onclick="alert('我是事件绑定方式一：HTML事件处理程序，我是内嵌在HTML结构中的');" value="事件绑定方式一【内嵌】" />
或
<input type="button" onclick="mupiaoFn()" value="事件绑定方式一【调用】" />
/*------事件绑定方式一：HTML事件处理程序------*/
function mupiaoFn() {
alert("我是事件绑定方式一：HTML事件处理程序")
}
事件绑定方式二【DOM 0级事件处理程序】
DOM 0级事件处理程序：
把一个函数/方法赋给一个事件处理程的属性如：id 、class 、元素名等
【用得最多，兼容性好，简单，灵活，跨浏览器 ；缺点：不能绑定多个同类型事件】
例：
<input type="button" name="eventBtn2" id="eventBtn2" value="事件绑定方式二【通用属性绑定】" />
/*------事件绑定方式二：DOM 0级事件处理程序------*/
var Btn2 = document.getElementById("eventBtn2");//给谁绑定事件，就要先获取谁
绑定事件1:【赋给方式】
Btn2.onclick = function() {
alert("我是事件绑定方式二：DOM 0级事件处理程序")
}
或
绑定事件2：【调用方式】
function publick() {
alert("我也是事件绑定方式二：DOM 0级事件处理程序")
}
Btn2.onclick = publick //注：publick后面不要加()括号，否则会变为立即执行函数！
删除事件：
Btn2.onclick = null
注：
在DOM0级事件处理程序推出之后，被广为使用，可是出现了这样一个问题，当我们希望给同一个元素/标签绑定多个同类型事件的时候（如，为上面的按扭标签绑定2个或是个以上的点击事件），是不被允许的。那么，此时，出现了另一种事件处理程序，就是DOM2级的事件处理程序，【注：没有DOM1级事件这个概念哦】在DOM2级当中，定义了两个基本方法，
用于处理指定（即绑定）和删除事件处理程序的操作，分别是addEventListener()和removeEventListener()，IE9+、FireFox、Safari、Chrome和Opera都是支持DOM2级事件处理程序的。
对于IE8-，则使用的是IE专有的事件处理程序：两个类似的方法——attachEvent()与detachEvent()。
事件绑定方式三【DOM 2级事件处理程序 / 监听事件】
DOM 2级事件处理程序 / 监听事件：
addEventListener()和removeEventListener()监听事件接收3个参数：事件类型(注：不要加 on,引号包裹), 处理函数 , 是否使用捕获阶段 （false:冒泡（默认）/true:捕获）
IE中：attachEvent()和detachEvent()监听事件接收2个参数：事件类型(注：要加 on), 处理函数(只支持冒泡)
例：
<input type="button" name="eventBtn3" id="eventBtn3" value="事件绑定方式三" />
/*------事件绑定方式三【DOM 2级事件处理程序 / 监听事件】------*/
var Btn3 = document.getElementById("eventBtn3")//给谁绑定事件，就要先获取谁
添加监听事件1：【内嵌方式】
Btn3.addEventListener('click' , function(){
alert("我是事件绑定方式三：DOM 2级事件处理程序")
} , false) //false:冒泡，true:捕获
添加监听事件2：【调用方式】addEventListener
Btn3.addEventListener('click' , addevFn , false)
function addevFn() {
alert("我是事件绑定方式三：DOM 2级事件处理程序 【调用方式】")
}
添加不同的监听事件：鼠标移入事件【调用方式】
Btn3.addEventListener('mouseover' , addevFn2 , false)
function addevFn2() {
alert(this.value)
}
删除监听事件:removeEventListener
注：删除时事件类型名、事件函数名要一一对应哦（就是和添加事件时的参数一样）
Btn3.removeEventListener("mouseover" , addevFn2, false)
IE8及以下的添加和删除监听事件方法：（注：IE9及以上的就用上面的方法啦）
IE8及以下的添加监听事件1：【内嵌方式】
注: attachEvent 和 detachEvent方法只传两个参数，前面两个和上面一样，而第3个参数是因为在IE中默认就是冒泡方式，所以不用传第3个参数
Btn3.attachEvent("onclick" , function(){
alert("我是IE8及以下的添加监听事件方法，【内嵌方式】")
})
IE8及以下的添加监听事件2：【调用方式】
注：attachEvent 和 detachEvent 事件类型前而一定要加 on 才可以
Btn3.attachEvent("onclick" , addevFn3)
function addevFn3() {
alert("我是IE8及以下的添加监听事件方法，【调用方式】")
}
IE8及以下的删除监听事件
Btn3.detachEvent("onclick" , addevFn3);
原文链接：https://blog.csdn.net/muguli2008/article/details/52750837
标签：方式,DOM,绑定,js,处理程序,事件,三种,监听 来源： https://www.cnblogs.com/yyshow/p/16294351.html