I have jQuery code that handles unbinding and binding event handlers to elements that are dynamically added to the page. The code has a wrapper function that unbinds existing handlers from elements with a given id prefix, and then binds the event handlers so that any existing elements have the handler and any newly added elements of the same id prefix get it as well. Obviously this does extra unbinding/binding on elements with the id prefix that already exist when a new element is added. The unbind is done to prevent existing elements getting multiple handlers of the same type assigned to them.
我有jQuery代码处理解绑定和绑定事件处理程序到动态添加到页面的元素。代码有一个包装函数,它从具有给定id前缀的元素中取消绑定现有处理程序,然后绑定事件处理程序,以便任何现有元素都具有处理程序,并且任何新添加的相同id前缀的元素也可以获取它。显然,这对添加了新元素时已经存在的id前缀的元素进行了额外的解除绑定/绑定。完成unbind是为了防止现有元素获得分配给它们的相同类型的多个处理程序。
Since originally writing this code, I have learned about the jQuery delegate function that essential seems to do exactly what I have done above.
从最初编写这段代码开始,我已经了解了jQuery委托函数,它本质上就像我上面所做的一样。
Would the delegate function do what I have done significantly better, such that it would be worth my time to rewrite my current working code to take advantage of it? By better I mean performance, memory use, or some other measure.
代理功能是否会更好地完成我所做的工作,以便我可以花时间重写当前的工作代码以利用它?更好的我指的是性能,内存使用或其他一些措施。
1 个解决方案
#1
1
When you use .delegate(), you are expected to choose an ancestor element that will be the listener for events on designated descendents. Which is great because right from the beginning you are binding a listener that should be more or less "permanent" on your page, regardless of how many valid targets are added or removed from its descendent tree.
当您使用.delegate()时,您应该选择一个祖先元素,该元素将成为指定后代上事件的侦听器。这很好,因为从一开始你就绑定了一个应该或多或少“永久”在你的页面上的监听器,无论在其后代树中添加或删除了多少有效目标。
This is certainly better than .click for dynamic pages, and is better than using a series of .bind and .unbind on elements as they get added or removed.
对于动态页面来说,这肯定比.click更好,并且比在元素添加或删除时使用一系列.bind和.unbind更好。
However, it might be equal to using .bind() in a way that chooses an ancestor element that listens for clicks on designated descendents. I'm not familiar enough with .bind() to say for sure about performance benefits.
但是,它可能等于使用.bind()以选择侦听指定后代点击的祖先元素的方式。我对.bind()不太熟悉,以确定性能优势。
--
As an aside not specifically related to your question, it IS a better-performing function than .live(), so if you are ever tempted to use .live() I would strongly recommend .delegate() as a better option.
作为一个与你的问题没有特别关联的旁边,它是一个比.live()更好的函数,所以如果你想要使用.live(),我强烈建议.delegate()作为一个更好的选择。
#1
1
When you use .delegate(), you are expected to choose an ancestor element that will be the listener for events on designated descendents. Which is great because right from the beginning you are binding a listener that should be more or less "permanent" on your page, regardless of how many valid targets are added or removed from its descendent tree.
当您使用.delegate()时,您应该选择一个祖先元素,该元素将成为指定后代上事件的侦听器。这很好,因为从一开始你就绑定了一个应该或多或少“永久”在你的页面上的监听器,无论在其后代树中添加或删除了多少有效目标。
This is certainly better than .click for dynamic pages, and is better than using a series of .bind and .unbind on elements as they get added or removed.
对于动态页面来说,这肯定比.click更好,并且比在元素添加或删除时使用一系列.bind和.unbind更好。
However, it might be equal to using .bind() in a way that chooses an ancestor element that listens for clicks on designated descendents. I'm not familiar enough with .bind() to say for sure about performance benefits.
但是,它可能等于使用.bind()以选择侦听指定后代点击的祖先元素的方式。我对.bind()不太熟悉,以确定性能优势。
--
As an aside not specifically related to your question, it IS a better-performing function than .live(), so if you are ever tempted to use .live() I would strongly recommend .delegate() as a better option.
作为一个与你的问题没有特别关联的旁边,它是一个比.live()更好的函数,所以如果你想要使用.live(),我强烈建议.delegate()作为一个更好的选择。