相关疑难解决方法(0)

这是来自哪里

当我第一次学习jQuery时,我通常会附加这样的事件:

$('.my-widget a').click(function() {
    $(this).toggleClass('active');
});

在了解了有关选择器速度和事件委托的更多信息之后,我在几个地方读到"jQuery事件委托将使您的代码更快".所以我开始编写这样的代码:

$('.my-widget').on('click','a',function() {
    $(this).toggleClass('active');
});

这也是复制已弃用的.live()事件行为的推荐方法.这对我很重要,因为我的很多网站都在动态添加/删除小部件.上面的行为与.live()的行为完全不同,因为只有添加到现有容器".my-widget"的元素才会获得行为.如果我在代码运行后动态添加另一个html块,那么这些元素将不会获取绑定到它们的事件.像这样:

setTimeout(function() {
    $('body').append('<div class="my-widget"><a>Click does nothing</a></div>');
}, 1000);

我想要实现的目标:

1. .live()的旧行为//意味着将事件附加到尚未存在的元素
2. .on()的好处
3. 绑定事件的最快性能
4. 管理事件的简单方法

我现在附上所有这样的事件:

$(document).on('click.my-widget-namespace', '.my-widget a', function() {
    $(this).toggleClass('active');
});

这似乎符合我的所有目标.(是的,因为某种原因它在IE中速度较慢,不知道为什么？)它很快,因为只有一个事件与单个元素相关联,而二级选择器仅在事件发生时进行评估(如果这里错误,请纠正我).命名空间非常棒,因为它可以更容易地切换事件监听器.

我的解决方案/问题

所以我开始认为jQuery事件应该始终绑定到$(document).
你有什么理由不想这样做吗？
这可算是最佳做法吗？如果没有,为什么？

如果您已经阅读了这一切,谢谢.我感谢任何/所有反馈/见解.

假设:

1. 使用支持.on()//至少1.7版的jQuery
2. 您希望将事件添加到动态添加的内容中

读数/例子:

1. http://24ways.org/2011/your-jquery-now-with-less-suck
2. http://brandonaaron.net/blog/2010/03/4/event-delegation-with-jquery
3. http://www.jasonbuckboyer.com/playground/speed/speed.html
4. http://api.jquery.com/on/

用户在HTML页面中选择两个或多个元素.我想要完成的是找到那些元素的共同祖先(如果以前没有找到,那么身体节点将是共同的祖先)？

PS:它可以通过XPath实现,但对我来说它不是一个更好的选择.也可以通过css选择器解析找到它,但我认为它是一个脏方法(？)

谢谢.

我在我的JavaScript代码中使用委托事件处理程序(jQuery),因此当单击动态添加按钮时会发生这种情况.

我想知道这有性能上的缺点吗？

// Delegated event handler
$(document).on('click', '#dynamicallyAddedButton', function(){
    console.log("Hello");
});

性能方面,它与此相比如何？

// Regular event handler
$("#regularButton").on('click', function(){
    console.log("Hello Again");
});

看看jQuery文档,似乎事件总是在DOM树上一直冒泡.这是否意味着进一步嵌套元素,事件需要工作的时间越长？

编辑:使用JavaScript的事件委托而不是jQuery是否有性能优势？问一个类似的问题,答案是有用的.我想知道使用常规事件处理程序和委托事件处理程序之间的区别.链接的问题使得事件似乎不断冒出DOM树.使用委托事件处理程序,事件会冒泡到顶部然后再返回到指定的元素吗？