前端优化之事件绑定_前端技术栈有一段话,其中某个单词需要绑定事件,但是单词的位置不确定,该怎么做?-优快云博客

本文介绍了如何通过事件委托来优化JavaScript代码，避免事件循环绑定和处理动态添加元素的事件绑定问题。示例中展示了如何利用事件冒泡原理，通过在父元素上监听事件，再通过判断事件源来执行相应操作，从而提高代码效率。

事件委托
1 用事件的委托来代替事件的循环绑定
2 当新增的同一个元素新增的元素也需要绑定事件
都可以利用事件委托解决
不可以利用事件冒泡解决因为是事件冒泡回导致父元素也会触发事件
具体看下面的列子

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no">
    <title>4.2 事件优化</title>
    <link rel="stylesheet" href="css/slider.css">
    <style>
        /*这里的修改只是为了显示的更明显*/
        .slider-indicator {
            width: 20px;
            height: 20px;
            background-color: #807aff;
            opacity: 0.8;
        }
        body {
            height: 2000px;
        }
    </style>
</head>
<body>
    <div id="slider" class="slider">
        <div class="slider-item-container">
            <div class="slider-item">
                <a href="###" class="slider-link">
                    <img src="img/1.jpg" alt="slider" class="slider-img">
                </a>
            </div>
            <div class="slider-item">
                <a href="###" class="slider-link">
                    <img src="img/2.jpg" alt="slider" class="slider-img">
                </a>
            </div>
            <div class="slider-item">
                <a href="###" class="slider-link">
                    <img src="img/3.jpg" alt="slider" class="slider-img">
                </a>
            </div>
            <div class="slider-item">
                <a href="###" class="slider-link">
                    <img src="img/4.jpg" alt="slider" class="slider-img">
                </a>
            </div>
            <div class="slider-item">
                <a href="###" class="slider-link">
                    <img src="img/5.jpg" alt="slider" class="slider-img">
                </a>
            </div>
        </div>
        <div class="slider-indicator-container">
            <span class="slider-indicator slider-indicator-active"></span>
            <span class="slider-indicator"></span>
            <span class="slider-indicator"></span>
            <span class="slider-indicator"></span>
            <span class="slider-indicator"></span>
        </div>
    </div>

    <script>
        var sliderEl = document.getElementById('slider'),
            sliderIndicatorContainer = sliderEl.querySelector('.slider-indicator-container'),
            sliderIndicators = sliderIndicatorContainer.querySelectorAll('.slider-indicator');

        // 问题一 事件循环绑定 
        // for (var i = 0, num = sliderIndicators.length; i < num; i++) {
        //     sliderIndicators[i].addEventListener('click', function () {
        //         console.log('click');
        //     }, false);
        // }

        // 问题二 动态插入一个新节点 也需要绑定事件
        var sliderIndicator = document.createElement('span');
        sliderIndicator.className = 'slider-indicator';
        sliderIndicatorContainer.appendChild(sliderIndicator);
        // sliderIndicator.addEventListener('click', function () {
        //     console.log('click');
        // }, false);

        // 使用事件代理，避免直接事件绑定 可以解决上面的问题
        // jQuery/Zepto
        // $(sliderIndicatorContainer).on('click', '.slider-indicator', function () {});
        sliderIndicatorContainer.addEventListener('click', function (ev) {
            // console.log(ev.target);
            //正则表达式来匹配className
            if (ev.target && /(^|\s)slider\-indicator($|\s)/.test(ev.target.className)) {
                console.log('click');
            }
        }, false);

    </script>
</body>
</html>