trigger custom event without jQuery
Question
I'm triggering some DOM Events with jQuery triggerHandler()
<!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>
How can I trigger this without jQuery?
Important : I need to know the event type and the custom data
3 answers
solution1
15 ACCPTED 2015-04-27 14:24:28
If you want an exact replication of jQuery's behaviour, you're probably best off digging through the jQuery source code .
If you just want to do normal event dispatching and listening, see CustomEvent for how to dispatch an event with custom data and addEventListener for how to listen to it.
Your example would probably look something like
document.addEventListener('hey', function(customEvent)
{
console.log(customEvent.type + ' ' + customEvent.detail.user); // hey stackoverflow
});
document.dispatchEvent(new CustomEvent('hey', {'detail': {'user': 'stackoverflow'}}));
solution2
1 2015-04-27 14:23:56
您可以使用自定义事件并在所需元素上调度它们。
solution3
-1 2019-01-09 16:24:40
The quick & easy way:
$('#element').trigger("mycustomevent");
or for global event:
$(document).trigger("mycustomevent");
catching it:
$('#element').on("mycustomevent", function(e){
// do something
});
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.