[快速入门前端 66] JavaScript：事件 (2) Event 和事件解绑

event 是什么

在这边这个 event 指的不是事件本身，而是 event listener 的一个「Event Object」，里面会有所有关于这个事件的属性，并以参数的形式传给我们的 function (Event Handler)。
event 是 function 的第一个参数，通常命名为 event 或 e，写为 元素.addEventListener.(’事件’, function(event) {});，在触发事件时，event 会储存触发该事件的元素资料，例如滑鼠是点击哪个元素触发该事件、元素属性和位置等等，这些资讯可以帮助我们进行后续的行为和 Boolean 判断。

範例：

<div style="background-color: lightgoldenrodyellow;">    <button id="button">点选</button></div><script>  var button = document.getElementById('button');  button.addEventListener('click', function(e){    console.log('点按钮');    console.log(e);  });</script>

从图片中我们可以看到在 event 中储存了很多关于该事件的资讯，下面就让我们来介绍常用的几种：

type：事件名称target：触发事件的元素bubbles：事件是否是在「冒泡」阶段触发 (true / false)clientX / clientY：事件触发时滑鼠在页面可视範围的座标位置pageX / pageY：事件触发时滑鼠在整个网页的座标位置

事件解绑

当我们的事件在某些状况不需要被触发或需要被取消时，就可能会需要用到事件解绑，意思就是将监听事件的功能移除掉。
针对不同的绑定方式，解绑的方式也不同：

on-event 解绑：元素.on事件名 = null;

let button = document.getElementById('button');button.onclick = function() {  console.log('点我');}// 解绑button.onclick = false; // 方法一button.onclick = null ; // 方法二

eventListener 解绑：元素.removeEventListener('事件', Function name);

let button = document.getElementById('button');button.addEventListener('click', clickBtn); // 绑定button.removeEventListener('click', clickBtn);function clickBtn() {  console.log('click');}

---

上一篇：[快速入门前端 65] JavaScript：事件 (1) 事件和绑定方法
系列文章列表：[快速入门前端] 系列文章索引列表