目录
前言
JavaScript中有两种方法可以注册监听事件，一种是传统的注册方式，on+事件名称的注册方法，如btn.onclick,还有方法监听事件注册方式， addEventListener()和ie8以下的attachEvent()。
注册监听事件
传统方式
语法格式：元素名.on+事件名称 = function () {函数代码}
这种方法只能为元素注册一个事件，如果注册多个，那么就会覆盖。
这种方式比较简单，看一个案例
点击事件案例：判断闰年
我们写一个输入框和按钮，给按钮注册点击事件，在按钮点击的时候，判断输入框里面输入的值是否是闰年。
<input type="text" id="inp" />
<button id="nian">输入年份后点击判断</button>
var nian = document.getElementById("nian");
var inp = document.getElementById("inp");
nian.onclick = function () {
var a = inp.value;
if (a == null || a == 0) {
alert("没有输入年份！");
} else if (a <= 0) {
alert("输入年份有错误！");
} else if (a % 400 == 0 || (a % 4 == 0 && a % 100 != 0)) {
alert("输入年份为闰年！");
} else {
alert("输入年份不是闰年！");
}
};
方法监听事件注册方式
addEventListener()
我们使用addEventListener()来注册监听。它可以为一个事件源注册多个事件。
语法：
btn.addEventListener('click', function () {函数代码块}, false)
- 第一个参数：事件类型，如click
- 第二个参数：回调函数，事件发生后要运行的内容
- 第三个参数：布尔值，默认是false，决定是否支持冒泡
注意，在在标准浏览器浏览器下，addEventListener()是可用的。但是在ie8之下addEventListener()无法使用。这时候我们使用attachEvent()来注册监听事件。
attachEvent()
语法：
btn.attachEvent('onclick',function(){函数代码块},false)
参数是基本相同，注意attachEvent()的第一个参数，需要在事件前面加'on'。
addEventListener()与attachEvent()的兼容
在不同浏览器下，存在注册监听事件的兼容问题，我们可以写一个函数来解决这个问题,把函数封装起来方便随时调用，这样也可以加深两个方法的理解。
代码如下，我们给按钮注册点击事件。 注释有详解。
var btn = document.getElementById('btn')//获取按钮
function clicks(controls, events, buer) {//三个形参
if (controls.addEventListener) {//判断addEventListener是否可以使用
controls.addEventListener(events, function () {//添加监听事件
console.log('标准浏览器');//打印输出
}, buer)
} else {//判断不兼容addEventListener，所以使用attachEvent
controls.attachEvent('on' + events, function () {//注意不要忘了这个on
console.log('非标准浏览器');
}, buer)
}
}
clicks(btn, 'click', false)//调用与传参
移除监听事件
传统方法的移除
我们在使用 元素名.on+事件名称 = function () {函数代码}的方式注册监听事件的时候，只需要使用
元素名.on+事件名称 =null，就可以移除监听事件。
移除方法监听事件注册方式
removeEventListener（）
语法：元素名.removeEventListener('事件名称',函数)
内容分别是：移除哪个元素（事件源/元素名），通过什么方式触发（事件类型）的什么事件（事件回调）
removeEventListener()是常用的移除监听事件的方法。但在ie8以下，它是不可以使用的。所以我们使用detachEvent()来为ie8之下的浏览器清除监听事件。
btn.detachEvent（）
元素名.detachEvent('on+事件名称, 函数)
基本与removeEventListener（）相同，但注意事件名称前面加'on'
removeEventListener()与btn.detachEvent()的兼容
我们可以效仿addEventListener()与attachEvent()的兼容解决办法写一个函数。
如下：
function getEvent(element, eventName, callback) {
if (element.removeEventListener) {
//标准浏览器的注册监听
element.removeEventListener(eventName, callback)
} else {
//非标准浏览器的注册监听
element.detachEvent('on' + eventName, callback)
}
}
getEvent(btn,'click',fun)
案例：注册监听与移除事件的结合
我们写一个案例，来实现注册监听，和移除事件。
首先写两个案例，第一个按钮注册监听事件，如点击事件，点击一下就打印一串文字。为第二个按钮注册点击事件，第二个按钮点击后移除事件，使得第一个按钮点击后无法打印文字。
也要注意注册监听和移除事件的兼容，一并写入代码中。
代码如下：
var btn = document.getElementById('btn')
var btn1 = document.getElementById('btn1')
function fun() {//函数：打印一串文字
console.log('标准浏览器');
}
function fn() {//函数：打印一串文字
console.log('非标准浏览器');
}
function clicks(controls, events, buer) {//为按钮1注册点击事件的兼容
if (controls.addEventListener) {
controls.addEventListener(events, fun, buer)//调用之前的打印函数
console.log('添加了点击事件');
} else {
controls.attachEvent('on' + events, fn, buer)
console.log('添加了点击事件');
}
}
clicks(btn, 'click', false)//函数调用
btn1.onclick = function () {//为按钮2注册监听事件
function rem(controls,events, functionname) {//为按钮2注册移除事件的兼容
if (controls.removeEventListener) {
controls.removeEventListener(events, functionname)
} else {
controls.detachEvent('on' + events, functionname)
}
}
rem(btn, 'click', fun)//函数调用
console.log('现在清除了按钮1的点击事件');
}
