Question

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

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

示例

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/

Answer 1

我想有几种方法可以实现这一点，例如检查目标对象的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);

Answer 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包含公共代码。

Answer 3

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

Answer 4

这应该是诀窍：

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

Answer 5

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

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

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

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

5 个答案: