JavaScript 如何触发事件

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

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

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

使用document.addEventListener()方法

语法：

document.addEventListener(event, function, phase)

示例1： 此示例使用addeventListener()方法在Javascript中触发事件。

<h3>Click on the page to trigger click event</h3> 
<h3>Click on the page to trigger mouseover event</h3> 
<h3>Click on the page to trigger mouseoutevent</h3> 
  
<script type="text/javascript"> 
    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"; 
    }); 
</script>

输出

JavaScript 如何触发事件

说明： 在这个示例中，当鼠标移动到文档上时，文档的背景颜色会变为淡紫色。当鼠标移出时，文档的背景颜色会恢复为白色。当用户在文档内的任意位置点击时，会弹出一个提醒框。这些操作是通过事件处理程序来处理的，当事件发生时触发。

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

<button onclick="clickFunction()"> 
    Click Me 
</button> 
<br><br> 
  
<div class="container" id="myDiv" 
     onmouseenter="enterFunction()" 
     onmouseleave="leaveFunction()"> 
     Hello World...How are you 
</div> 
  
<script type="text/javascript"> 
    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"; 
    } 
</script>

输出:

JavaScript 如何触发事件

解释在HTML文档中，各个元素会触发不同的事件，这些事件会调用不同的JavaScript函数。处理事件的逻辑在这些函数中指定。当按钮被点击时，会改变网页的背景颜色。其他被处理的事件包括mouseenter和mouseleave。当鼠标进入具有名为myDiv的id的容器时，该容器的边框变为黑色。当鼠标离开容器时，容器的边框变为蓝色。