我试图理解使用jQuery .on()方法的直接和委托事件处理程序之间的这种特殊区别.具体而言,本段最后一句:
当
selector被提供时,事件处理程序被称为委托.当事件直接发生在绑定元素上时,不会调用处理程序,但仅适用于与选择器匹配的后代(内部元素).jQuery将事件从事件目标起泡到附加处理程序的元素(即最里面到最外层的元素),并为匹配选择器的路径上的任何元素运行处理程序.
"运行任何元素的处理程序"是什么意思？我做了一个测试页面来试验这个概念.但是以下两个结构导致了相同的行为:
$("div#target span.green").on("click", function() {
alert($(this).attr("class") + " is clicked");
});
要么,
$("div#target").on("click", "span.green", function() {
alert($(this).attr("class") + " is clicked");
});
也许有人可以参考一个不同的例子来澄清这一点？谢谢.
javascript jquery event-bubbling event-binding jquery-events
当我第一次学习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);
我现在附上所有这样的事件:
$(document).on('click.my-widget-namespace', '.my-widget a', function() {
$(this).toggleClass('active');
});
这似乎符合我的所有目标.(是的,因为某种原因它在IE中速度较慢,不知道为什么？)它很快,因为只有一个事件与单个元素相关联,而二级选择器仅在事件发生时进行评估(如果这里错误,请纠正我).命名空间非常棒,因为它可以更容易地切换事件监听器.
所以我开始认为jQuery事件应该始终绑定到$(document).
你有什么理由不想这样做吗？
这可算是最佳做法吗？如果没有,为什么？
如果您已经阅读了这一切,谢谢.我感谢任何/所有反馈/见解.
假设:
.on()//至少1.7版的jQuery读数/例子:
我知道jquery .on()的使用和目的,因为我使用它.
但是我想知道这个脚本中$(document).on()vs $(element).on()之间的区别是什么:
<html>
...
<body>
...
<table id="table-user">
<thead>...</thead>
<tbody>
AJAX DYNAMIC CONTENT
</tbody>
</table>
....
<script>
$(document).on('click','.btn-edit',function(){
go_edit();
});
$('#table-user').on('click','.btn-edit',function(){
go_edit();
});
</script>
</body>
</html>
是什么表现不同或他们之间的其他东西？
要听取元素上的事件,我想在文档层面上倾听:
$(document).on('click', '.myclass', function() {/*do something*/});
比元素级别的风格更好:
$('.myclass').on('click', function() { /*do something*/ });
原因是第一种风格也适用于动态添加的新元素.您还可以在Bootstrap中看到此样式使用了很多:https://github.com/twitter/bootstrap/blob/master/js/bootstrap-alert.js
我想广泛使用第一种风格.但是我想知道这种风格是否有任何缺点,比如性能？