jQuery:使用相同事件函数的两个元素

时间:2011-06-20 14:33:21

标签: javascript jquery events javascript-events

在两个不同的事件处理程序之间共享一个函数的最佳方法是什么?我想要相同的结果,但是根据点击的元素,需要在函数中定义一些情境因变量。

我可以破解解决方案,但想知道这种情况的最佳实践。简单的问题必须有一个简单的答案...

示例

var onMyEvent = function(e){
    if(click triggered from 'a'){
        //do that 
    }  
    if(click triggered from 'div'){
        //do that
    } 
}


$('a').click(onMyEvent);
$('div').click(onMyEvent);

FIDDLE: http://jsfiddle.net/f6C92/

5 个答案:

答案 0 :(得分:5)

我想有几种方法可以实现这一点,例如检查目标对象的e变量等,但对于您的场景,最简单,最易读的方法是使用is()函数,你可以传递任何CSS选择器来测试感兴趣的对象是否匹配它。

var onMyEvent = function(e){
    if($(this).is('a')){
        //do that 
    }  
    if($(this).is('div')){
        //do that
    } 
}


$('a').click(onMyEvent);
$('div').click(onMyEvent);

有些人会争辩说上面对jQuery进行了不必要的往返,当你通过测试this.tagName == 'A'来实现同样的目的时,但我通常建议将这些内容委托给jQuery,对于浏览器兼容性原因。

另一种巧妙的方法是将相关信息作为事件数据传递:

var onMyEvent = function(e){
    if(e.data.type == 'a'){
        //do that 
    }  
    ...
}


$('a').click({ type: 'a' }, onMyEvent);
$('div').click({ type: 'div' }, onMyEvent);

答案 1 :(得分:2)

这取决于差异有多复杂,但我真的不喜欢在处理程序中检查元素类型。我可能会做这样的事情:

function doSomething(...){
  // do stuff
}


$('a').click(function(){
   // set some variables and send them as parameters to doSomething
   doSomething(...);
});

$('div').click(function(){
   // set some variables and send them as parameters to doSomething
   doSomething(...);
});

doSomething包含公共代码。

答案 2 :(得分:1)

事件的target属性将包含单击的元素。在此updated fiddle中,我使用id警告所点击元素的e.target.id

答案 3 :(得分:1)

这应该是诀窍:

var onMyEvent = function(e) {
    if (this.tagName == "A") {
       alert("a");   
    } else if (this.tagName == "DIV") {
        alert("div"); 
    }
}

答案 4 :(得分:1)

var onMyEvent = function(e){
    if(this.tagName == 'A'){
       alert("a");
    }  
    if(this.tagName == 'DIV'){
       alert("div");
    } 
}

$('a').click(onMyEvent);
$('div').click(onMyEvent);

即使这在我看来会起作用,最好为每个标签设置不同的处理程序,并在其中调用相同的函数,如kingjiv建议