我经常使用jQuery .trigger()
来处理重复事件。
例如,如果我有一个包含四个导航按钮的小部件(向上,向下,向左,向右),并且每个按钮都绑定了一个事件处理程序,如:
$('#up').on('click', function() {
// move up
...
});
到目前为止,小部件效果很好,现在我想在up/down/left/right arrow key
上添加键盘快捷键,这样每个按钮的工作方式与按下up/down/left/right button
的按钮完全相同。
在这种情况下,我经常使用.trigger()
使键盘快捷键作为这些按钮的包装。
$(document).on('keydown', function(e) {
// up arrow key
if (e.keyCode == 38) $('#up').trigger('click');
...
});
这样使用.trigger()
是不好的做法吗?
我认为将图书馆作为黑匣子处理时非常方便。如果已经有一些按钮来帮助控制库,我可以通过触发这些按钮上的点击事件来使用库的功能,即使不知道库的API。
答案 0 :(得分:5)
实践并不是很糟糕,但还有其他方法可以做到,即使它们不一定更好,例如:
$('#up').on('click', clickHandler);
$(document).on('keydown', function(e) {
if (e.which === 38) clickHandler();
});
function clickHandler() {
//do stuff
}
或
$(document).on('click keydown', function(e) {
if (e.type == 'keydown' && e.which === 38) {
// do stuff for key
}else if (e.type == 'click' && e.target.id == 'up') {
// do stuff when click on #up
}
});
我认为这是基于意见的,但我更喜欢第一个,你调用的外部函数,而不是触发事件本身,即使它们做同样的事情。
我不会使用最后一个,因为它是委托的,并在任何点击等时触发。
答案 1 :(得分:3)
有些人会说这是不好的做法,有些人会说没关系,但这可能不是最容易理解的代码。相反,我建议定义一个相应的函数,然后从触发器中调用它。例如:
function doUp() {
//your code for handling "up" functionality
}
$('#up').on('click', doUp);
$(document).on('keydown', function(e) {
// up arrow key
if (e.keyCode == 38) doUp();
...
});
与其他键/按钮类似。
通过这种方式,您可以在一个地方放置逻辑,然后从必要的地方调用它。