什么是JavaScript DOM事件?

您可以在事件发生时执行JavaScript,例如用户单击鼠标,加载图像,当用户单击HTML元素,提交HTML表单等时。事件是文档对象模型(DOM)级别的一部分3,每个HTML元素都包含一组事件,这些事件可以触发JavaScript代码。

示例

让我们看一个示例,它允许您从事件处理程序中调用函数以更改文本

<!DOCTYPE html>
<html>
   <body>
      <p onclick="myEvent(this)">Click me</p>
      <script>
         function myEvent(id) {
            id.innerHTML = "Welcome!";
         }
      </script>
   </body>
</html>

在这里,我们将看到一些示例来了解Event和JavaScript之间的关系。

 onclick事件类型

这是最常用的事件类型,在用户单击其鼠标左键时发生。您可以针对此事件类型进行验证,警告等。

示例

请尝试以下示例。

<html>
   <head>
      <script>
         <!--
            function sayHello()  {
               alert("Hello World")
            }
         //-->
      </script>
   </head>
   <body>
      <p>Click the following button and see result</p>
      <form>
         <input type="button" onclick="sayHello()" value="Say Hello" />
      </form>
   </body>
</html>

鼠标悬停和鼠标悬停

这两种事件类型将帮助您使用图像甚至文本创建漂亮的效果。将鼠标移到任何元素上时会触发onmouseover事件,而将鼠标从该元素上移出时会触发onmouseout事件。 

示例

请尝试以下示例。

<html>
   <head>
      <script>
         <!--
            function over() {
               document.write ("Mouse Over");
            }
            function out() {
               document.write ("Mouse Out");
            }
         //-->
      </script>
   </head>
   <body>
      <p>Bring your mouse inside the division to see the result:</p>
      <div onmouseover="over()" onmouseout="out()">
         <h2> This is inside the division </h2>
      </div>
   </body>
</html>