事件代理 (event delegation)

事件代理就是利用事件的冒泡特性,将事件绑定到外层元素上,而不是触发事件的元素上。

可以减少绑定的事件数量,而且对于动态加载的内容来说,十分有利。

事件代理 (event delegation)_第1张图片

上面这样写有个不足,就是如果触发事件的元素不是li,而是li的子元素时,上面的那个事件不会被触发。

事件代理 (event delegation)_第2张图片
修改后

通过isParentOfTarget函数,判断触发事件的元素(即event.target),是不是我们需要委托的元素的子元素,如果是,则返回这个委托的元素,不是,就返回false。

最后,再利用call函数,将事件处理函数的this绑定到所需委托的元素上。

你可能感兴趣的:(事件代理 (event delegation))