Before learning custom event, in the MDN Event.initEvent () top of the page write: This feature is deleted from the Web standard, although some browsers still support it, but it might stop supporting in some future time Please try not to use this feature.
Instead, we can create custom objects by creating an Event object and CustomEvent objects. Start Event () object starts.
The Event () constructor object --Event
We can look at the example below to learn how to create a custom objects using Event ():
. 1 <Script type = "text / JavaScript">
2 / * create an event object, the name of NewEvent, type Build * /
. 3 var NewEvent = new new the Event ( 'Build', {bubbles: to true, cancelable: to true, Composed: } to true);
4
5 / * create the event object to a property and assignment * /
6 newEvent.name = "new event!";
7
8 / * custom event binding on the document object, bind here event to event type and we created the same, or can not trigger * /
9 document.addEventListener ( "Build", function () {
10 Alert ( "you trigger a custom event!" + newEvent.name);
11}, false )
12 is
13 / * custom trigger event * /
14 document.dispatchEvent (NewEvent);
15 </ Script>
Start time because of the document "document.dispatchEvent (newEvent)", it will first trigger an event:
Each time after you "document.dispatchEvent (newEvent)" will trigger this event:
Well, let's talk about grammar Event () to this method (disapthEvent () is described in my notes in another, not described here again a):
event = new Event(typeArg, eventInit);
typeArg : Specifies the type of event, passing a string. Here refers to the type of event like the click event (click), an event (submit), load event (load) and so on.
eventInit : Optional, passing EventInit type of dictionary. In fact this EventInit type of dictionary that is, we use InitEvent parameters (need to pass the time), with key-value pairs delivery form, but it can multi-select a parameter:
bubbles : whether to support the event bubbling, pass a boolean type parameter, the default value is false.
cancelable : whether to cancel the event's default behavior, pass a boolean type parameter, the default value is false.
the Composed : whether the event will trigger the shadow DOM (Shadow DOM) event listeners outside of the root node, pass a boolean type parameter, the default value is false. (About shadow DOM can see this article ChokCoco predecessors , is unknown here I said, maybe I'll write a note about the shadow DOM according to their own understanding) This parameter is a new parameter no InitEvent () in.
In fact, usage and use createEvent () combined initEvent () almost, but Event () does not support IE browser, so we still have to look how to use.
CustomEvent () constructor object --CustomEvent
CustomEvent () can () as an assignment like Event, but it can be used (separate from the main thread another thread) in the Web Workers, you can transfer events associated with the correlation value (detail). (But I'm a thief Event () you did not see the added Can I use Web Workers, to finish this look)
Let's look at the following examples of how to use CustomEvent () to create an event object (where the first correlation value is not used the event detail):
. 1 <Script type = "text / JavaScript">
2 / * create an event object, the name of NewEvent, type Build * /
. 3 var NewEvent = new new CustomEvent ( 'Build', {bubbles: to true, cancelable: to true, Composed: } to true);
4
5 / * this event object to create a property and assignment, where the event is bound to be and the type of event we created the same, or can not trigger * /
6 newEvent.name = "new event!";
7
8 / * custom event binding on the document object * /
9 document.addEventListener ( "Build", function () {
10 Alert ( "you trigger a custom event using CustomEvent created!" + newEvent.name);
}. 11, to false)
12 is
13 is / * custom trigger event * /
14 document.dispatchEvent (NewEvent);
15 </ Script>
Start time because of the document "document.dispatchEvent (newEvent)", it will first trigger an event:
Each time after you "document.dispatchEvent (newEvent)" will trigger this event:
Then we look at CustomEvent () syntax:
event = new CustomEvent(typeArg, customEventInit);
typeArg : Specifies the type of event, passing a string. Here refers to the type of event like the click event (click), an event (submit), load event (load) and so on.
customEventInit: Optional. Pass a CustomEventInit dictionary. In fact, this dictionary is that we use parameters required when initCustomEvent (), this parameter is the event-related values (detail):
detail: Alternatively, the default value is null, the type of any (that is to say any type of parameter that can be passed). And this value is the value associated with the event.
Before showing an example of the use of detail as the second argument, we must first pay attention to one thing: CustomEventInit dictionary can also accept parameters EventInit dictionary , as in the case as a start, I passed bubbles EventInit dictionary, cancelable, composed.
The following examples will demonstrate the use of detail parameters, to use part of the detail I would thickening process (for the convenience of watching, this time not to pass parameters EventInit in the dictionary):
. 1 <Script type = "text / JavaScript">
2 / * create an event object, the name of NewEvent, type Build * /
. 3 var NewEvent = new new CustomEvent ( 'Build', {
. 4 Detail: {
. 5 Dog: "WO" , CAT: "MIO"
. 6 }
. 7});
. 8
. 9 / * custom event bindings on a document object * /
10 document.addEventListener ( "Build", function () {
. 11 Alert ( "event.detail.dog : "+ event.detail.dog
12 is +" \ n-event.detail.cat: "+ event.detail.cat );
13 is}, to false)
14
15 / * custom trigger event * /
16 document.dispatchEvent (NewEvent) ;
17 </script>
Start time because of the document "document.dispatchEvent (newEvent)", it will first trigger an event:
Each time after you "document.dispatchEvent (newEvent)" will trigger this event:
References:
MDN - Creating and triggering Event: https://developer.mozilla.org/zh-CN/docs/Web/Guide/Events/Creating_and_triggering_events
MDN - Event()：https://developer.mozilla.org/zh-CN/docs/Web/API/Event/Event
MDN - CustomEvent()：https://developer.mozilla.org/zh-CN/docs/Web/API/CustomEvent/CustomEvent
MDN - CustomEvent.initCustomEvent()：https://developer.mozilla.org/en-US/docs/Web/API/CustomEvent/initCustomEvent
MDN - CustomEvent.detail：https://developer.mozilla.org/zh-CN/docs/Web/API/CustomEvent/detail
Before learning custom event, in the MDN Event.initEvent () top of the page write: This feature is deleted from the Web standard, although some browsers still support it, but it might stop supporting in some future time Please try not to use this feature.
Instead, we can create custom objects by creating an Event object and CustomEvent objects. Start Event () object starts.
The Event () constructor object --Event
We can look at the example below to learn how to create a custom objects using Event ():
. 1 <Script type = "text / JavaScript">
2 / * create an event object, the name of NewEvent, type Build * /
. 3 var NewEvent = new new the Event ( 'Build', {bubbles: to true, cancelable: to true, Composed: } to true);
4
5 / * create the event object to a property and assignment * /
6 newEvent.name = "new event!";
7
8 / * custom event binding on the document object, bind here event to event type and we created the same, or can not trigger * /
9 document.addEventListener ( "Build", function () {
10 Alert ( "you trigger a custom event!" + newEvent.name);
11}, false )
12 is
13 / * custom trigger event * /
14 document.dispatchEvent (NewEvent);
15 </ Script>
Start time because of the document "document.dispatchEvent (newEvent)", it will first trigger an event:
Each time after you "document.dispatchEvent (newEvent)" will trigger this event:
Well, let's talk about grammar Event () to this method (disapthEvent () is described in my notes in another, not described here again a):
event = new Event(typeArg, eventInit);
typeArg : Specifies the type of event, passing a string. Here refers to the type of event like the click event (click), an event (submit), load event (load) and so on.
eventInit : Optional, passing EventInit type of dictionary. In fact this EventInit type of dictionary that is, we use InitEvent parameters (need to pass the time), with key-value pairs delivery form, but it can multi-select a parameter:
bubbles : whether to support the event bubbling, pass a boolean type parameter, the default value is false.
cancelable : whether to cancel the event's default behavior, pass a boolean type parameter, the default value is false.
the Composed : whether the event will trigger the shadow DOM (Shadow DOM) event listeners outside of the root node, pass a boolean type parameter, the default value is false. (About shadow DOM can see this article ChokCoco predecessors , is unknown here I said, maybe I'll write a note about the shadow DOM according to their own understanding) This parameter is a new parameter no InitEvent () in.
In fact, usage and use createEvent () combined initEvent () almost, but Event () does not support IE browser, so we still have to look how to use.
CustomEvent () constructor object --CustomEvent
CustomEvent () can () as an assignment like Event, but it can be used (separate from the main thread another thread) in the Web Workers, you can transfer events associated with the correlation value (detail). (But I'm a thief Event () you did not see the added Can I use Web Workers, to finish this look)
Let's look at the following examples of how to use CustomEvent () to create an event object (where the first correlation value is not used the event detail):
. 1 <Script type = "text / JavaScript">
2 / * create an event object, the name of NewEvent, type Build * /
. 3 var NewEvent = new new CustomEvent ( 'Build', {bubbles: to true, cancelable: to true, Composed: } to true);
4
5 / * this event object to create a property and assignment, where the event is bound to be and the type of event we created the same, or can not trigger * /
6 newEvent.name = "new event!";
7
8 / * custom event binding on the document object * /
9 document.addEventListener ( "Build", function () {
10 Alert ( "you trigger a custom event using CustomEvent created!" + newEvent.name);
}. 11, to false)
12 is
13 is / * custom trigger event * /
14 document.dispatchEvent (NewEvent);
15 </ Script>
Start time because of the document "document.dispatchEvent (newEvent)", it will first trigger an event:
Each time after you "document.dispatchEvent (newEvent)" will trigger this event:
Then we look at CustomEvent () syntax:
event = new CustomEvent(typeArg, customEventInit);
typeArg : Specifies the type of event, passing a string. Here refers to the type of event like the click event (click), an event (submit), load event (load) and so on.
customEventInit: Optional. Pass a CustomEventInit dictionary. In fact, this dictionary is that we use parameters required when initCustomEvent (), this parameter is the event-related values (detail):
detail: Alternatively, the default value is null, the type of any (that is to say any type of parameter that can be passed). And this value is the value associated with the event.
Before showing an example of the use of detail as the second argument, we must first pay attention to one thing: CustomEventInit dictionary can also accept parameters EventInit dictionary , as in the case as a start, I passed bubbles EventInit dictionary, cancelable, composed.
The following examples will demonstrate the use of detail parameters, to use part of the detail I would thickening process (for the convenience of watching, this time not to pass parameters EventInit in the dictionary):
. 1 <Script type = "text / JavaScript">
2 / * create an event object, the name of NewEvent, type Build * /
. 3 var NewEvent = new new CustomEvent ( 'Build', {
. 4 Detail: {
. 5 Dog: "WO" , CAT: "MIO"
. 6 }
. 7});
. 8
. 9 / * custom event bindings on a document object * /
10 document.addEventListener ( "Build", function () {
. 11 Alert ( "event.detail.dog : "+ event.detail.dog
12 is +" \ n-event.detail.cat: "+ event.detail.cat );
13 is}, to false)
14
15 / * custom trigger event * /
16 document.dispatchEvent (NewEvent) ;
17 </script>
Start time because of the document "document.dispatchEvent (newEvent)", it will first trigger an event:
Each time after you "document.dispatchEvent (newEvent)" will trigger this event:
References:
MDN - Creating and triggering Event: https://developer.mozilla.org/zh-CN/docs/Web/Guide/Events/Creating_and_triggering_events
MDN - Event()：https://developer.mozilla.org/zh-CN/docs/Web/API/Event/Event
MDN - CustomEvent()：https://developer.mozilla.org/zh-CN/docs/Web/API/CustomEvent/CustomEvent
MDN - CustomEvent.initCustomEvent()：https://developer.mozilla.org/en-US/docs/Web/API/CustomEvent/initCustomEvent
MDN - CustomEvent.detail：https://developer.mozilla.org/zh-CN/docs/Web/API/CustomEvent/detail