Question

我想使用变量来存储我要绑定的事件。

类似的东西：

var the_event = 'mouseover';
$().bind(the_event, function(){
    console.log('hi there!');
});

我可以用if来实现同样的目标，但我宁愿使用更好的方式，也许存在一个！

我想做什么，if s：

var the_event = 'mouseover';

var the_function = function(){
    console.log('hi there!');
}

if(the_event == 'mouseover'){
    $().bind('mouseover', the_function);
} else if(the_event == 'click'){
    $().bind('click', the_function);
}

谢谢！

修改

我实际上要做的是：

var events = {
    one: 'mouseover',
    two: 'mouseout'
};

$().bind({
    events.one: function(){
        console.log('1');
    },
    events.two: function(){
        console.log('2');
    },
);

Answer 1

如果开始时$()中有某些内容，那么您的第一个示例将正常工作。 bind接受一个字符串，它不关心字符串是来自文字还是来自变量。

此：

$("some_selector").bind("click", function(event) {
    // ...
});

与此完全相同：

var event_name = "click";
$("some_selector").bind(event_name, function(event) {
    // ...
});

...当然，除了event_name变量的存在。 Gratuitous live example

如果你想做多个事件，你也可以这样做，但你必须提前创建你传递给bind的对象：

var events = {};
var eventName1 = "click";
var eventName2 = "dblclick";
events[eventName1] = function(event) { /* ... */ };
events[eventName2] = function(event) { /* ... */ };
$("some_selector").bind(events);

Live example

你不能直接在文字中这样做，因为对象文字中:左边的东西必须是文字或文字字符串，它不能是表达式的结果（因此不能是变量引用），例如，这将不工作：

var eventName1 = "click";
var eventName2 = "dblclick";
$("some_selector").bind({
    eventName1: function() { /* ... */ }, // <== Wrong, doesn't use variable, uses "eventName1"
    eventName2: function() { /* ... */ }  // <== Wrong (same reason)
});

所以将它应用到您刚刚添加到问题的代码示例中，您将得到：

var events = {
    one: 'mouseover',
    two: 'mouseout'
};

var bindEvents = {};
bindEvents[events.one] = function(){
    console.log('1');
};
bindEvents[events.two] = function(){
    console.log('2');
};
$(/* You need something here */).bind(bindEvents);

Answer 2

bind()将事件的名称作为字符串作为第一个参数，因此：

$("#elem").bind(the_event, function(){
    console.log('hi there!');
});

会奏效。看这里： http://api.jquery.com/bind/

Answer 3

由于bind方法的第一个参数是字符串事件名称，因此您可以随时执行此操作。或者，您也可以使用和json map在bind方法中传递多个事件处理程序。请看这里bind

$('#foo').bind({
  click: function() {
    // do something on click
  },
  mouseenter: function() {
    // do something on mouseenter
  }
});

jQuery绑定到变量事件

3 个答案: