JQuery связать с переменным событием

Question

Я хотел бы использовать переменную для хранения события, с которым я буду связываться.

Что-то вроде:

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

Я мог бы достичь того же с помощью if s, но я бы предпочел использовать лучший способ, если бы он существовал!

Что я хочу сделать, с 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);
}

Спасибо!

EDIT:

То, что я на самом деле пытаюсь сделать, это:

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, конечно. Бесплатный пример из жизни

---

Если вы хотите сделать несколько событий, вы тоже можете это сделать, но вам нужно заранее создать объект, который вы передаете bind:

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

Живой пример

Вы не можете сделать это непосредственно в литерале, потому что объект слева от : в литерале объекта должен быть литералом или литеральной строкой, это не может быть результатом выражение (и поэтому не может быть ссылкой на переменную), например, это будет не работа:

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 - это имя строкового события.В качестве альтернативы вы также можете использовать и json map для передачи нескольких обработчиков событий в методе bind.Взгляните сюда bind

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

Answer 3

bind() принимает имя события в качестве строки в качестве первого аргумента, поэтому:

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

будет работать.Смотрите здесь: http://api.jquery.com/bind/