Home > Developer > Web Develop
-Event bubbling and capturing
-Event Monitoring
--Block event propagation
One, event bubbling and capturing
1, concept : When the child element and the parent element defined the same event, such as the onclick event is defined, click the child element, the parent element's OnClick event will also be triggered. JS says the mechanism for this event to occur continuously is event bubbling or event capture.
IE : events occur from inside out, events start from the most accurate object (target), and then trigger on the most imprecise object (document), which is event bubbling
Netscape: Events occur from the outside, events start at the most imprecise object (document), and then trigger on the most precise object (target),
That is, event capture
2, the standard of the two will be neutralized, in any of the event model,
Events go into the capture phase and then into the bubbling phase
3, the general way of binding events
Div1.onclick=function () {
Alert (' div is clicked ');
};
In a browser that supports the DOM , the usual way to bind events is to use event bubbling mode.
Programmers can choose whether to use event capture or event bubbling when binding an event,
The way to do this is to bind the event through the AddEventListener () method
Second, event monitoring
1. Browsers that support the Internet standard can use the AddEventListener (type,fn,usecapture) method when binding events
Parameters:Type----------Event types, example: click
fn--------------event handler function
usecapture----Boolean value TRUE or False
(True indicates event capture,false indicates event bubbling )
The third parameter is generally set to false in order to be compatible with a browser
Event Monitoring: AddEventListener (type,fn,usecapture)
Event removal:removeeventlistener (Type, FN, usecapture)
2, because IE678 only supports event bubbling, does not support event capture, so it does not support the AddEventListener () method, IE provides another function:
Attachevent (Type, fn)
Parameters: Type---------Event types, example: OnClick
FN-------------event handler function
No third parameter
Event Listener:attachevent (Type, fn)
Event removal:detachevent (Type, fn)
Iii. preventing the spread of events
event bubbling or event capture has characteristics that propagate
Ways to block Event propagation:
Use Event.stoppropagation () in the user's list;
Use event.cancelbubble=true in IE;
var event=ev| | window.event;
if (event.stoppropagation) {
Event.stoppropagation ();//non-IE block event propagation
}else{
Event.cancelbubble=true;//ie Block Event bubbling
}
Iv. blocking Default events
var event=ev| | Event
if (Event.preventdefault) {
Event.preventdefault (); Non IE block default events
} else{
Event.returnvalue=false; IE block Default events
};
return false; The code encounters an immediate stop execution, jumping out of an executing function, equivalent to a terminator, which can be used to block the default event
PS: Note the use of location, can not abuse
Five, the Code
Example of an organization event propagation:
1<! DOCTYPE html>234<meta charset= "UTF-8" >5<title> Block Event Propagation </title>6<style>7*{margin:0;padding:0;list-Style:none;}8 ul{width:500px;height:300px;background: #ccc;}9 Li{width:300px;height:150px;background:pink;}Ten P{width:100px;height:100px;background:blue;} One</style> A -<body> -<ul> the<li> -<p></p> -</li> -</ul> +<script> - varUl=document.getelementsbytagname (' ul ') [0]; + varLi=document.getelementsbytagname (' li ') [0]; A varP=document.getelementsbytagname (' P ') [0]; atul.onclick=function(){ -Alert (' I am ul '); - } -li.onclick=function(EV) { -Alert (' I am li '); - vare=window.event| |ev; in if(e.stoppropagation) {//organization events propagate to parent - e.stoppropagation (); to //Non-IE block event propagation (Internet Explorer) +}Else { -e.cancelbubble=true; the //IE block event propagation (ie) * } $ }Panax Notoginsengp.onclick=function(){ -Alert (' I am P '); the } + A</script> the</body> +Custom Right-click menu exercises:
1<! DOCTYPE html>234<meta charset= "UTF-8" >5<title></title>6<style>7*{margin:0;padding:0;}8 Div{width:150px;height:300px;background:pink;display:none;position:absolute;}9 span{color:red;}Ten</style> One A<body> -<div> -<span> first Page </span> the<span> Next </span> -<span> Refresh </span> -</div> -<script> + varDiv=document.getelementsbytagname (' div ') [0]; -document.oncontextmenu=function(EV) {//Menu Right-click event +Div.style.display= ' Block '; A vare=window.event| |ev; at if(E.preventdefault) {//organize default right-click events - E.preventdefault (); -}Else{ -E.returnvalue=false; - } - varWinh=Document.documentElement.clientHeight; in varwinw=Document.documentElement.clientWidth; - varDivh=Div.offsetheight; to vardivw=Div.offsetwidth; + varx=E.clientx; - vary=E.clienty; the if(winh-y<DIVH) { *Div.style.top= (Y-DIVH) + ' px '; $}Else {Panax Notoginsengdiv.style.top=y+ ' px '; - } the if(winw-x<DIVW) { +Div.style.left= (X-DIVW) + ' px '; A}Else { thediv.style.left=x+ ' px '; + } - $ } $</script> -</body> -[JS] Note 12 event mechanism-event bubbling and capturing-event monitoring-block event propagation
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
