DOM 事件处理

HTML DOM 使 JavaScript 有能力对 HTML 事件做出反应。

事件绑定

我们可以在事件发生时执行 JavaScript，在事件发生之前，我们需要指定事件的响应函数（也就是告诉计算机，当某件事发生时，需要执行哪些代码）；这个指定过程就是事件绑定。

元素事件属性

我们可以通过配置HTML元素属性 onXXXX 绑定事件发生时执行的代码，比如 onClick：

<div onclick="this.innerHTML='谢谢!'">请点击该文本</div>

当事件发生时，需要执行很多行代码时，我们可以绑定函数：

<!DOCTYPE html>
<html>
<head>
  <script>
    function changetext(element){
      element.innerHTML="谢谢!";
    }
  </script>
</head>
<body>
  <h1 onclick="changetext(this)">请点击该文本</h1>
</body>
</html>

注意：changetext 的参数 this 是浏览器在事件发生时传入的函数的参数，其指向当前元素。

使用 DOM 指定事件响应函数

除了配置元素属性外，我们还可以使用 DOM 来动态的指定事件响应函数

<!DOCTYPE html>
<html>
<head>
</head>
<body>

  <p>点击按钮就可以执行 <em>displayDate()</em> 函数。</p>

  <button id="myBtn">点击这里</button>

  <script>
  document.getElementById("myBtn").onclick = displayDate;

  function displayDate()
  {
    document.getElementById("demo").innerHTML = Date();
  }
  </script>

  <p id="demo"></p>

</body>
</html>

在上面的例子中，名为 displayDate 的函数被分配给 id=myButn" 的 HTML 元素。

当按钮被点击时，会执行该函数。

使用 DOM 指定事件可以处理灵活多变的需求，但是会增加程序复杂度。实际中需要根据实际情况判断是否采用。

使用 addEventListener() 指定事件响应函数

思考这样一个问题：

<!DOCTYPE html>
<html>
<head>
</head>
<body>

  <p>点击按钮就可以执行 <em>displayDate()</em> 函数。</p>

  <button id="myBtn">点击这里</button>

  <script>
  document.getElementById("myBtn").onclick = displayDate;

  function displayDate()
  {
    document.getElementById("demo").innerHTML = Date();
  }

  // 这里有很多代码
  // 项目多人写完成，这里的代码有可能是别人写的

  document.getElementById("myBtn").onclick = other;
  function other()
  {
    alert("other code")
  }
  </script>

  <p id="demo"></p>

</body>
</html>

当我再点击按钮时，会显示当前时间吗？

在大型项目中，我们通常使用 addEventListener 给元素添加属性从而避免以上的问题。

addEventListener() 方法用于向指定元素添加事件句柄。

我们可以通过以下方法，为 <button> 元素添加点击事件

document.getElementById("myBtn").addEventListener("click", function(){
  document.getElementById("demo").innerHTML = "Hello World";
});

当我们需要给一个元素添加多个事件时，可以继续添加：

document.getElementById("myBtn").addEventListener("click", function(){
  alert("other code")
});

以下是 addEventListener 的参数说明

参数	描述
event	必须。字符串，指定事件名。注意: 不要使用 "on" 前缀。例如，使用 "click" ,而不是使用 "onclick"。提示：所有 HTML DOM 事件，可以查看我们完整的 HTML DOM Event 对象参考手册。
function	必须。指定要事件触发时执行的函数。当事件对象会作为第一个参数传入函数。事件对象的类型取决于特定的事件。例如， "click" 事件属于 MouseEvent(鼠标事件) 对象。
useCapture	可选。布尔值，指定事件是否在捕获或冒泡阶段执行。可能值: true - 事件句柄在捕获阶段执行 false- false- 默认。事件句柄在冒泡阶段执行

对于 addEventListener 添加的事件，我们可以使用 removeEventListener 删除事件绑定

// 添加事件绑定
document.getElementById("myDIV").addEventListener("mousemove", myFunction);
// 删除事件绑定
document.getElementById("myDIV").removeEventListener("mousemove", myFunction);

事件对象

有的时候我们还需要获得当前事件的具体信息，这时候我们可以获取事件对象

Event 对象代表事件的状态，比如事件在其中发生的元素、键盘按键的状态、鼠标的位置、鼠标按钮的状态。

在上面的例子中，我们只有稍加修改即可获得事件对象。

<!DOCTYPE html>
<html>
<head>
</head>
<body>

  <p>点击按钮就可以执行 <em>displayDate()</em> 函数。</p>

  <button id="myBtn">点击这里</button>

  <script>
  document.getElementById("myBtn").onclick = displayDate;

  // 这里的 event 会由系统自动构建并传入
  function displayDate(event)
  {
    console.log(event)
    document.getElementById("demo").innerHTML = Date();
  }
  </script>

  <p id="demo"></p>

</body>
</html>

完整的事件对象属性可以参考这里

DOM 事件列表

当然，除了绑定 click 事件，我们还可以绑定其他事件,如：

当用户点击鼠标时
当网页已加载时
当图像已加载时
当鼠标移动到元素上时
当输入字段被改变时
当提交 HTML 表单时
当用户触发按键时

1.4.3.4.事件处理