Home > Developer > JavaScript
When triggering an event on the DOM, an event object is generated that contains all the information related to the event. Contains the elements that caused the event, the type of the event, and other information related to the specific event. All browsers support event objects, but they are supported in different ways.
The event object itself is a constructor that can be used to generate a new instance.
New Event (Typearg, eventinit);
The event constructor accepts two parameters. The first parameter is a string that represents the event name, and the second argument is an object that represents the configuration of the event object.
var New Event (' click ', {' bubble ':true, ' cancelable ':false});d ocument.dispatchevent (EV);The Bubbles property returns a Boolean value that indicates whether the current time is bubbling, which is a read-only property and can only be changed when a new event is created, and the default value is False.
(2) EventphaseThe Eventphase property returns an integer that represents the node where the event is currently located: 1 for the capture phase, 2 for the target stage, and 3 for the bubbling phase
3, 2 cancelable, defaultpreventedThe subordinate sex is related to the default behavior of the event.
(1) cancelableThe Cancelable property returns a Boolean value that indicates whether the event can be canceled. This property is read-only and can only be changed when a new event is created, and the event constructor generates an object with a default value of FALSE. If you want to cancel an event, you need to call the Preventdefault method at this time, which blocks the browser's default behavior.
(2) defaultpreventedThe Defaultprevented property returns a Boolean value that indicates whether the event has called the Preventdefault method.
3, 3 Currenttarget, TargetThe subordinate sex is related to the target node of the event.
The Currenttarget property returns the node on which the event is currently located, that is, the node that the listener executing is bound to , and the target property returns the node on which the event occurred. If the listener function is in the capture and bubbling stages, the values returned by the two properties are not the same.
<!DOCTYPE HTML><HTMLLang= "en"><Head> <MetaCharSet= "UTF-8"> <title>Currenttarget and Target</title></Head><Body> <PID= "Para1">Test<em>Currenttarget</em> </P> <PID= "Para2">Test<em>Target</em> </P></Body>
<Script>VarPara1=Document.queryselector (‘#para1‘);VarPara2=Document.queryselector (‘#para2‘); Para1.addeventlistener (‘Click‘, Hide1,False); Para2.addeventlistener (‘Click‘, Hide2,False);functionHide1 (e) {Console.log (this ==== "hidden ' ;} function Hide2 (e) {console.log (this === E.target);//Not necessarily true e.target.style.visibility = ' ;} </script> </HTML>
3, 4 type, detail, timestampm istrusted
The subordinate is related to other information about the event object.
(1) TypeThe Type property returns a String that represents the event type, with the same value as the first parameter of the AddEventListener method.
(2) Detailvar string = Event.type
The Detail property returns a numeric value that represents some of the properties of the event. The specific meaning is related to the event type, and for mouse events, the number of times a mouse event is pressed in a location.
(3) TimeStampThe timestamp property returns a millisecond timestamp indicating when the event occurred
(4) istrustedThe IsTrusted property returns a Boolean value that indicates whether the event can be trusted. In the Firefox browser, the user-triggered event returns true, and the script-triggered event returns to the False;ie browser, except for events generated using the CreateEvent method, all other events are returned true;chrome the browser does not support this property.
3, 5 preventdefault (), Stoppropagation (), Stopimmediatepropagation () (1) preventdefault ()The Preventdefault method cancels the browser's default behavior for the current event, and if Cancelable is true, the method can be used.
(2) Stoppropagation ()The Stoppropagation method prevents events from continuing to propagate in the DOM, preventing the listener functions that are defined on other nodes from being triggered, but not including the newly defined event listener functions on the current node.
(3) Stopimmediatepropagation ()The Stopimmediatepropagation method prevents other listener functions of the same event from being called. If multiple listener functions are invoked on an event by the same node, the listener functions are executed sequentially, but if one of the functions calls the method, the other functions that follow will no longer execute.
JavaScript Event Learning (3)-event Object
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
