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的点击事件');
        }