如何在 JavaScript 中触发事件？

Javascript 是一种高级的、解释性的、动态类型的客户端脚本语言。 HTML 是静态的，Javascript 用于向静态 HTML 代码添加功能。 HTML 事件由 JavaScript 处理。当一个事件发生时，它需要采取一些行动。此操作可以通过 JavaScript 事件处理程序完成。除了 JavaScript 之外，功能上等同于 JavaScript 的 jQuery 也可以用于触发 HTML 文档中的事件。为了处理 JavaScript 触发器事件，了解什么是事件很重要。事件是 JavaScript 和 HTML 之间的交互。一些常见的 HTML 事件如下：

• onload：浏览器完成页面加载时触发
• onchange：当 HTML 元素发生变化时触发。
• onclick：点击 HTML 元素时触发。
• onmouseover：当鼠标移到 HTML 元素上时触发。
• onmouseout：当鼠标移出 HTML 元素时触发。

事件可以通过 addEventListener() 方法处理，也可以通过定义特定的 JavaScript 函数在单个组件上触发事件。让我们考虑以下示例：

使用 document.addEventListener() 方法

句法 ：

document.addEventListener(event, function, phase)

参数：

• 事件：强制参数。指定事件的名称。
• 函数：必填参数。指定应该处理事件的函数。
• phase：这是一个可选参数，接受一个布尔值。如果传递的是真值，则在捕获阶段执行事件处理程序，如果传递的是假值，则在冒泡阶段执行事件处理程序。如果一个元素是一个子元素并且它触发了一个事件，那么该事件将同时注册到父元素和子元素上。如果阶段值传递为真，则事件处理程序首先由父元素执行（捕获阶段），如果传递为假，则子元素首先执行事件处理程序。默认情况下，false 作为阶段值传递。

示例 1：

HTML

  

    Click on the page to trigger click event
    Click on the page to trigger mouseover event
    Click on the page to trigger mouseoutevent
      
    
        document.addEventListener("click", function() {
        alert("You clicked inside the document");
        });
          
        document.addEventListener("mouseover", function() {
            document.body.style.backgroundColor = "lavender";
        });
          
        document.addEventListener("mouseout", function() {
            document.body.style.backgroundColor = "white";
        });
    

输出

触发鼠标悬停事件：

触发 mouseout 事件：

触发点击事件：

说明：在本例中，当鼠标移到文档上时，文档的背景颜色变为淡紫色。当鼠标移出时，文档的背景颜色变回白色。当用户单击文档内的任意位置时，会弹出一个警报。这些操作由事件发生时触发的事件处理程序处理。

示例 2：在单个元素上触发事件

HTML

  

    
        Click Me
    
    
  
    
        Hello World...How are you
    
      
    
        function clickFunction(){
            document.body.style
                .backgroundColor = "pink";
        }
          
        function enterFunction(){
            document.getElementById("myDiv")
                .style.border = "1px solid black";
        }
          
        function leaveFunction(){
            document.getElementById("myDiv")
                .style.border = "2px solid blue";
        }
    

  

输出：

点击按钮：

鼠标在页面上移动

说明这里 HTML 文档中的各个元素会触发不同的事件，而这些事件会调用不同的 JavaScript 函数。处理事件的逻辑在函数中指定。单击按钮时，它会更改网页的背景颜色。处理的其他事件是 mouseenter 和 mouseleave。当鼠标进入 id 名为 myDiv 的容器时，分区的边框变为黑色。当鼠标离开容器时，分区的边界变为蓝色。