addEventListener能否綁定多個(gè)事件處理函數(shù)

小樊
89
2024-10-10 10:25:48

是的，addEventListener 可以綁定多個(gè)事件處理函數(shù)。你可以為一個(gè)元素添加多個(gè)事件監(jiān)聽(tīng)器，每個(gè)監(jiān)聽(tīng)器都可以有不同的回調(diào)函數(shù)。當(dāng)指定的事件觸發(fā)時(shí)，所有綁定的事件處理函數(shù)都會(huì)按照它們被添加的順序依次執(zhí)行。

以下是一個(gè)簡(jiǎn)單的示例，展示了如何為一個(gè)按鈕元素綁定兩個(gè)不同的點(diǎn)擊事件處理函數(shù)：

<!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');

        // 定義第一個(gè)事件處理函數(shù)
        function handleClick1() {
            console.log('Handler 1 triggered');
        }

        // 定義第二個(gè)事件處理函數(shù)
        function handleClick2() {
            console.log('Handler 2 triggered');
        }

        // 為按鈕元素添加兩個(gè)點(diǎn)擊事件監(jiān)聽(tīng)器
        button.addEventListener('click', handleClick1);
        button.addEventListener('click', handleClick2);
    </script>
</body>
</html>

在這個(gè)示例中，我們?yōu)?myButton 元素添加了兩個(gè)點(diǎn)擊事件監(jiān)聽(tīng)器。當(dāng)用戶點(diǎn)擊按鈕時(shí)，handleClick1 和 handleClick2 函數(shù)都會(huì)被執(zhí)行。

0 踩