JavaScript事件处理器（事件监听器）
事件简介
事件是您在编程时，系统内部发生的事情或发生的动作
系统会在事件发生时产生某种信号，并且提供一个自动加载某种动作的机制
闹钟响了 ==》 事件
我睁开眼睛意识清醒 ==》响应机制
在web中 用户点击鼠标 敲击键盘 都是事件 ， 每一个可用的事件都有一个事件处理器，也称为事件监听器。 用来执行事件的响应机制。
常用的事件监听器
1. 事件处理器属性
const btn = document.querySelector('button');
btn.onclick = function() {
const rndCol = 'rgb(' + random(255) + ',' + random(255) + ',' + random(255) + ')';
document.body.style.backgroundColor = rndCol;
}复制代码这个onclick是被用在这个情境下的事件处理器的属性，就像button 其他的属性
2. 行内事件处理器 （请勿使用）
<button onclick="bgChange()">Press me</button>复制代码
function bgChange() {
const rndCol = 'rgb(' + random(255) + ',' + random(255) + ',' + random(255) + ')';
document.body.style.backgroundColor = rndCol;
}复制代码在Web上注册事件处理程序的最早方法是类似于上面所示的事件处理程序HTML属性(也称为内联事件处理程序)—属性值实际上是当事件发生时要运行的JavaScript代码。上面的例子中调用一个在``元素在同一个页面上，但也可以直接在属性内插入JavaScript，例如：
<button onclick="alert('Hello, this is my old-fashioned event handler!');">Press me</button>复制代码使用一个事件处理的属性似乎看起来非常的简单，如果你追求性能与用户体验，这很快就变得难以管理和效率低下
原因：
混用
HTMLJavaScript文档很难解析 ==》最好的方法是只在一块地方写JavaScript代码对批量的事件处理不友好 ，如果仅仅是一个按钮，无伤大雅，但100个 1000个按钮呢？ 使用JavaScript 可以给网页中的button都加上事件处理器
const buttons = document.querySelectorAll('button'); for (let i = 0; i < buttons.length; i++) { buttons[i].onclick = bgChange; }复制代码将编程逻辑与内容分离也会让你的站点对搜索引擎更加友好
3. addEventListener() 和removeEventListener()
新的事件触发机制被定义在Document Object Model (DOM) Level 2 Events Specification (w3.org)，这个事件处理属性是类似的，但是语法略有不同，我们可以重写以上的代码
const btn = document.querySelector('button');
function bgChange() {
const rndCol = 'rgb(' + random(255) + ',' + random(255) + ',' + random(255) + ')';
document.body.style.backgroundColor = rndCol;
}
btn.addEventListener('click', bgChange);复制代码在
addEventListener()中具体化了两个参数（事件类型 ， 匿名函数）btn.addEventListener('click', function() { var rndCol = 'rgb(' + random(255) + ',' + random(255) + ',' + random(255) + ')'; document.body.style.backgroundColor = rndCol; });复制代码同时相对于旧方式，此方式提供了一个优点，就是可以移除监听器
removeEventListener()btn.removeEventListener('click' , bgChange);复制代码大型 复杂的项目中非常有用！
myele.addEventListener('click' , A()); myele.addEventListener('click' , B()); // 一次触发 可以响应两个或多个事件 myele.click = A(); myele.click = B(); // 属性会覆盖复制代码高效的清楚不用的事件处理器
给一个监听器注册多个响应函数
我该用哪个？
前两种方式，相对于比较简单的用途，是可以相对互换的
首先不推荐使用行内事件处理器
如果项目比较小，并且需要有较高的跨浏览器兼容性，推荐使用事件处理程序属性
推荐
addEventListener() 和removeEventListener()对于同一类元素可以添加多个事件监听器，并且监听器在不用时可以移除
addEventListener实战场景举例
1. 监听鼠标滚轮实现表格横向滚动
// 鼠标绑定事件
scrollFunction () {
this.scrollDom = document.getElementById("center__left") // 通过id获取要设置的div
this.scrollDom.addEventListener("wheel", this.mouseScroll, false);
},
// 监听响应函数
mouseScroll(event) {
let detail = event.wheelDelta || event.detail // 适配浏览器
let moveForwardStep = -1 // 前滚
let moveBackStep = 1 // 后滚
let step = 0
step = detail > 0 ? moveForwardStep * 100 : moveBackStep * 100
this.scrollDom.scrollLeft = this.scrollDom.scrollLeft + step
},
// 卸载监听器
beforeDestroy(){
// 卸载监听器
if (!this.scrollDom) return
if (this.scrollDom.addEventListener) {
this.scrollDom.removeEventListener("wheel", this.mouseScroll, false)
}
}复制代码2. 监听浏览器刷新事件实现sessionStorage值不丢失
created() {
// 监听刷新事件
window.addEventListener("unload",()=>{
// 将state中的值存入session 并标记位list
sessionStorage.setItem("list" , JSON.stringify(this.$store.state.userData));
});
// 将list中的值取出 并且处理为对象格式
let data=JSON.parse(sessionStorage.getItem("list"));
// 将vuex中的值存入vuex中
this.$store.commit("resetState" , data);
},
// 清除前卸载
beforeDestroy() {
window.removeEventListener("unload", () => {
// 将state中的值存入session 并标记位list
sessionStorage.setItem("list", JSON.stringify(this.$store.state.userData));
});
}
作者：sword__song
链接：https://juejin.cn/post/7015855587372040206