2015-04-27 14 views
12

Tôi đang kích hoạt một số sự kiện DOM với jQuery triggerHandler()kích hoạt sự kiện tùy chỉnh mà không cần jQuery

<!DOCTYPE html> 
 
<html> 
 
<head> 
 
    <title>stackoverflow</title> 
 
    <script src="http://ajax.googleapis.com:80/ajax/libs/jquery/2.1.3/jquery.min.js"></script> 
 
</head> 
 

 
<body> 
 
    <script> 
 
    $(document).ready(function() { 
 
     $(document).on('hey', function(customEvent, originalEvent, data) { 
 
     console.log(customEvent.type + ' ' + data.user); // hey stackoverflow 
 

 
     }); 
 

 
     // how to this in vanilla js 
 
     $(document).triggerHandler('hey', [{}, { 
 
     'user': 'stackoverflow' 
 
     }]) 
 
    }); 
 
    </script> 
 
</body> 
 

 
</html>

Làm thế nào tôi có thể kích hoạt này mà không cần jQuery?

quan trọng: Tôi cần phải biết loại sự kiện và dữ liệu tùy chỉnh

+1

Theo bao gồm jQuery sẽ được sử dụng document.addEventListener ('hey', function() {...}); nơi này là nhấp chuột, mousedown vv Đó có phải là những gì bạn có ý nghĩa? – garryp

+0

Đọc nguồn jQuery sẽ cho bạn thấy nó được thực hiện như thế nào, vì jQuery là JavaScript. –

+0

Theo như tôi nhớ, jquery kết hợp '.dispatchEvent' và' .fireEvent' cho triggerHandler. Bạn có thể dễ dàng viết một hàm để thử một hoặc cái khác. sự kiện công văn sẽ hoạt động trên hầu hết các trình duyệt. – David

Trả lời

10

Nếu bạn muốn chính xác sao chép hành vi của jQuery, có lẽ bạn tốt nhất nên đào qua jQuery source code.

Nếu bạn chỉ muốn gửi và gửi sự kiện bình thường, hãy xem CustomEvent để biết cách gửi sự kiện với dữ liệu tùy chỉnh và addEventListener để biết cách nghe.

dụ của bạn có lẽ sẽ giống như thế

document.addEventListener('hey', function(customEvent) 
{ 
    console.log(customEvent.type + ' ' + customEvent.detail.user); // hey stackoverflow 
}); 
document.dispatchEvent(new CustomEvent('hey', {'detail': {'user': 'stackoverflow'}})); 
+2

Phương thức khởi tạo 'CustomEvent' không hỗ trợ trong IE. – Johnston

+2

@Johnston Nhưng có vẻ như có [polyfill cho nó] (https://github.com/krambuhl/custom-event-polyfill/blob/master/custom-event-polyfill.js). – Siguza

+0

Có và nó hoạt động tuyệt vời – Johnston

1

Bạn có thể sử dụng Custom Events và gửi chúng trên yếu tố mà bạn muốn.

Các vấn đề liên quan