事件被看作是 JavaScript 与网页之间交互的桥梁，当事件发生时，可以通过 JavaScript 代码(函数)执行相关的操作。例如，用户可以通过鼠标拖曳登录框，改变登录框的显示位置；或者在阅读文章时，选中文本后自动弹出分享、复制选项。本章将对 DOM 中的事件进行详细讲解。

事件处理

事件可被理解为是 JavaScript 侦测到的行为，这些行为指的就是页面的加载、鼠标单击页面、鼠标滑过某个区域、按下键盘等具体的动作，它对实现网页的交互效果起着重要的作用。在深入学习事件时，需要对一些非常基本又相当重要的概念有一定的了解。

• 事件处理程序

事件处理程序指的就是 JavaScript 为响用户行为所执行的程序代码。例如，用户单击 button 按钮时，这个行为就会被 JavaScript 中的click 事件侦测到；然后让其自动执行，为 click 事件编写的程序代码，如在控制台输出“按钮被单击了”。

• 事件驱动

事件驱动是指，在 Web 页面中 JavaScript 的事件，侦测到的用户行为（如鼠标单击、鼠标移入等），并执行相应的事件处理程序的过程。

事件绑定

事件绑定指的是为某个元素对象的事件绑定事件处理程序。在 DOM 中提供了3种事件的绑定方式。下面将针对以3种事件绑定方式的语法以及各自的区别进行详细讲解。

行内绑定方式

事件的行内绑定式是通过HTML标签的属性设置实现的，具体语法格式如下。

<div onclick="alert('handle click')"></div>

在上述语法中，div 可以是任意的HTML标签，如 <button>、<input>标签等；事件是由 on 和事件名称组成的一个 HTML 属性，如单击事件对应的属性名为 onclick；事件的处理程序指的是 JavaScript 代码，如匿名函数等。

需要注意的是，由于开发中提倡 JavaScript 代码与 HTML 代码相分离。因此，不建议使用行内绑定事件。

动态绑定方式

动态的绑定方式很好地解决了JavaScript代码与HTML代码混合编写的问题。在JavaScript代码中，为需要事件处理的 DOM 元素对象，添加事件与事件处理程序。具体语法格式如下。

div.onclick = function handleClick () {
  console.log('handle click');
};

在上述语法中，事件的处理程序一般都是匿名函数或有名的函数。在实际开发中，相对于行内绑定来说，事件的动态绑定的使用居多。

行内绑定与动态绑定除了实现的语法不同以外，本质是相同的，都是给 DOM 元素绑定了一个 onclick 属性。

标准的绑定事件方式

为了给同一个 DOM 对象的同一个事件添加多个事件处理程序，DOM中引入了事件流的概念，可以让DOM对象通过事件监听的方式实现事件的绑定。由于不同浏览器采用的事件流实现方式不同，事件监听的实现存在兼容性问题。通常根据浏览器的内核可以划分为两大类，一类是早期版本的IE浏览器（如IE6～8），一类遵循W3C标准的浏览器（以下简称标准浏览器）。

接下来，将根据不同类型的浏览器，分别介绍事件监听的实现方式。

（1）早期版本的IE浏览器

在早期版本的IE浏览器中，事件监听的语法格式如下。

DOM对象.attachEvent(type，callback);

在上述语法中，参数 type 指的是为 DOM 对象绑定的事件类型，它是由 on 与事件名称组成的，如 onclick。。参数 callback 表示事件的处理程序。

（2）标准浏览器

标准浏览器包括IE8版本以上的IE浏览器（如IE9～11），新版的Firefox、Chrome等浏览器。具体语法格式如下。通过这种方式我们可以给元素注册多个事件处理函数，而 btn.onclick = fn 是赋值操作只能设置一个事件处理函数。

DOM对象.addEventListener(type, callback, [capture]);

在上述语法中，参数 type 指的是 DOM 对象绑定的事件类型，它是由事件名称设置的，如 click。参数 callback 表示事件的处理程序。参数 capture 默认值为 false，这个属性后面单独介绍，一般情况我们都使用它的默认值。

现在 IE 浏览器已经被淘汰，所以我们不需要再去记忆 attachEvent() 的用法，但是我们需要了解过去，过去在使用这种方式注册事件的时候需要处理浏览器的兼容性，下面我们演示下：

function addEventListener(element, type, listener) {
  // 能力检测: 就是要看当前的浏览器是否支持此标签对象的属性或是方法
  if (element.addEventListener) {
    element.addEventListener(type, listener, false);
  } else if (element.attachEvent) {
    element.attachEvent('on' + type, listener);
  } else {
    element['on' + type] = listener;
  }
}

