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>

使用一个事件处理的属性似乎看起来非常的简单，如果你追求性能与用户体验，这很快就变得难以管理和效率低下

原因：

混用HTML JavaScript文档很难解析 ==》最好的方法是只在一块地方写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));
        });
    }

参考文献

事件介绍 - 学习 Web 开发 | MDN (mozilla.org)

JavaScript事件处理器（事件监听器）