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 被绑定到一个 idmyBtn 的元素的 click 事件上。

onload 和 onunload 事件

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

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

onloadonunload 事件可以用来处理 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>