• 事件处理函数中的 this

在事件处理函数中的 this 指向当前触发该事件的 DOM 元素。

link.onclick = function handleLink () {
  photo.src = this.href;
  p.textContent = this.title;
  return false;
};

但是通过行内绑定注册的事件，调用的函数中 this 指向的是 window。

<button onclick="handle()">按钮</button>
<script>
  function handle () {
    // 此处的 this 指向 window
    console.log(this);
  }
</script>

行内绑定事件 onclick="handle()" 中的 "" 双引号内部其实可以看做是一个匿名函数，"" 双引号内部的这个匿名函数才是事件处理函数，在事件处理函数中又调用了 handle() 方法。

<!-- 此处的 this 指向的是触发事件的对象 button -->
<button onclick="handle(this)">按钮</button>
<script>
  function handle (btn) {
    // 此处的 this 指向 window
    console.log(btn);
  }
</script>

解除事件

绑定事件的元素可以解除绑定，例如：我们可以让按钮点击一次之后解除事件绑定。三种绑定事件的解除事件的方式不同，下面我们分别来介绍。

行内绑定事件和动态绑定事件本质上都是给 DOM 元素设置 onclick 属性，对应的解除绑定事件的方式都是把 onclick 属性重新设置为 null。

• 解除行内绑定的事件

当按钮执行完点击事件的处理程序后立即解除事件的绑定

<button onclick="handle(this)">按钮</button>
<script>
  function handle (btn) {
    alert('Hello');
    btn.onclick = null;
  }
</script>

• 解除动态绑定的事件

btn.onclick = function handle () {
	this.onclick = null;
};

• 解除标准绑定事件的方式

标准绑定事件使用 addEventListener(type, callback, [capture]); 方法，对应的解除绑定使用的方法是 removeEventListener(type, callback, [capture])，需要注意的是，如果注册的事件需要解除的话，使用 addEventListener() 注册事件的时候，传入的 callback 不能是匿名函数，因为解除事件绑定的时候还需要引用这个函数。

const div = document.querySelector('#div');

div.addEventListener('click', handle);

function handle () {
  alert('hello');
  this.removeEventListener('click', handle);
}

事件流

我们已经会使用 addEventListener(type, callback, [capture])，方法给元素注册事件，但是这个方法的第三个参数的作用我们还不清楚，下面我们就来介绍该方法的第三个参数，这里我们需要先来学习 DOM 中的事件流(事件模型)。

DOM (文档对象模型)结构是一个树型结构，当一个HTML元素产生一个事件时，该事件会在元素结点与根节点之间按特定的顺序传播，路径所经过的节点都会收到该事件，这个传播过程可称为 DOM 事件流。

事件顺序有两种类型：事件捕捉和事件冒泡。

事件冒泡(Event Bubbling)

这是 IE 浏览器对事件模型的实现，也是最容易理解的。冒泡，顾名思义，事件像个水中的气泡一样一直往上冒，直到顶端。

从DOM 树型结构上理解，就是事件由叶子节点沿祖先结点一直向上传递直到根节点；从浏览器界面视图 HTML 元素排列层次上理解就是事件由具有从属关系的触发事件的元素一直传递到根元素直到文档对象。

addEventListener(type, callback, [capture])，该方法的第三个参数为 false 的时候设置触发事件的方式为事件冒泡，该参数默认为 false。

一般情况下，我们都会使用事件冒泡的方式注册事件。

const outer = document.querySelector('#outer');
const inner = document.querySelector('#inner');

outer.addEventListener('click', function () {
  console.log('点击了 outer');
}, false);

inner.addEventListener('click', function () {
  console.log('点击了 inner');
}, false);

document.body.addEventListener('click', function () {
  console.log('点击了 body');
}, false);

document.addEventListener('click', function () {
  console.log('点击了 document');
}, false);

window.addEventListener('click', function () {
  console.log('点击了 window');
}, false);

执行结果：

使用行内绑定和动态绑定事件的方式默认使用的是事件冒泡。

事件捕获(Event Capturing)

Netscape 的实现，它与冒泡型刚好相反，由 DOM 树最顶层元素一直到触发事件的元素。

addEventListener(type, callback, [capture])，该方法的第三个参数为 true 的时候设置触发事件的方式为事件捕获。

const outer = document.querySelector('#outer');
const inner = document.querySelector('#inner');

outer.addEventListener('click', function () {
  console.log('点击了 outer');
}, true);

inner.addEventListener('click', function () {
  console.log('点击了 inner');
}, true);

