JavaScript事件处理程序
JavaScript事件处理程序
theme: channing-cyan
这是我参与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;
}
}
};腾讯云开发者
