鼠標事件的多種功能jQuery

Question

我正在開發jQuery插件。 為了分開我的邏輯，我做這樣的事情：

$element.on({
    mouseenter: function(){
      //do something special
    }, mouseleave: function(){
      //do something else special
    }
});
//more stuffs

然后在此之上我再次使用其他功能主體執行此操作

$element.on({
    mouseenter: function(){
      //do something not special
    }, mouseleave: function(){
      //do something else not special
    }
});

jQuery如何處理呢？ 鼠標事件函數的第二個聲明會否覆蓋第一個？ 有時我看到兩種方法都有效，但有時卻不行。

Answer 1

鼠標事件函數的第二個聲明會否覆蓋第一個？

沒有。

jQuery如何處理呢？

它按照它們附加的順序執行事件處理程序。 從文檔 （大約40％）：

綁定到元素的事件處理程序的調用順序與其綁定的順序相同。

因此，例如，如果您有：

var div = $("#someDiv");
div.on("click", function() { console.log("one"); });
div.on("click", function() { console.log("two"); });
div.on("click", function() { console.log("three"); });

...然后單擊div將給您

one
two
three

...在控制台中。

請注意，如何找到要附加處理程序的元素並不重要。 假設您在頁面上只有一個div ，它的id "someDiv" ，並且它是body的第一個子"someDiv" （只是為了使選擇器易於操作）。 如果你有：

$("#someDiv").on("click", function() { console.log("one"); });
$(document.body).children().first().on("click", function() { console.log("two"); });
$("div").on("click", function() { console.log("three"); });

然后單擊div，您將獲得

one
two
three

...在控制台中。