document.body.addEventListener('click', function () {
  console.log('点击了 body');
}, true);

document.addEventListener('click', function () {
  console.log('点击了 document');
}, true);

window.addEventListener('click', function () {
  console.log('点击了 window');
}, true);

执行结果：

使用行内绑定和动态绑定事件的方式无法使用事件捕获。

DOM标准的事件模型

我们已经对上面两个不同的事件模型进行了解释和对比。DOM 标准同时支持两种事件模型，即事件捕获与事件冒泡，但是，事件捕获先发生。两种事件流都会触发 DOM 中的所有对象，从 document对象开始，也在 document 对象结束（大部分兼容标准的浏览器会继续将事件是捕捉/冒泡延续到window 对象）。

如图：首先是捕获传递事件，接着是冒泡传递，所以，如果一个处理函数既注册了捕获型事件的监听，又注册冒泡型事件监听，那么在 DOM 事件模型中它就会被调用两次。

DOM 标准的事件模型最独特的性质是，文本节点也会触发事件(在IE不会)。

事件委托

事件委托，通俗地来讲，就是把一个元素的处理事件的函数委托到另一个元素。

一般来讲，会把一个或者一组元素的事件委托到它的父层或者更外层元素上，真正绑定事件的是外层元素，当事件响应到需要绑定的元素上时，会通过事件冒泡机制从而触发它的外层元素的绑定事件上，然后在外层元素上去执行函数。

举个例子，比如一个宿舍的同学同时快递到了，一种方法就是他们都傻傻地一个个去领取，还有一种方法就是把这件事情委托给宿舍长，让一个人出去拿好所有快递，然后再根据收件人一一分发给每个宿舍同学。

在这里，取快递就是一个事件，每个同学指的是需要响应事件的 DOM 元素，而出去统一领取快递的宿舍长就是代理的元素，所以真正绑定事件的是这个元素，按照收件人分发快递的过程就是在事件执行中，需要判断当前响应的事件应该匹配到被代理元素中的哪一个或者哪几个。

下面我们来做一个练习，为下面的每一个 li 注册点击事件，当点击当前 li 的时候打印 li 中的文本内容。

<ul id="list">
  <li>item 1</li>
  <li>item 2</li>
  <li>item 3</li>
  ......
  <li>item n</li>
</ul>

首先我们用传统的方式来实现，先获取到页面上所有的 li，然后遍历所有的 li，给每一个 li 注册点击事件，这里使用 addEventListener() 注册事件的时候省略了第三个参数，默认为 false，事件冒泡的方式。

这样做不好的地方有两点，第一：我们需要为每一个 li 元素创建一个新的事件处理函数，每次创建都需要销毁时间和内存。第二：当点击按钮往 ul 中添加新的 li 元素的时候需要给新创建的 li 注册点击事件。

const lis = document.querySelectorAll('#list li');
    
lis.forEach(function (li) {
  li.addEventListener('click', function () {
    console.log(this.textContent)
  });
});

下面我们使用事件委托的方式优化上面的代码，把点击事件注册给父元素 ul，当点击 li 的时候通过事件冒泡把点击事件传递给父元素 ul。

const ul = document.querySelector('#list');
ul.addEventListener('click', function () {
  console.log('test');
  // 此处的 this 是注册事件的元素 ul
  console.log(this);
});

代码改完之后点击 li，这段代码确实可以执行，但是我们的目标是打印 li 之间的内容，而通过打印发现此处的 this 不是我们想要的当前点击的 li，而是注册事件的元素 ul。所以这里需要强调一点，在注册事件的时候，事件源是注册事件的对象。

那如何获取当前触发事件的元素 li 呢？当事件被触发的时候事件处理函数会接收一个参数，这个参数叫做事件对象，事件对象可以提供触发事件的时候相关的数据，下一小节详细介绍，这里我们先用事件对象解决当前的问题，事件对象中有一个 target 属性，这个属性就是当前触发事件的对象。

在 IE 浏览器中获取事件对象的方式不同，IE 中是通过 window.event 获取事件对象，以前在获取事件对象的时候还要处理浏览器兼容性问题，IE 浏览器现在已经被淘汰所以浏览器兼容性的处理我们就不再演示。

const ul = document.querySelector('#list');
// 事件参数(对象) e
ul.addEventListener('click', function (e) {
  // e.target 触发事件的元素
  console.log(e.target.textContent);
  // 注册事件的元素
  console.log(this);
});

到这里这个案例就完成了，我们再来扩展下这个案例，如果想要点击特定的 li 来触发事件该如何实现？

