事件绑定方式一【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
本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享； 2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关； 3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关； 4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除； 5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。