namespacing nhiều sự kiện sử dụng jquery "on"

Question

Tự hỏi những gì các phương pháp đúng để không gian tên nhiều sự kiện sử dụng jquery "on" ...

ví dụ:

$(".parent-selector").on({ 
"mouseenter.namespace": function() { 
    // mouseenter event 
}, 
"mouseleave.namespace": function() { 
    // mouseleave event 
} 
}, ".selector"); 

này không hoạt động .. Nếu tôi xóa ".namespace" thì nó hoạt động.

Ví dụ về jquery trên với không gian tên làm việc:

$(".parent-selector").on("mouseenter.namespace", ".selector", function() { }); 

Tôi hiểu rằng tôi có thể làm cả mouseenter/sự kiện MouseLeave seprately ... chỉ tò mò nếu có một cách để vượt qua không gian tên thông qua các đối tượng

Cảm ơn!

Answer 1

Để gắn với nhiều sự kiện mà bạn phải vượt qua một không gian tách ra danh sách các sự kiện:

$(".parent-selector").on("mouseenter.namespace mouseleave.namespace", 
         ".selector", function() { }); 

Edit:

Bạn luôn có thể nhận được các loại sự kiện bên trong gọi lại và gọi chức năng khác bên trong:

$(".parent-selector").on("mouseenter.namespace mouseleave.namespace", ".selector", function(e) { 
    if (e.type == "mouseenter.namespace") { 
     myMouseEnter(e); 
    } else if (e.type == "mouseleave.namespace") { 
     myMouseLeave(e); 
    } 
}); 

Từng có vẻ như hoạt động, tôi không thể xác nhận điều đó, vì tôi không ở trên máy của mình. Hãy thử một lần.

Answer 2

Từ những gì bạn đã nói trong nhận xét, bạn muốn kích hoạt một chức năng khác cho từng không gian tên. Có vẻ lạ bạn sẽ kết hợp chúng để muốn làm điều gì đó khác biệt. Nhưng nếu bạn muốn biết điều gì đã kích hoạt sự kiện, bạn có thể sử dụng event.type.

$("#foo").on("mouseover mouseout", ".bar", 
    function(evt){ 
     console.log(evt.type); 
    } 
); 

JSFiddle

Answer 3

Mã Dưới đây là thực sự đúng - Tôi đã có một vấn đề với namespacing mâu thuẫn trước đó trong các mã.

$(".parent-selector").on({ 
    "mouseenter.namespace": function() { 
     // mouseenter event 
    }, 
    "mouseleave.namespace": function() { 
     // mouseleave event 
    } 
}, ".selector");