事件委托（事件代理）

事件委托

一般来说我们要给某个元素绑定事件，都会直接绑定在该元素上，如下：

// 给 li 元素绑定点击事件
$('li').click(function() {
    console.log('你点击我了');
})

但是这种直接的处理会有以下问题：

• 通过 JS 新添加的 li 元素并没有该事件绑定，所以点击无效
• 元素如果比较多的话，比喻有200个 li ，那每个 li 都绑定一个事件，性能是非常低的

那么如何解决这些问题呢？这就是我们要说的事件委托（或叫事件代理）。

事件委托简单来说就是利用事件冒泡，只指定一个事件处理程序，用来管理某一类型的所有事件。

以一个 todo list 为例：

// 要点击的元素是 todo-item
// 但是我们把事件绑定在父元素 todo-list 上，实现事件委托
// html 结构为：ul#todo-list>li.todo-item*5

$('#todo-list').on('click', '.todo-item', function() {
    $(this).toggleClass('done');
})

以 jQuery 为例，所以我们看不到背后的本质，下面我们以一个原生的实现来说明下：

var todoList = document.getElementById("todo-list");

todoList.addEventListener("click", function (e) {
    var target = e.target;
    // 检查事件源 target 是否为 todo-item
    if (target && target.nodeName.toUpperCase() == 'LI' && target.classList.contains('todo-item')) {
        target.classList.toggle('done')
    } else {
        console.log('我不是 todo-item ');
    }
});

注：因为事件委托是依赖于事件冒泡的，所以没有事件冒泡的事件是不能使用事件委托的。

 

本博客转载于IMWeb.如需转载请注明出处！！