<ul id="list">
  <li>item 1</li>
  <li class="cls">item 2</li>
  <li class="cls">item 3</li>
  ......
  <li>item n</li>
</ul>

如上代码，如果想点击具有特性类样式或者特定 id 的元素触发事件，可以通过判断当前点击的元素 e.target 的类样式或者 id 属性进行判断。

if (e.target.className === 'cls') {
	// ....
}

但是如果想像 CSS 选择器一样更加灵活的匹配的话，上面的判断不够灵活，这里可以使用 元素.matches(选择器) 来匹配特定元素。当元素匹配指定的选择器返回 true。

const ul = document.querySelector('#list');
ul.addEventListener('click', function (e) {
  // matches 方法，当元素匹配指定的选择器返回 true
  if (e.target.matches('.cls')) {
    console.log(e.target.textContent);
  }
});

利用事件冒泡的特性，将本应该注册在子元素上的处理事件注册在父元素上，这样点击子元素时发现其本身没有相应事件就到父元素上寻找作出相应。这样做的优势有：1. 减少内存消耗，避免重复创建相同事件处理函数，只需要把多个子元素的事件委托给父元素。2.随时可以添加子元素，添加的子元素会自动有相应的处理事件。

案例：购物车删除

• 需求：

• 使用事件委托优化移除购物车数据的功能

• 代码：

const tbody = document.querySelector('tbody');
tbody.addEventListener('click', function (e) {
  // 注册事件的元素 tbody
  // console.log(this);
  // 触发事件的元素(你点击的那个元素)
  // console.log(e.target)
  // 判断元素是否是指定的元素
  // console.log(e.target.matches('.del'))

  if (e.target.matches('.del')) {
    e.target.parentNode.parentNode.remove();
  }
});

事件对象

每当触发一个事件，就会产生一个事件对象 event，该对象包含着所有与事件有关的信息。包括导致事件的元素、事件的类型以及其他与特定事件相关的信息。上一小节中我们使用事件对象获取触发事件的元素。

例如：鼠标操作产生的 event中会包含鼠标位置的信息；键盘操作产生的event中会包含与按下的键有关的信息。

所有浏览器都支持 event 对象，但支持方式不同，在标准 DOM 中 event 对象必须作为唯一的参数传给事件处理函数，在 IE 中 event 是 window 对象的一个属性。

• 事件对象提供的常用成员

案例：跟着鼠标飞的图片

• 需求：

• 当鼠标移动的时候让图片跟着鼠标走

• 代码：

• 因为要改变图片位置，所以让图片脱离文档流
• 注册 mousemove 事件

• 改变图片的坐标：鼠标坐标 - 图片大小的一半，让鼠标在图片的中央位置

const img = document.querySelector('#img');
document.addEventListener('mousemove', function (e) {
  // 鼠标位置 - 图片大小的一半
  img.style.left = e.clientX - 96 / 2 + 'px';
  img.style.top = e.clientY - 80 / 2 +  'px';
});

设置样式，让 body 的高度等于 1500px（垂直方向出现滚动条），滚动条下拉这时候移动鼠标，图片的纵向位置跟鼠标脱离。

原因是 clientX 和 clientY 获取的是鼠标在当前可视区域的位置。如果出现滚动条的话可以通过 pageX 和 pageY 获取鼠标在当前文档中的位置。

const img = document.querySelector('#img');
document.addEventListener('mousemove', function (e) {
  img.style.left = e.pageX - 96 / 2 + 'px';
  img.style.top = e.pageY - 80 / 2 +  'px';
});

这里获取图片大小的时候写的是具体值，将来图片替换后，还需要改变这里的大小。我们可以使用 getComputedStyle() 获取图片的大小。

const img = document.querySelector('#img');
img.addEventListener('load', function () {
  const style = window.getComputedStyle(img, null);
  const imgWidth = parseInt(style.width);
  const imgHeight = parseInt(style.height);
  document.addEventListener('mousemove', function (e) {
    img.style.left = e.pageX - imgWidth / 2 + 'px';
    img.style.top = e.pageY - imgHeight / 2 +  'px';
  });
});

注意：这里需要在 img 标签加载完毕后获取图片的大小，否则获取到的图片大小是 0，因为 load 事件代表图片被加载，否则的话代码从上到下执行到这个位置，图片还没有被下载回来，这个时候获取图片的大小是 0。

案例：键盘控制图片移动

• 需求：

• 按方向键盘控制页面上的图片往相应的方向移动。

• 代码：

• 让图片脱离文档流，翻转 180 的类样式，可以左右移动
• 监听键盘按下的事件

• 根据按下的方向键，控制图片的坐标改变 10 像素

