事件是什么

事件是您在编程时系统内发生的动作或者发生的事情——系统会在事件出现时产生或触发某种信号，并且会提供一个自动加载某种动作（例如：如果用户在网页上单击一个按钮，您可能想通过显示一个信息框来响应这个动作。）的机制。

在 Web 中, 事件在浏览器窗口中被触发并且通常被绑定到窗口内部的特定部分 — 可能是一个元素、一系列元素、被加载到这个窗口的 HTML 代码或者是整个浏览器窗口。

举几个可能发生的不同事件：

用户在某个元素上点击鼠标或悬停光标。
用户在键盘中按下某个按键。
用户调整浏览器的大小或者关闭浏览器窗口。
一个网页停止加载。
提交表单。

每个可用的事件都会有一个事件处理器，也就是事件触发时会运行的代码块。当我们定义了一个用来回应事件被激发的代码块的时候，我们说我们注册了一个事件处理器。事件处理器有时候被叫做事件监听器

使用网页事件的方式

可以通过多种不同的方法将事件监听器代码添加到网页，以便在关联的事件被触发时运行它。

事件处理器属性

我们来通过一个例子了解一下事件处理器的属性：

const btn = document.querySelector('button');

btn.onclick = function() {
  const rndCol = 'rgb(' + random(255) + ',' + random(255) + ',' + random(255) + ')';
  document.body.style.backgroundColor = rndCol;
}

这个 onclick 是被用在这个情景下的事件处理器的属性，它就像 button 其他的属性（如 btn.textContent, or btn.style), 但是有一个特别的地方——当您将一些代码赋值给它的时候，只要事件触发代码就会运行。

也可以将一个已存在的函数赋值给事件处理参数，如：

const btn = document.querySelector('button');

function bgChange() {
  const rndCol = 'rgb(' + random(255) + ',' + random(255) + ',' + random(255) + ')';
  document.body.style.backgroundColor = rndCol;
}

btn.onclick = bgChange;

还有很多事件处理参数可以选择，用上面例子来举例：

btn.onfocus及btn.onblur — 颜色将于按钮被置于焦点或解除焦点时改变（尝试使用Tab移动至按钮上，然后再移开）。这些通常用于显示有关如何在置于焦点时填写表单字段的信息，或者如果表单字段刚刚填入不正确的值，则显示错误消息。
btn.ondblclick — 颜色将仅于按钮被双击时改变。
window.onkeypress, window.onkeydown, window.onkeyup — 当按钮被按下时颜色会发生改变. keypress 指的是通俗意义上的按下按钮 (按下并松开), 而 keydown 和 keyup 指的是按键动作的一部分,分别指按下和松开. 注意如果你将事件处理器添加到按钮本身，它将不会工作 — 我们只能将它添加到代表整个浏览器窗口的 window 对象中。
btn.onmouseover 和 btn.onmouseout — 颜色将会在鼠标移入按钮上方时发生改变, 或者当它从按钮移出时.

可以拿下面这份完整的代码进行学习：

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Random color example — event handler property</title>
    <style>
      button {
        margin: 10px;
      }
    </style>
  </head>
  <body>
    <button>Change color</button>
    <script>
      const btn = document.querySelector('button');

      function random(number) {
        return Math.floor(Math.random()*number);
      }

      function bgChange() {
        const rndCol = 'rgb(' + random(255) + ',' + random(255) + ',' + random(255) + ')';
        document.body.style.backgroundColor = rndCol;
      }

      btn.onblur = bgChange;
    </script>
  </body>
</html>

addEventListener() 和 removeEventListener()

这是一种新的事件触发机制，定义在DOM Level 2 Events 中。它给浏览器提供了一个事件处理属性类似的函数—addEventListener()。用这个函数重写上面的例子如下：

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() 函数中, 我们具体化了两个参数——我们想要将处理器应用上去的事件名称，还有我们用来回应事件的函数的代码。

这个机制带来了一些相较于旧方式的优点。还有一个相对应的方法，removeEventListener()，这个方法移除事件监听器。例如，下面的代码将会移除上个代码块中的事件监听器：

1	btn.removeEventListener('click', bgChange);

这两个函数在大型的、复杂的项目中是非常有用的，可以让开发变得更加高效，比如你想要清除不需要的事件处理器，不需要去找那一行代码，只需要 removeEventListener() 即可；再比如你想要给同一个监听器注册多个处理器，用事件处理程序属性就不太方便，而使用 addEventListener() J就可以这样做：

1 2	myElement.addEventListener('click', functionA); myElement.addEventListener('click', functionB);

当元素被点击时两个函数都会工作。这个事件机制还有很多待学习的强大功能特性。

事件相关高级概念

事件对象

