700字范文,内容丰富有趣,生活中的好帮手!
700字范文 > js动态生成的DOM绑定事件失效的问题

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

时间:2021-03-19 11:14:26

相关推荐

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

本内容不代表本网观点和政治立场,如有侵犯你的权益请联系我们处理。
网友评论
网友评论仅供其表达个人看法,并不表明网站立场。