使用jQuery 1.6中的事件委派,您可以响应已经冒泡到共同父级的事件。
示例实现如下:
(function($){
$.fn.myeventhandler = function () {
return this.delegate('a.next, a.prev', 'click customEvent', function (event) {
var target=$(event.target);
var bar = null;
if('click' == event.type) { /*~[ call this 'a' ]~*/
// handle the click event
$('#next-element').animate({width:'200px'},1300,function(){
bar = 'value1';
$('#next-element').animate({width:'100px'},1300,function(){
bar = 'value2';
console.log(bar);
});
});
} else if('customEvent' == event.type) { /*~[ call this 'b' ]~*/
// handle the customEvent event
$('#my-element').animate({height:'200px'},1300,function(){
bar = 'my-event1';
console.log(bar);
});
}
return false;
});
}
})(jQuery);
当您想要在页面上绑定许多事件触发器时,这种结构可以很好地工作。但是,我注意到了一种奇怪的行为,并想知道是否有人可以启发我的以下范围:
如果你在'a'之前定义一个变量'var bar;
'并在'a'中使用它并且'a'需要很长时间才能执行,那么如果第二次触发'click',那么'bar'变量是重新分配值还是会创建一个新值?
问题的原因是我有一个'未完成'的动画,动画需要1.3秒才能完成。如果我触发两个连续的单击事件,则正确设置目标和类型,但第二个动画似乎影响第一个动画,并且两个示波器似乎彼此可用。
我还没有完成动画,所以我还没有工作装置在jsFiddle上线,但是这里有任何经验法则我应该研究或者有一些更明确的范围解释可能已经找到了?
修改 在上面,我添加了类似于我正在使用的情况。在上面简化的情况下,'bar'的值仍然保持2个连续调用的预期值,但在更复杂的情况下我正在处理(仍然),除非我特别将参数传递给回调函数,仍然有允许2次连续调用以更改参数值的条件,以便回调看到后续调用创建的值 - 而不是在其自己的触发调用中逻辑设置的值。如果有人可以在简化的例子中复制这种效果,我会很感激。我正在削减我的功能,试图生成一个复制它的jsFiddle。
谢谢, AE
答案 0 :(得分:1)
如果再次单击它,则会创建一个新的条形变量,两个条形值将彼此独立。为了看到这一点,我创建了一个fiddle。快速单击两次,您会注意到第二个时间栏采用默认值而不是初始条形变量具有的值,这是预期的。
答案 1 :(得分:0)
传递事件对象而不是使用各种事件新创建,因此,“a”不会被重新分配,但会受到两个事件操作的影响。