Shulou(Shulou.com)06/02 Report--

How to use dispatchEvent custom event trigger, I believe that many inexperienced people do not know what to do, so this article summarizes the causes of the problem and solutions, through this article I hope you can solve this problem.

Window.addEventListener & & window.dispatchEvent

1. Standard browsers provide a method that can be triggered by elements: element.dispatchEvent (), which needs to be created and initialized before use. Here is the specific usage:

Examples in vue:

1. Create an event object instance 2. 0 with var event = document.createEvent ("HTMLEvents"); this method. Initialize an aaa event through event.initEvent ("aaa", true, true) with / / 3 parameters: event type, whether to bubble, and whether to block the browser's default behavior.

Note: / * attribute, you can define it by yourself * /

Event.name = 'hello, I'm Xiao Li'

Event.message ='I am 18 years old'

3. Then the custom event aaathis.$nextTick is triggered by the window.dispatchEvent (event); method (tick = > {var event = document.createEvent ("HTMLEvents"); event.initEvent ("aaa", true, true); window.dispatchEvent (event);})

4. Finally, on the page where you need to listen for the event, you can monitor the execution of the event through window.addEventListener ('aaa', function () {}).

Window.addEventListener ('aaa', function (event) {console.log (event.name+','+event.message);}, false)

/ / the console can print out the monitoring results: hello, I'm Xiao Li. I'm 18 years old.

DispatchEvent is about these three steps.

Let's take a look at another piece of code, non-IE mainstream browsers and event triggers under IE.

Var fireEvent = function (element,event) {if (document.createEventObject) {/ / IE browser supports fireEvent method var evt = document.createEventObject (); return element.fireEvent ('on'+event,evt)} else {/ / other standard browsers use dispatchEvent method var evt = document.createEvent (' HTMLEvents'); evt.initEvent (event, true, true) Return! element.dispatchEvent (evt);}}

Document.creatEventObject () is the way IE creates instances of event objects, just like document.creatEvent ('HTMLEvents') does in non-IE mainstream browsers. FireEvent is an event trigger in IE, the same as dispatchEvent in non-IE mainstream browsers.

After reading the above, have you learned how to use dispatchEvent custom event triggers? If you want to learn more skills or want to know more about it, you are welcome to follow the industry information channel, thank you for reading!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.