DOM 事件

HTML DOM 提供了给元素绑定事件处理程序的方法，这样就能在事件发生的时候做一些自定义的操作。

HTML DOM 提供了给元素绑定事件处理程序的方法，这样就能在事件发生的时候做一些自定义的操作。

对事件的反应

JavaScript 是基于事件驱动的程序，将自定义的事件处理程序绑定到事件后，当事件发生的时候，就会自动执行处理程序。

常见的 HTML 事件包括：

  • 用户点击鼠标
  • 网页加载完毕
  • 加载图像
  • 鼠标移动到元素上
  • 更改输入字段
  • 提交 HTML 表单
  • 用户敲击一个键时

下面的例子，当用户点击 <h1> 元素时，元素的内容会发生变化：

<!DOCTYPE html>
<html>
  <body>
    <h1 onclick="this.innerHTML = 'Ooops!'">点击我</h1>
  </body>
</html>

下面的例子给事件绑定一个函数：

<!DOCTYPE html>
<html>
  <body>
    <h1 onclick="changeText(this)">点击我</h1>

    <script>
      function changeText(element) {
        element.innerHTML = "Ooops!";
      }
    </script>
  </body>
</html>

HTML 事件属性

要将事件分配给 HTML 元素，您可以使用事件属性。

事件属性右 on 开头，后面跟着具体的事件代码， 比如 onclick 表示的是 click 事件，也就是单击鼠标左键。

为按钮元素分配一个 onclick 事件：

<button onclick="displayDate()">Try it</button>

在上面的示例中，单击按钮时将执行名为 displayDate 的函数。

使用 DOM 属性绑定事件

HTML DOM 允许您使用 JavaScript 将事件分配给 HTML 元素。

为按钮元素分配一个 onclick 事件：

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

在上面的例子中，一个名为的函数 displayDate 被绑定到一个 id 为 myBtn 的元素的 click 事件上。

onload 和 onunload 事件

onload 与 onunload 事件在当用户进入或离开页面的时候被触发。

onload 事件可用于检查访问者的浏览器类型和浏览器版本，并根据信息加载正确版本的网页。

onload 和 onunload 事件可以用来处理 Cookies。

<body onload="checkCookies()"></body>

onchange 事件

onchange 事件通常与输入字段的验证结合使用，当一个输入元素的内容发生改变时触发。

下面的示例中当用户更改输入字段的内容时调用 upperCase() 函数。

<input type="text" id="fname" onchange="upperCase()" />

onmouseover 和 onmouseout 事件

onmouseover 事件在用户将鼠标移动到元素上面时触发。

onmouseout 事件在用户将鼠标移动到元素外面时触发。

<!DOCTYPE html>
<html>
  <body>
    <div
      onmouseover="mOver(this)"
      onmouseout="mOut(this)"
      style="background-color:#D94A38;width:120px;height:20px;padding:40px;"
    >
      请把鼠标放在上面
    </div>

    <script>
      function mOver(obj) {
        obj.innerHTML = "多谢";
      }

      function mOut(obj) {
        obj.innerHTML = "请把鼠标放在上面";
      }
    </script>
  </body>
</html>

onmousedown、onmouseup 和 onclick 事件

onmousedown 事件在用户按下鼠标左键时触发。 onmouseup 事件在用户松开鼠标左键时触发。 onclick 事件在用户完成一次完整的点击鼠标左键时除法

<!DOCTYPE html>
<html>
  <body>
    <div
      onmousedown="mDown(this)"
      onmouseup="mUp(this)"
      style="background-color:#D94A38;width:90px;height:20px;padding:40px;"
    >
      点击我
    </div>

    <script>
      function mDown(obj) {
        obj.style.backgroundColor = "#1ec5e5";
        obj.innerHTML = "松开我";
      }

      function mUp(obj) {
        obj.style.backgroundColor = "#D94A38";
        obj.innerHTML = "谢谢";
      }
    </script>
  </body>
</html>
DOM 动画 DOM 事件监听器