Related readings:
JavaScript Event Learning Summary (V) Mouse Event Type in JS
//www.VeVB.COM/article/86259.htm
JavaScript Event Learning Summary (I) Event Flow
//www.VeVB.COM/article/86261.htm
JavaScript event learning summary (IV) Public members of event (properties and methods)
//www.VeVB.COM/article/86262.htm
JavaScript event learning summary (II) js event handler
//www.VeVB.COM/article/86264.htm
JavaScript event learning summary (III) js event object
1. Public members of the event object
1. Public members of event in DOM
The event object contains properties and methods related to the specific event that created it. The types of events triggered are different, and the available properties and methods are different. However, all events in the DOM have the following public members.
a. Comparison of currentTarget and target
Inside the event handler, the object this always equals the value of the currentTarget, and the target just contains the actual target of the event.
For example: There is a button on the page, register the click event in the body (the parent node of the button). When the button is clicked, the click event will bubble to the body for processing.
<body><input id="btn" type="button" value="click"/><script> document.body.onclick=function(event){ console.log("click event registered in body"); console.log("this===event.currentTarget? "+(this===event.currentTarget)); //true console.log("currentTarget===document.body?"+(event.currentTarget===document.body)); //true console.log('event.target===document.getElementById("btn")? '+(event.target===document.getElementById("btn"))); //true }</script></body>The running result is:
b. Through the type attribute, multiple events can be handled in a function.
Principle: Different events are handled differently by detecting the event.type attribute.
For example: Define a handler function to handle 3 types of events: click, mouseover, mouseout.
<body><input id="btn" type="button" value="click"/><script>var handler=function(event){ switch (event.type){ case "click": alert("clicked"); break; case "mouseover": event.target.style.backgroundColor="pink"; break; case "mouseout": event.target.style.backgroundColor=""; }}; var btn=document.getElementById("btn"); btn.onclick=handler; btn.onmouseover=handler; btn.onmouseout=handler;</script></body>Run effect: Click the button and the box pops up. When the mouse passes through the button, the background color of the button becomes pink; when the mouse leaves the button, the background color returns to the default.
c. Comparison of stopPropagation() and stopImmediatePropagation()
Same: stopPropagation() and stopImmediatePropagation() can be used to cancel further capture or bubbling of events.
Different: The difference between the two is that when an event has multiple event handlers, stopImmediatePropagation() can prevent the event handler from being called later.
For example:
<body><input id="btn" type="button" value="click"/><script> var btn=document.getElementById("btn"); btn.addEventListener("click",function(event){ console.log("buttn click listened once");// event.stopPropagation();//Uncomment viewing effect// event.stopImmediatePropagation();//Uncomment viewing effect},false); btn.addEventListener("click",function(){ console.log("button click listened twice"); },false); document.body.onclick= function (event) { console.log("body clicked"); }</script></body>Running effect:
d, eventPhase
The eventPhase value is 1 in the capture phase, 2 in the target phase, and 3 in the bubble phase.
example:
<body><input id="btn" type="button" value="click"/><script>var btn=document.getElementById("btn");btn.onclick= function (event) { console.log("button DOM0-level method add event handler eventPhase value is?"+event.eventPhase);}btn.addEventListener("click",function(event){ console.log("button DOM2-level method adds event handler, and the eventPhase value is "+event.eventPhase);},true);btn.addEventListener("click",function(event){ console.log("button DOM2-level method adds event handler, and the eventPhase value is "+event.eventPhase);},false); document.body.addEventListener("click", function (event) { console.log("body adds event handler, and the eventPhase value is "+event.eventPhase); },true);document.body.addEventListener("click", function (event) { console.log("body adds event handler, and the eventPhase value is "+event.eventPhase);},false);</script>Running effect:
2. Public members of event in IE
The properties and methods of events in IE will vary from event type to DOM, but some are public members that all objects have, and most of these members have corresponding DOM properties or methods.
The above is the relevant knowledge of the public members (attributes and methods) of the event that the editor introduced to you (IV) and I hope it will be helpful to you. If you have any questions, please leave me a message!