如何在if语句中使用多个元素，多个事件但功能相同

Question

假设我有：

如果（事件X发生在元素A上）执行代码R

如果（事件Y发生在元素B上）执行代码R

在jQuery中，如何使用1条if语句代替2条if语句：

如果（事件X发生在元素A上）或（事件Y发生在元素B上）执行代码R

我一直在寻找绑定方法，但未能找到解决方案。 就像Google的搜索功能一样：如果您单击“搜索”按钮，它将执行搜索。 但是，如果您在输入框中键入内容并按“输入”键，它也会执行搜索。 同样，两个不同的元素（按钮和输入框），两个不同的事件（鼠标单击和按键），但功能相同（搜索）？

Answer 1

您的最终代码中将没有if语句。 您必须将每个事件的事件处理程序绑定到每个元素，并且该事件处理程序当然可以具有相同的功能：

function event_handler() {
    // ...
}

$(elementA).on('eventX', event_handler);
$(elementB).on('eventY', event_handler);

我建议阅读jQuery教程： http : //docs.jquery.com/Tutorials 。

要大致了解有关事件处理的更多信息，请阅读以下文章： http : //www.quirksmode.org/js/introevents.html 。

Answer 2

您需要为两个事件/元素组合添加相同的功能：

$('#elementA').on('click', myEventHandler);
// You can specify multiple Events:
$('#elementB').on('mousedown mouseup blur', myEventHandler);
// Or specify multiple elements:
$('#elementB, #elementC').on('click', myEventHandler);

function myEventHandler(e){
    console.log(e.type); // Event type ('mousedown', 'mouseup' etc)
    console.log(this);  // The element that triggered the event.
    // Do stuff.
}

但你不能绑定click到'#elementA' 和 mousedown到'#elementB'在1号线。

因此，没有，没有将多个不同事件绑定到不同元素的“单线” jQuery函数。

基本上， 看看jQuery的.on()

Answer 3

您可以使用多个以逗号分隔的jQuery选择器（例如CSS选择器）。 生成的jQuery对象列表将包含所有这些对象。

如果使用.bind()或.on()并将第一个参数设置为事件名称列表（用空格分隔.on() ，则允许在jQuery中绑定多个事件。

function handler_function (e) {
    e.target // contains the element that triggered the event (which was clicked for ex.)
    e.type // contains the event type that triggered the event
    e.keyCode // contains a number representing the key that has been pressed (if any)
}
$('button#button_id, input[type=text]#input_box')
    .bind('keyup click hover touch drag drop', handler_function);