Home > Developer > JavaScript
Related reading:
JavaScript Event Learning Summary (v) Event type mouse events in JS
Http://www.jb51.net/article/86259.htm
JavaScript Event Learning Summary (i) Event flow
Http://www.jb51.net/article/86261.htm
A summary of JavaScript event Learning (iv) Public members of events (properties and methods)
Http://www.jb51.net/article/86262.htm
A summary of JavaScript event Learning (ii) JS event handler
Http://www.jb51.net/article/86264.htm
JavaScript Event Learning Summary (iii) JS event object
One, public members of the event object
1. Public members of event in Dom
The event object contains the properties and methods associated with the specific event that created it. The event types that are triggered are not the same, and the available properties and methods are different. However, all events in the DOM have the following public members.
A, contrasting currenttarget and target
Within an event handler, object this is always equal to the value of Currenttarget, and Target is just the actual target of the event.
For example: The page has a button, in the body (the button's parent) to register the click event, click the button when the Click event bubbles to the body to handle.
<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 results of the operation are:
b, through the Type property, you can handle multiple events in a function.
Principle: By detecting the Event.type attribute, the different events are handled differently.
For example: Define a handler function to handle 3 kinds 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 on the button, pop-up box. The mouse passes the button, the button background color turns pink; the mouse leaves the button and the background color restores the default.
C, Stoppropagation () and stopimmediatepropagation () contrast
Same: Stoppropagation () and stopimmediatepropagation () can be used to cancel further capture or bubbling of events.
Different: The difference is that when an event has multiple event handlers, Stopimmediatepropagation () can block the event handler from being invoked.
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 View effect
//Event.stopimmediatepropagation ()//Uncomment view effect
},false);
Btn.addeventlistener ("click", Function () {
console.log ("button click listened twice");
document.body.onclick= function (event) {
console.log ("Body clicked");
}
</script>
</body>
Operation Effect:
D, Eventphase
The Eventphase value is 1 in the capture phase, in the target phase of 2, and the bubbling phase is 3.
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 adds an event handler eventphase value is? "+event.eventphase);
}
Btn.addeventlistener ("Click", the function (event) {
console.log ("button DOM2-level method adds an event handler, And AddEventListener when the third argument is true Eventphase value is? "+event.eventphase);
},true)
; Btn.addeventlistener ("Click", the function (event) {
console.log ("button DOM2-level method adds an event handler, And AddEventListener when the third argument is false Eventphase value is? "+event.eventphase);
},false)
; Document.body.addEventListener ("click", Function (event) {
console.log ("Add event handler on body, and eventphase value in capture phase?") "+event.eventphase);
},true)
; Document.body.addEventListener ("click"), the function (event) {Console.log (""), and
eventphase the value in the bubbling phase? "+event.eventphase);
},false)
; </script>
Operation Effect:
2, the public member of the event in IE
The properties and methods of an event in IE are the same as the DOM, depending on the type of event, but some are public members of all objects, and most of them have corresponding DOM properties or methods.
The above is small set to introduce the JavaScript Event learning Summary (iv) event of the public members (attributes and methods) of the relevant knowledge, hope to help everyone, if you have questions welcome to my message!
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
