js动态生成的DOM绑定事件失效的问题

事件委托原理：事件冒泡机制。

优点：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 这样的事件，虽然有事件冒泡，但是只能不断通过位置去计算定位，对性能消耗高，因此也是不适合于事件委托的；