JavaScript 事件委托

事件委托：子元素把一些本应该自己操作的事件委托给事件传播路径中的其中一个父元素

• 利用事件对象中 的target 来判断是否是需要委托的那个元素

事件委托的形式 绑定事件 把这个元素的事件 委托给 父元素

事件委托优点

1. 提高性能：当为父元素下的每个元素绑定同一个事件时，普通的循环定时间，套用函数多，事件函数也多；而事件委托，不需要循环，且只有一个事件函数；每一个函数都会占用内存空间，只需添加一个事件处理程序代理所有事件,所占用的内存空间更少。
2. 动态监听：使用事件委托可以自动绑定新添加的元素，不需要主动绑定事件也能和其他元素一样有一样的事件。比如在给父元素innerHTML后不需要再度遍历 绑定事件。

对比两种绑定事件方式

HTML 结构

<div class="box">
    <button class="btn">按钮1</button>
    <button class="btn">按钮2</button>
    <button class="btn">按钮3</button>
    <button class="btn">按钮4</button>
</div>

普通绑定事件方式

var btn = document.querySelectorAll("button");
var box = document.querySelector(".box");

fun();
function fun() {
    btn.forEach(function (item) {
        item.onclick = function () {
            // 复制当前点击的这个元素 追加到box中
            var newBtn = item.cloneNode(true);
            box.appendChild(newBtn);

            btn = document.querySelectorAll("button");
            fun();
        };
    });
}

事件委托方式

// 事件委托的形式 绑定事件 把btn这个元素的事件 委托给 box
box.onclick = function () {
    // console.log(1);
    var e = window.event;
    // 判断当前点击的是否是需要委托的元素
    if (e.target.className == "btn") {
        // e.target 鼠标真正点击的这个元素
        var newBtn = e.target.cloneNode(true);
        box.appendChild(newBtn);
    }
    // console.dir(e.target)
};