事件概括 - JavaScript事件处理

HTML DOM使JavaScript有能力对HTML事件做出反应，可以在事件发生时执行JavaScript。

事件介绍

JavaScript事件是指在浏览器窗体或者HTML元素上发生的浏览器或者用户行为，页面上的每个元素都可以产生某些事件。

窗口事件

window（窗口）事件是指当用户与页面上的元素交互时所触发的事件。

鼠标事件

mouse（鼠标）事件主要是操作鼠标所触发的事件，如单击、双击、鼠标离开等。由于在Windows系统中鼠标是最主要的定位设置，所以鼠标事件是Web开发中最常用的一类事件。

请注意：此类事件不仅可能来自于“鼠标设备”，还可能来自于对此类操作进行了模拟以实现兼容性的其他设备，例如手机和平板电脑。

键盘事件

keydown 和 keyup：分别在用户按下或释放键盘按键时触发。

表单元素事件

submit：当用户提交表单时触发。

focus：当用户将焦点置于表单元素内，如输入框 <input> 时触发。

Document事件

DOMContentLoaded：当HTML文档已完成加载和解析，DOM树结构已完全构建完毕时触发。

CSS事件

transitionend：当一个CSS过渡动画完成时触发。通过监听这个事件，可以准确地知道何时动画结束并执行后续操作。

事件处理程序的绑定方式

为了对事件作出响应，我们可以分配一个处理程序（函数）。

处理程序是在发生用户行为时运行 JavaScript 代码的一种方式。

有几种分配处理程序的方法。让我们来看看，从最简单的开始。

<input value="点击按钮" onclick="alert('Click!')" type="button">

<script>
  function countSheep() {
    for(let i=1; i<=3; i++) {
      alert(`${i}只小绵羊！`);
    }
  }</script>
<input type="button" onclick="countSheep()" value="数绵羊!">

<input id="elem" type="button" value="Click me">
<script>
elem.onclick = function() {
    alert('Thank you');
};
</script>

DOM监听事件绑定方式

当希望给同一个元素或标签绑定多个事件的时候（如为按钮标签绑定两个或多个单击事件），是不被允许的。使用DOM监听事件绑定方式，可以实现绑定多个事件，事件根据顺序依次触发。

<input id="elem" type="button" value="Click me"/><script>
  function handler1() {
    alert('Thanks!');
  };

  function handler2() {
    alert('Thanks again!');
  }  elem.onclick = () => alert("Hello");
  elem.addEventListener("click", handler1); // Thanks!
  elem.addEventListener("click", handler2); // Thanks again!</script>

总结

这里有 3 种分配事件处理程序的方式：

    HTML 特性（attribute）：onclick="..."。

    DOM 属性（property）：elem.onclick = function。

    方法（method）：elem.addEventListener(event, handler[, phase]) 用于添加，removeEventListener 用于移除。

HTML 特性很少使用，因为 HTML 标签中的 JavaScript 看起来有些奇怪且陌生。而且也不能在里面写太多代码。

DOM 属性用起来还可以，但我们无法为特定事件分配多个处理程序。在许多场景中，这种限制并不严重。

最后一种方式是最灵活的，但也是写起来最长的。有少数事件只能使用这种方式。addEventListener 也支持对象作为事件处理程序。在这种情况下，如果发生事件，则会调用 handleEvent 方法。

无论你如何分类处理程序 —— 它都会将获得一个事件对象作为第一个参数。该对象包含有关所发生事件的详细信息。