Javascript 关于事件处理程序的说明和示例

事件处理程序 是浏览器或DOM API中处理事件响应的属性。让我们通过一个示例来了解一下，当我们在浏览器上点击任何虚拟按钮时，会为我们执行特定的任务，最终，浏览器会以某些结果响应您的触发，或者当您悬停在浏览器组件上时，它会通过更改其显示属性来伪装。这就是事件处理程序的作用。事件处理程序帮助您反思事件的发生。

Javascript中处理事件的不同方式： 有三种处理事件的方式，也可以说有三种类型的事件处理程序。

通过addEventListener处理
通过对象方法处理
通过HTML内联属性处理

让我们通过示例详细了解。

1. 通过addEventListener处理： 这是处理事件的最佳方式，因为您还可以使用removeEventListener方法删除关联的事件处理程序。

语法：

element.addEventListener("event name" , callback , useCapture)
element.removeEventListener("event name" , callback , useCapture)

其中,

event name： 它是事件的名称。
callback： 当事件发生时触发的函数。
useCapture： 一个布尔值[捕获：true | 冒泡：false] – 表示当事件以层次结构添加时，侦听器触发的顺序。

上述侦听器有两种类型。

捕获： 这里元素的父元素比事件发生的实际元素更优先。
冒泡： 这里事件发生的实际元素比其父元素更优先。

示例：

HTML

<!DOCTYPE html>
<html>
 
<head>
    <title>EventHandlers</title>
</head>
 
<body>
    <div class="buttons">
        <button>Press me</button>
    </div>
    <script>
        const buttonContainer = document.querySelector('.buttons');
        buttonContainer.addEventListener('click', event => {
            document.write('<h1 style="color:green">
                GeeksForGeeks</h1>');
        })
    </script>
</body>
 
</html>

输出:

Javascript 关于事件处理程序的说明和示例

在上述示例中，我们可以通过事件处理程序在屏幕上单击按钮来打印一条消息。

2. 使用对象方法处理： DOM中的每个元素都包含一些方法，如onclick、ondrag、onkeypress等，可以用于处理事件。您可以将一个函数传递给此方法，该函数以事件对象作为参数。

语法：

element. **onclick** = (event)=>{
    ...
}

示例： 让我们给按钮添加一个对象方法来点击我，并在

h1>中打印“GeeksForGeeks”。

Javascript

<!DOCTYPE html>
<html>
 
<head>
    <title>EventHandlers</title>
</head>
 
<body>
    <div class="buttons">
        <button>Press me onclick</button>
    </div>
    <script>
        const buttonContainer = document.querySelector('.buttons');
        buttonContainer.onclick = () => {
            document.write("<h1>GeeksForGeeks</h1>");
        }
    </script>
</body>
 
</html>

输出：

Javascript 关于事件处理程序的说明和示例

3. 处理HTML内联属性： HTML语法还包括处理事件的属性。这些属性接受函数调用作为值。

语法：

<startTag onclick="myFunction()">content</endTag>

事件处理程序将事件对象作为回调参数返回，其中包含有关事件的详细信息。

示例： 我们将以内联属性的形式添加与第一个示例相同的代码。

Javascript

<!DOCTYPE html>
<html>
 
<head>
    <title>EventHandlers</title>
</head>
 
<body>
    <div class="buttons">
        <button onClick="pressme()">Press me</button>
    </div>
    <script>
        function pressme() {
            document.write('<h1 style="color:green">
                GeeksForGeeks</h1>');
        }
    </script>
</body>
 
</html>

输出：

Javascript 关于事件处理程序的说明和示例