JavaScript事件处理程序事件处理程序事件就是用户或者浏览器执行的某种操作。我们常用的点击，滚动视口，鼠标滑动都

这是我参与8月更文挑战的第26天，活动详情查看：8月更文挑战

事件处理程序

事件就是用户或者浏览器执行的某种操作。我们常用的点击，滚动视口，鼠标滑动都是事件，为响应事件而调用的函数被称为事件处理程序，在js中事件处理程序的名字以 on 开头。

html事件处理

我们都知道js代码也可以写在html元素标签内部。我们写一个小栗子。

 <button onclick="alert('jackson')">点击显示我的名字</button> //jackson

这样点击button的时候就会弹警告框显示我的名字，这里要注意的是我们定义onclick的时候我们用的符合是双引号""，输出那里用的是单引号，如果都用双引号的话会报错，如果非要用双引号的话可以用转义字符或者&来代表引号。

当前js也可以写到script标签内，我们改造一下刚刚的代码。

 <button id="btn"   onclick="sayName('jackson')">点击显示我的名字</button>
<script>
   function sayName(name) {
       alert(name) //jackson
   }
</script>

这样的话也可以实现刚刚的代码，我们用传参的方式来输出名称，这样sayName方法还可以稍稍复用。这样的书写方法也比较常用，因为如果逻辑很多的话会导致html页面的代码可读性不强。

DOM事件处理

DOM2规范为事件处理程序定义了俩个方法，一个是赋值addEvenTListener()一个是移除removeEventListener()。这俩个方法接受三个参数，事件名、事件处理函数、布尔值。布尔值true表示在捕获阶段执行，false(默认)表示冒泡阶段执行。

不了解捕获和冒泡的可以先看一下JavaScript事件流 (juejin.cn)

我们再改造一下刚刚的例子。

<button id="btn" >点击显示我的名字</button>
let btn = document.getElementById('btn');
btn.addEventListener('click',function() {
    alert('jackson') //jackson
})

这样写是不是看起来比较高大上一点了。要注意的是这样添加的方法只能通过配套的removeEventListener方法来移除。上面我们写的是移除不了的，因为第二参数是匿名函数。我们需要包装一下。

let btn = document.getElementById('btn');
let sayName = function() {
    alert('jackson')
}
btn.addEventListener('click',sayName,false);

// 移除
btn.removeEventListener('click',sayName,false);
btn.sayName; //不显示

有点绕哈，一般我们用这个都是想做一些拦截操作，比如在捕获阶段拦截一下，添加其他操作或者方法。

ie事件处理

ie浏览器也弄了一个类似我们刚刚DOM2规范的方法，attachEvent()和detachEvent()，注意这俩个方法接收俩个参数，它不支持捕获操作，所以只接收事件处理名称和函数。

let btn = document.getElementById('btn');
btn.attachEvent("onclick",function(){
    alert('jackson');
})

注意我们之前用的是click这里要变成onclick。ie就是这么有趣。

如果要做兼容的话大家可以封装一个通用方法。我就直接写下面了，定义了函数JacksonEventUtil，调用其中add，remove方法就可以了。

var JacksonEventUtil = {
        add: function (element, type, handler) {
            if (element.addEventListener) {
                element.addEventListener(type, handler, false);
            } else if (element.attachEvent) {
                element.attachEvent("on" + type, handler);
            } else {
                element["on" + type] = handler;
            }
        },
        remove: function (element, type, handler) {
            if (element.removeEventListener) {
                element.removeEventListener(type, handler, false);
            } else if (element.detachEvent) {
                element.detachEvent("on" + type, handler);
            } else {
                element["on" + type] = null;
            }
        }
    };