事件委托原理:事件冒泡机制。
优点:1. 可以大量节省内存占用,减少事件注册。比如ul 上代理所有li 的click 事件。
2. 可以实现当新增子对象时,无需再对其事件进行绑定。对动态内容部分尤为合适。
缺点:如果把所有事件都用事件代理,可能会出现事件误判。即本不该触发的事件被绑上了事件。
初学者会可能会遇到 在js 动态生成的DOM元素中直接绑定事件,事件没有生效的问题。因为网页只执行一次初始化绑定,而此时通过js动态生成的DOM元素还未生成,导致绑定事件失败。
我常用的解决办法:
1. 将事件绑定到该动态生成的DOM 元素的父元素或其祖先元素上(事件委托)。注意,该父元素或祖先元素应该在网页执行初始化绑定时就已存在。可以使用jQuery 的 on()方法添加事件处理程序。
基本用法:$(parentSelector).on(event,childSelector,function)
2.若事件绑定元素的父元素或祖父元素都是动态生成的DOM 元素,则可以在js动态生成DOM 元素后,再绑定事件。
百度了一下事件委托的局限性:
比如 focus、blur 之类的事件本身没有事件冒泡机制,所以无法委托;
mousemove、mouseout 这样的事件,虽然有事件冒泡,但是只能不断通过位置去计算定位,对性能消耗高,因此也是不适合于事件委托的;