如何在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);