#img {
  width: 100px;
  position: absolute;
  left: 0;
  top: 0;
}
.toLeft {
  transform: rotateY(180deg);
}

const img = document.querySelector('#img');
let x = 0;
let y = 0;
document.addEventListener('keydown', function (e) {
  switch (e.key) {
    case 'ArrowLeft':
      x -= 10;
      img.classList.add('toLeft');
      break;
    case 'ArrowRight':
      x += 10;
      img.classList.remove('toLeft');
      break;
    case 'ArrowUp':
      y -= 10;
      break;
    case 'ArrowDown':
      y += 10;
      break;
  }

  img.style.left = x + 'px';
  img.style.top = y + 'px';
});

案例：禁止弹出右键和选中文字

// contextmenu 鼠标右键事件
document.addEventListener('contextmenu', function(e) {
  // 禁止点击的默认行为，即显示上下文菜单
  e.preventDefault()
});
// 禁止选中文字事件
document.addEventListener('selectstart', function(e) {
  // 禁止选中文字的默认行为，即不能选中文字
  e.preventDefault()
})

案例：拖拽登录框

• 需求：

• 点击弹出登录框，显示登录框和遮罩层
• 鼠标放到登录框的头部，显示可移动的鼠标样式

• 单按下鼠标可以拖动登录看的位置，鼠标弹起移除拖动的功能

• 代码：

• 当鼠标按下弹出登陆框的a标签的时候，弹出两个层来
• 单击关闭按钮的时候，隐藏这两个层

• 当鼠标按下title这个盒子的时候，就能够获取鼠标在盒子中的坐标位置
• 鼠标在文档中移动的时候，时时的获取坐标，减去在盒子中的坐标，将这个值赋值给login的left和top

• 鼠标离开的时候，在清空事件处理程序，不要再去触发移动的事件中的事件处理程序了

const loginBg = document.querySelector('#bg');
const loginLink = document.querySelector('#link');
const loginBox = document.querySelector('#login');
const closeBtn = document.querySelector('#closeBtn');
const loginTitle = document.querySelector('#title');

loginLink.addEventListener('click', function () {
  loginBox.style.display = 'block';
  loginBg.style.display = 'block';
});
closeBtn.addEventListener('click', function () {
  loginBox.style.display = 'none';
  loginBg.style.display = 'none';
});

// 拖动事件的三个过程：鼠标按下 mousedowm,鼠标移动 mousemove,鼠标松开 mouseup
const style = window.getComputedStyle(loginBox, null);
// 模态框跟着鼠标走的原理
loginTitle.addEventListener('mousedown', function (e) {
  const loginLeft = parseInt(style.left);
  const loginTop = parseInt(style.top);
  // 步骤一：当鼠标按下时，需要立即得到鼠标在盒子中的坐标
  var x = e.pageX - loginLeft;
  var y = e.pageY - loginTop;
  // 为整个页面添加鼠标移动事件
  document.addEventListener('mousemove', move);

  function move(e) {
    // 步骤二：模态框的left和top等于鼠标在页面的坐标减去鼠标在盒子内的坐标
    // 注意：一定要加上px
    login.style.left = e.pageX - x + 'px';
    login.style.top = e.pageY - y + 'px';
  }
  // 步骤三：鼠标松开时取消整个页面的鼠标移动事件
  document.addEventListener('mouseup', function (e) {
    document.removeEventListener('mousemove', move);
  });
});

常用事件

在这之前我们已经使用过了单击事件、鼠标经过和鼠标离开的事件，浏览器给我们提供的事件种类非常多，下面我们列出一些常用的事件，使用的方式都是一样的。

• 常用的事件

案例：模拟 jd 搜索文本框，按 s 获取焦点

• 需求：

• 在文档中按 s 让文本框获得焦点，注册键盘事件判断是否按 s 键
• 文本框获得焦点移除键盘事件

• 文本框失去焦点注册键盘事件

• 代码：

• 元素.focus() 可以让元素获得焦点，同时触发 focus 事件

const search = document.querySelector('#search');

function hanldeFocus(e) {
  if (e.key === 's') {
    search.focus();
    e.preventDefault();
  }
}
document.addEventListener('keydown', hanldeFocus);

search.addEventListener('focus', function () {
  document.removeEventListener('keydown', hanldeFocus);
});

search.addEventListener('blur', function () {
  document.addEventListener('keydown', hanldeFocus);
});

案例：模拟输入快递单号文本框

• 需求：

• 文本框输入过程中，上面显示放大的输入内容

• 代码：

作业

用键盘敲鼓的游戏

许愿墙-拖拽