js 多个div 点击事件

在JavaScript中，为多个div元素添加点击事件，可以采用以下几种方法：

1. 事件委托（Event Delegation）

基础概念：事件委托利用事件冒泡机制，将事件监听器添加到父元素上，而不是每个子元素单独添加。当子元素触发事件时，事件会向上冒泡到父元素，父元素的事件监听器可以捕获并处理该事件。

优势：

性能优化：减少事件监听器的数量，特别是在有大量子元素时。
动态管理：无需为新添加的子元素单独绑定事件。

示例代码：

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>事件委托示例</title>
    <style>
        .container div {
            width: 100px;
            height: 100px;
            background-color: lightblue;
            margin: 5px;
            display: inline-block;
            text-align: center;
            line-height: 100px;
            cursor: pointer;
        }
    </style>
</head>
<body>
    <div class="container">
        <div>Div 1</div>
        <div>Div 2</div>
        <div>Div 3</div>
    </div>

    <script>
        const container = document.querySelector('.container');

        container.addEventListener('click', function(event) {
            if (event.target && event.target.nodeName === 'DIV') {
                alert(`点击了 ${event.target.textContent}`);
            }
        });
    </script>
</body>
</html>

2. 直接绑定事件监听器

基础概念：为每个div元素单独添加事件监听器。

优势：

简单直观：适用于元素数量较少且不需要动态添加的情况。

劣势：

性能问题：当元素数量较多时，会增加内存消耗和事件处理的开销。

示例代码：

const divs = document.querySelectorAll('.container div');

divs.forEach(function(div, index) {
    div.addEventListener('click', function() {
        alert(`点击了 Div ${index + 1}`);
    });
});

3. 使用事件代理库（如jQuery）

基础概念：利用第三方库简化事件绑定和管理。

优势：

简化代码：减少手动管理事件监听器的复杂性。
兼容性：处理不同浏览器的兼容性问题。

示例代码（使用jQuery）：

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>jQuery事件委托示例</title>
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
    <style>
        .container div {
            width: 100px;
            height: 100px;
            background-color: lightgreen;
            margin: 5px;
            display: inline-block;
            text-align: center;
            line-height: 100px;
            cursor: pointer;
        }
    </style>
</head>
<body>
    <div class="container">
        <div>Div A</div>
        <div>Div B</div>
        <div>Div C</div>
    </div>

    <script>
        $('.container').on('click', 'div', function() {
            alert(`点击了 ${$(this).text()}`);
        });
    </script>
</body>
</html>