当我第一次学习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读数/例子:
由于live()方法从版本1.7开始不推荐使用,因此我开始浏览我的源代码并将所有实时事件处理程序转换为on().我的印象是,改变很简单,一切都会像以前一样有效; 但是,我遇到了一些行为不正常的代码.
我有以下jQuery选择绑定表标记的click事件...
$('table.accordion-header').live("click", function ($e) {
// gobs of code
}
...它工作得很好(即 - 即使在页面上发生异步回发后,我的表标记点击事件也会引发).但是,如果我将代码更改为以下内容
$('table.accordion-header').on("click", function ($e) {
// gobs of code
}
然后,在页面上发生任何异步回发后,不再引发click事件.请注意 - click事件确实可以处理任何异步回发,但之后它不再有效.那我在这里错过了什么？
很多人都解释说e.stopPropagation()可以防止事件冒泡.但是,我很难找到为什么人们想要或者想要首先阻止事件冒泡.
在我的网站上,我有许多元素,如下所示:
$(document.body).on('click', ".clickable", function(e){
//e.stopPropagation();
//do something, for example show a pop-up or click a link
});
<body>
<p>outside stuff</p>
<button type="button" class='clickable'>
<img src='/icon.jpg'> Do Something
</button>
</body>
我想添加e.stopPropagation()因为我想要将事件处理程序更改'touch'为'click'使用这个真棒触摸库Hammer.js..这将允许点击在桌面上正常发生以及在移动设备上进行触摸事件.
这个问题(请纠正我,如果我错了)是触摸设备上的滚动减慢停止.
这e.stopPropgation()有用吗？这样,无论何时触摸屏幕 - document.body事件冒泡都不会每次都发生？
javascript jquery javascript-events event-bubbling stoppropagation
在阅读了有关最佳性能 JavaScript 的文章后，我了解到最好尽量减少与 DOM 的交互，并更多地依赖 JavaScript 本身的逻辑。
其中一部分是对元素列表使用单个事件侦听器并读取点击目标，而不是对每个元素使用一个事件侦听器
ul#menu
li#one One
li#two Two
li#three Three
$ul = document.getElementById('#menu')
$ul.addEventListener('click', function(e) {
if (e.target.id == ...) { ... } // You get the idea
})
我有一个网站，有几个导航栏、几个下拉按钮等。那么为什么不在主体上创建一个事件侦听器并只查看事件目标呢？
document.body.addEventListener('click', function(e) {
if (e.target.id == ...) { ... };
})
从技术角度我无法判断这个解决方案有什么问题。有些东西对我来说似乎太重了，它有一种代码的味道。
这在移动设备上会有问题吗？DOM 含量高的本质是否<body>最终对性能造成的损害大于好处？
我没有使用 jQuery，请建议纯 JS 解决方案。
我很好奇为什么当我.live()用.on()我的事件替换后,通过html()方法插入AJAX的响应后不起作用.假设我有html结构:
<div class="a">
<a href="" class="alert-link">alert</a>
<a href="" class="ajax-update">update</a>
</div>
和jquery代码类似:
$('.alert-link').on("click", function(){
alert('abc');
return false;
});
和ajax-update将触发请求,响应将是
警报更新
我会插入它parent().然后再次按下alert-link将导致重定向到/但如果我改为.on(),.live()那么将再次显示警报.我在这里错过了什么？我已经读到这.on()是替换.delegate()和.live().