有时候在事件处理函数内部，您可能会看到一个固定指定名称的参数，例如event，evt或简单的e。这被称为事件对象，它被自动传递给事件处理函数，以提供额外的功能和信息。再次重写上面的例子：

function bgChange(e) {
  const rndCol = 'rgb(' + random(255) + ',' + random(255) + ',' + random(255) + ')';
  e.target.style.backgroundColor = rndCol;
  console.log(e);
}

btn.addEventListener('click', bgChange);

在函数中包括一个事件对象e，并在函数中设置背景颜色样式在e.target上 - 它指的是按钮本身。事件对象 e 的target属性始终是事件刚刚发生的元素的引用。所以在这个例子中，我们在按钮上设置一个随机的背景颜色，而不是页面。

在多个元素上设置相同的事件处理程序时，e.target非常有用，并且在发生事件时对所有元素执行某些操作。

阻止默认行为

有时，会遇到一些情况，你希望事件不执行它的默认行为。最常见的例子是Web表单，例如自定义注册表单。当你填写详细信息并按提交按钮时，自然行为是将数据提交到服务器上的指定页面进行处理，并将浏览器重定向到某种“成功消息”页面。

当用户没有正确提交数据时，作为开发人员，你希望停止提交信息给服务器，并给他们一个错误提示，告诉他们什么做错了，以及需要做些什么来修正错误。所以我们就需要阻止默认行为的操作。

比如，现在有一个简单的HTML表单，需要输入名和姓

<form>
  <div>
    <label for="fname">First name: </label>
    <input id="fname" type="text">
  </div>
  <div>
    <label for="lname">Last name: </label>
    <input id="lname" type="text">
  </div>
  <div>
     <input id="submit" type="submit">
  </div>
</form>
<p></p>

这里我们用一个onsubmit事件处理程序（在提交的时候，在一个表单上发起submit事件）来实现一个非常简单的检查，用于测试文本字段是否为空。如果是，我们在事件对象上调用preventDefault()函数，这样就停止了表单提交，然后在我们表单下面的段落中显示一条错误消息，告诉用户什么是错误的：

const form = document.querySelector('form');
const fname = document.getElementById('fname');
const lname = document.getElementById('lname');
const submit = document.getElementById('submit');
const para = document.querySelector('p');

form.onsubmit = function(e) {
  if (fname.value === '' || lname.value === '') {
    e.preventDefault();
    para.textContent = '姓和名你都需要填写';
  }
}

但是，这是一种非常弱的表单验证——例如，用户输入空格或数字提交表单，表单验证并不会阻止用户提交——这不是我们例子想要达到的目的。

事件冒泡及捕获

事件冒泡和捕捉是两种机制，主要描述当在一个元素上有两个相同类型的事件处理器被激活会发生什么。

对事件冒泡和捕捉的解释

当一个事件发生在具有父元素的元素上时，现代浏览器运行两个不同的阶段 - 捕获阶段和冒泡阶段。在捕获阶段：

浏览器检查元素的最外层祖先<html>，是否在捕获阶段中注册了一个onclick事件处理程序，如果是，则运行它。
然后，它移动到<html>中单击元素的下一个祖先元素，并执行相同的操作，然后是单击元素再下一个祖先元素，依此类推，直到到达实际点击的元素。

在冒泡阶段，恰恰相反:

浏览器检查实际点击的元素是否在冒泡阶段中注册了一个onclick事件处理程序，如果是，则运行它
然后它移动到下一个直接的祖先元素，并做同样的事情，然后是下一个，等等，直到它到达<html>元素。

在现代浏览器中，默认情况下，所有事件处理程序都在冒泡阶段进行注册。因此，在我们当前的示例中，当您单击视频时，这个单击事件从 <video>元素向外冒泡直到<html>元素。沿着这个事件冒泡线路：

它发现了video.onclick...事件处理器并且运行它，因此这个视频<video>第一次开始播放。
接着它发现了（往外冒泡找到的） videoBox.onclick...事件处理器并且运行它，因此这个视频<video>也隐藏起来了。

用 stopPropagation() 修复问题

这是令人讨厌的行为，但有一种方法来解决它！标准事件对象具有可用的名为 stopPropagation()的函数, 当在事件对象上调用该函数时，它只会让当前事件处理程序运行，但事件不会在冒泡链上进一步扩大，因此将不会有更多事件处理器被运行(不会向上冒泡)。所以，我们可以通过改变前面代码块中的第二个处理函数来解决当前的问题:

video.onclick = function(e) {
  e.stopPropagation();
  video.play();
};

事件委托

冒泡还允许我们利用事件委托——这个概念依赖于这样一个事实,如果你想要在大量子元素中单击任何一个都可以运行一段代码，您可以将事件监听器设置在其父节点上，并让子节点上发生的事件冒泡到父节点上，而不是每个子节点单独设置事件监听器。