Question

让我说我有：

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

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

在jQuery中，如何使用1 if语句而不是2 if语句：

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

我一直在研究绑定方法，但一直无法找到解决方法。这就像谷歌的搜索功能：如果你点击“搜索”按钮，它就会执行搜索。但是，如果您在输入框中键入内容并按“回车”键，它也会执行搜索。同样，两个不同的元素（按钮和输入框），两个不同的事件（鼠标点击和按键），但相同的功能（搜索）？

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'一行。

所以，不，没有“一线”jQuery函数将多个不同事件绑定到不同元素。

基本上，Have a look at jQuery's .on()

Answer 3

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

如果您使用.bind()或.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);

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

3 个答案: