持续创作，加速成长！这是我参与「掘金日新计划 · 6 月更文挑战」的第3天，点击查看活动详情

事件处理程序

为了对事件做出响应，可以分配一个事件处理程序（handler）--一个在事件发生时运行的函数。

有三种分配事件处理程序的方式:

1. HTML特性

处理程序可以设置在HTML中名为on<event>的特性（attribute）中。

例如，要为一个input分配一个click处理程序，我们可以使用onclick，像这样。

<input value="click me" onclick="alert('click!')" type="button">

最好创建一个javascript函数，然后在HTML特性中调用这个函数。注意赋值函数需要加上括号！

<input value="click me" onclick="myFunc()" type="button">
<script>
    function myFunc(){...}
</script>

HTML特性名是大小写不敏感的，但是通常用小写onclick。

2. DOM属性

我们也可以使用DOM属性（property）on<event>来分配处理程序。例如elem.onclick

<input id="elem" value="click me" type="button">
<script>
     function sayThanks() { 
         alert('Thanks!'); 
      } 
     elem.onclick = sayThanks;//注意这里不需要添加括号。
</script>

DOM属性的大小写是敏感的。

3. addEventListener

HTML特性和DOM属性只能分配一个事件处理程序，addEventListener和removeEventListener来管理处理程序的替代方法，可以分配多个事件处理程序。

事件添加：addEventListener

elem.addEventListener(event, handler[,options])

event：事件名，例如click
handler: 事件处理程序
options: 可选对象
- once: 如果为true,那么会在被触发后自动删除监听器
- capture: 事件处理的阶段，如果为true，则在事件捕获阶段执行，false在事件冒泡阶段执行
- passive：如果为true，那么处理程序将不会调用preventDefault() 事件移除：removeEventListener

element.removeEventListener(event, handler[, options]);

要移除处理程序，需要传入完全相同的函数。多次调用addEventListener允许添加多个处理程序。

事件对象

当一个事件发生时，浏览器会创建一个event对象，将详细信息放入其中，并将其作为参数传递给事件处理程序。通过event对象，我们可以获得与事件相关的信息。只有在事件处理程序期间，event对象才会存在，事件处理程序执行完毕时，event对象就会被销毁。

<input type="button" value="Click me" id="elem"> 
<script> 
    elem.onclick = function(event) { 
        // 显示事件类型、元素和点击的坐标 
        alert(event.type + " at " + event.currentTarget); 
        alert("Coordinates: " + event.clientX + ":" + event.clientY); 
    }; 
</script>

event.type 事件类型
event.currentTarget 处理事件程序的元素。这与this相同。除非处理程序是一个箭头函数。
event.target 引发事件的目标元素。他在冒泡过程中不会发生变化。
还有其他的一些信息，不同的事件类型，event包含的信息也不同。

对象处理程序：handleEvent

我们不仅可以分配函数，还可以使用addEventListener将一个对象分配为事件处理程序。当事件发生时，就会调用该对象的handleEvent方法。

<button id="elem">Click me</button>

<script>
  class Menu {
    handleEvent(event) {
      // mousedown -> onMousedown
      let method = 'on' + event.type[0].toUpperCase() + event.type.slice(1);
      this[method](event);
    }

    onMousedown() {
      elem.innerHTML = "Mouse button pressed";
    }

    onMouseup() {
      elem.innerHTML += "...and released.";
    }
  }

  let menu = new Menu();
  elem.addEventListener('mousedown', menu);
  elem.addEventListener('mouseup', menu);
</script>

mousedown和mouseup事件触发时，会调用menu.handleEvent方法。

总结

有三种分配事件的方式HTML特性，DOM属性，addEventListener
事件对象，在事件触发时传递给事件处理程序的参数，包含了事件的相关信息。
也可以给addEventListener添加对象处理程序，当事件发生时，会调用对象处理程序中的handleEvent方法。

从0学前端--DOM事件操作