Home > Developer > JavaScript
Event bubbling
Event Capture: parent-level elements are triggered first, and child-level elements are triggered later.
Event bubbling: Child-level elements are triggered first, and parent-level elements are triggered later.
Currently, in IE and FF, trigger events are basically event bubbles and executed from inside to outside.
<! Doctype HTML public "-// W3C // dtd xhtml 1.0 transitional // en" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<HTML xmlns = "http://www.w3.org/1999/xhtml">
When you click div2, "internal" is displayed first, and "external" is displayed. This is the event bubble.
Prevent event bubbles
Method:
Function stopbubble (event) {If (event & event. stoppropagation) {event. stoppropagation () ;}else {window. event. cancelbubble = true ;}}
Usage:
// Monitor when the user moves the mouse over the element. // Add a red border uniondom [I] to the element. onmouseover = function (e) {This. style. border = "1px solid red"; stopbubble (e );};Get event Source:
Function (event) {var E = event | window. event; var ELEM = E. srcelement | e.tar get; alert (ELEM. ID); // ELEM is the event source}
Refer:
Javascript event bubbling and event capture
Javascript prevents bubble events, event source target, and current target currenttarget
Javascript prevents event bubbling and default browser behavior
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
