Home > Developer > Web Develop
Element.addeventlistener (event, function, Usecapture)
The parameter usecapture is optional. A Boolean value that specifies whether the event is executed during the capture or bubbling phase.
Possible values:
True-the event handle is executed during the capture phase
false-false-default. Event handles are executed during the bubbling phase
Http://www.runoob.com/try/try.php?filename=tryjsref_element_addeventlistener_capture
View Case: This example demonstrates the difference between the bubbling and capturing phases when adding an event listener.
<! DOCTYPE html>
<meta charset= "Utf-8" >
<title> Rookie Tutorial (runoob.com) </title>
<style>
Div
{
Background-color:coral;
BORDER:1PX solid;
padding:50px;
}
</style>
<body>
<p> This example demonstrates the difference between the bubbling and capturing phases when adding an event listener. </p>
<div id= "Mydiv" >
<p id= "MyP" > click on the paragraph, I am bubbling </p>
</div><br>
<div id= "MyDiv2" >
<p id= "MyP2" > click on the paragraph, I am capturing </p>
</div>
<script>
document.getElementById ("MyP"). AddEventListener ("click", Function ()
{
Alert ("You clicked the P element!");
}, False);
document.getElementById ("Mydiv"). AddEventListener ("click", Function ()
{
Alert ("You clicked on the DIV element!");
}, False);
document.getElementById ("MyP2"). AddEventListener ("click", Function ()
{
Alert ("You clicked the P element!");
}, True);
document.getElementById ("MyDiv2"). AddEventListener ("click", Function ()
{
Alert ("You clicked on the DIV element!");
}, True);
</script>
</body>
HTML DOM AddEventListener () method Note
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
