Due to holiday, the information can not be updated in time, sorry
Learning content:
Event object:
When a DOM event is triggered, an object is generated
Common Properties of events
Type: Get event types
Target: Gets the event target
The code is as follows:
<! DOCTYPE html>
<meta charset= "UTF-8" >
<title> Event Objects </title>
<body>
<button id= "btn" onclick= "" > Buttons </button>
</body>
<script>
document.getElementById ("Btn"). AddEventListener ("click", ShowType);
function ShowType (event) {
alert (event.type); Gets the type of the event "click", if modified to MouseOver can also
alert (event.target); Get the target of the event
}
</script>
Additional notes:
When you get the event type, the dialog box pops up and the dialog box displays the click
To get the event target, click the button and the popup box is as follows:
Common methods of events
Stoppropagation (): Block event bubbling
Preventdefault (): Block event default behavior
An example of what is event bubbling
The code is as follows:
<! DOCTYPE html>
<meta charset= "UTF-8" >
<title> Event Objects </title>
<body>
<div id= "div" >
<button id= "btn" onclick= "" > Buttons </button>
</div>
</body>
<script>
document.getElementById ("Btn"). AddEventListener ("click", ShowType);
document.getElementById ("div"). AddEventListener ("click", Showdiv);
function ShowType (event) {
alert (event.target);
}
function Showdiv (event) {
Alert ("div");
}
</script>Operation Result:
Click the button, pop up the dialog box, return the event target, close the dialog box, and then pop up the dialog box content "Div"
Although just click on the button, but the event is passed up, because the button belongs to the Div, this is the event bubbling, how to prevent the bubbling of events, add the following code
<! DOCTYPE html>
<meta charset= "UTF-8" >
<title> Event Objects </title>
<body>
<div id= "div" >
<button id= "btn" onclick= "" > Buttons </button>
</div>
</body>
<script>
document.getElementById ("Btn"). AddEventListener ("click", ShowType);
document.getElementById ("div"). AddEventListener ("click", Showdiv);
function ShowType (event) {
alert (event.target);
Event.stoppropagation (); Block event bubbling
}
function Showdiv (event) {
Alert ("div");
}
</script>
Block event bubbling, the first box pops up and does not eject the contents of the Showdiv function
Default behavior for blocking eventsWhat is the default behavior of the event, such as we add a connection, the connection text "Baidu" will default to Baidu page
Example: <a href= "http://www.baidu.com" > Baidu </a>The code is as follows:
<! DOCTYPE html>
<meta charset= "UTF-8" >
<title> Event Objects </title>
<body>
<div id= "div" >
<button id= "btn" onclick= "" > Buttons </button>
<a href= "http://www.baidu.com" id= "aid" > Baidu </a>
</div>
</body>
<script>
document.getElementById ("Btn"). AddEventListener ("click", ShowType);
document.getElementById ("div"). AddEventListener ("click", Showdiv);
document.getElementById ("Aid"). AddEventListener ("click", ShowA);
function ShowType (event) {
alert (event.target);
Event.stoppropagation ();
}
function Showdiv (event) {
Alert ("div");
}
function ShowA (event) {
Event.stoppropagation (); Stop the bubbling behavior, or jump out of the div first
Event.preventdefault (); Block default behavior, turn on Baidu
}
</script>Day Fourth: Event object (common two properties and two methods)
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
