DOM 与事件

事件是您在编程时系统内发生的动作或者发生的事情，系统通过它来告诉您在您愿意的情况下您可以以某种方式对它做出回应。例如：如果您在网页上单击一个按钮，您可能想通过显示一个信息框来响应这个动作。在这篇文章中我们将围绕事件讨论一些重要的概念，并且观察它们在浏览器上是怎么工作的。这篇文章并不做彻底的研究仅聚焦于您现阶段需要掌握的知识。—— MDN

事件即某个情况、某个事情。

当按钮被点击
视频播放、暂停
关闭浏览器
页面加载完毕
调整浏览器窗口大小

上述情况都是事件。

1. DOM 事件

DOM 事件被发送用于通知代码相关的事情已经发生了。每个事件都是继承自 Event 类的对象，可以包括自定义的成员属性及函数用于获取事件发生时相关的更多信息。事件可以表示从基本用户交互到渲染模型中发生的事件的自动通知的所有内容。—— MDN

DOM 事件是指给 DOM 节点在触发某个条件下要做的事情，如：当按钮被点击的时候改变背景色。

<style>
  .change-bg {
    border: 1px solid black;
    height: 40px;
    width: 120px;
    border-radius: 2px;
    margin-top: 16px;
    outline: none;
    cursor: pointer;
  }

  .change-bg:active {
    background: #efefef;
  }

  .box {
    width: 120px;
    height: 120px;
    background: #4caf50;
    border-radius: 60px;
  }
</style>
<div class="box"></div>

<button class="change-bg">戳这里改变背景色</button>
<script>
  var boxEle = document.querySelector('.box');
  var btnEle = document.querySelector('.change-bg');

  // 随机生成一个颜色 具体实现可以不管
  function getColor() {
    return '#' + ('00000' + (Math.random() * 0x1000000 << 0).toString(16)).slice(-6);
  }

  btnEle.onclick = function() {
    boxEle.style.backgroundColor = getColor();
  };
</script>