Home > Developer > Web Develop
The bubbling event and event monitoring in JS
Bubbling Event
JS "Bubble Event" is not practical use of fancy tricks, it is a sequence of JS event execution mechanism, "bubbling algorithm" in the programming is a classic problem, bubbling algorithm inside the bubble should be said to be more accurate exchange, JS inside the "bubble event" is the real meaning of "bubbling", It traverses the tree at the lowest level of the DOM and then appends the corresponding events. Take the following code as an example:
<title> Bubbling Events </title>
<script type= "Text/javascript" >
function Add (stext)
{
Document.getelementbyidx_x_x ("Console"). InnerHTML +=stext;
}
</script>
<body onclick= "ADD (' body event trigger <br/> ')" >
<div onclick= "Add (' div event trigger <br/> ')" >
<p onclick= "Add (' P Event trigger <br/> ')" style= "background: #c00;" > Click </p>
</div>
<div id= "Console" style= "Border:solid 1px #ee0; Background: #ffc; " ></div>
</body>The event of P is executed first, then the Div event is executed, and the body event is finally executed.
Event Monitoring
Event monitoring is accurate to say is the JS engine on the user's mouse, keyboard, window events and other actions of the operation, that is, for the user corresponding operation of the additional events, commonly used similar to btnadd.onclick= "alert (' 51obj.cn ')" is a simple add-on event, except that this method does not support attaching multiple events and deleting events. The following code implements the Delete event after an additional event (IE):
<script type= "Text/javascript" >
<!–
var OP;
function Window.onload () {
Op=document.getelementbyidx_x_x ("Pcontent");
Op.attachevent ("onclick", click);
}
function Click () {
Alert ("Do something");
Op.detachevent ("onclick", click);
}
–>
</script>
<body>
<p id= "pcontent" style= "Border:solid 1px #d00; Background: #cff; " > Click </p>
IE is not called the standard Dom browser, even the latest IE8, compared to standard Dom such as Firefox, Opera and so on, it is a "heterogeneous", in Firefox is really called event monitoring function AddEventListener, the following example
<script type= "Text/javascript" >
<!–
Window.onload=function () {
var obtn=document.getelementbyidx_x_x ("btn");
Obtn.addeventlistener ("click", Click,false);
}
function Click () {
Alert ("Trigger click event");
}
–>
</script>
<button id= "BTN" > Click </button>
From the above two examples see attachevent in Firefox does not support, IE also does not support AddEventListener. Therefore, you need to use a compatibility method.
<script type= "Text/javascript";
<!–
var obtn;
Window.onload=function () {
obtn=document.getelementbyidx_x_x ("btn");
if (window.addeventlistener) {
Obtn.addeventlistener ("click", Click,false);
}//ff,opera ...
else if (window.attachevent) {
Obtn.attachevent ("onclick", click,false);
}//ie
else{
oBtn.onclick=Click;
}//other
}
function Click () {
Alert ("event is performed only once");
if (Window.addeventlistener) {
Obtn.removeeventlistener ("click", Click,false);
}//ff
else if (window.attachevent) {
Obtn.detachevent ("onclick", click);
}
else{
Obtn.onclick=null;
}
}
–>
</script>
<body>
<button id= "BTN" >www.51obj.cn»»</button>
</body>
*************************************************************************
In Firefox, opera, ie block bubble event is different code, Firefox uses event.stoppropagation (), and IE under the use of Cancelbubble,jquery You can use E.stoppropagation () to be compatible, and if it is purely JavaScript requires the following code to unify:
if (event.stoppropagation) {
This code was for Mozilla and Opera
Event.stoppropagation ();
}
else if (window.event) {
This code was for IE
Window.event.cancelBubble = true;
}
It will be compatible.
$ ("#msg"). Bind ("click", Function (e) {
Alert ("div click");
E.stoppropagation ();
});
*************************************************************************
Event.preventdefault ()
This method notifies the Web browser not to perform the default action associated with the event (if such an action exists). For example, if the type attribute is "submit", any event handle can be called at any stage of event propagation, and by calling the method, you can prevent the form from being submitted. Note that if the Cancelable property of the Event object is Fasle, there is no default action, or the default action cannot be blocked. In either case, calling the method has no effect.
Event.stoppropagation ()
This method stops the propagation of the event and prevents it from being dispatched to other Document nodes. It can be called at any stage of event propagation. Note that although this method does not prevent other event handles on the same Document node from being called, it can prevent events from being dispatched to other nodes.
Event is a DOM method of events, so it is not used alone, such as specifying DOM
jquery's Bubbling Event event.stoppropagation ()
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
