addEventListener能否绑定多个事件处理函数 - 问答

是的，addEventListener 可以绑定多个事件处理函数。你可以为一个元素添加多个事件监听器，每个监听器都可以有不同的回调函数。当指定的事件触发时，所有绑定的事件处理函数都会按照它们被添加的顺序依次执行。

以下是一个简单的示例，展示了如何为一个按钮元素绑定两个不同的点击事件处理函数：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Event Listener Example</title>
</head>
<body>
    <button id="myButton">Click me!</button>

    <script>
        // 获取按钮元素
        const button = document.getElementById('myButton');

        // 定义第一个事件处理函数
        function handleClick1() {
            console.log('Handler 1 triggered');
        }

        // 定义第二个事件处理函数
        function handleClick2() {
            console.log('Handler 2 triggered');
        }

        // 为按钮元素添加两个点击事件监听器
        button.addEventListener('click', handleClick1);
        button.addEventListener('click', handleClick2);
    </script>
</body>
</html>

在这个示例中，我们为 myButton 元素添加了两个点击事件监听器。当用户点击按钮时，handleClick1 和 handleClick2 函数都会被执行。

0 赞

0 踩