Bubbling events
JS "Bubbling Event" (bubble) is not a practical use of fancy techniques, it is a JS event execution sequence mechanism, "bubble algorithm" in the programming is a classic problem, bubble algorithm inside the "bubble" should be said to exchange more accurate; JS inside the "bubble event" is the real meaning of the bubble , it traverses the tree from the lowest layer of the DOM, and then attaches the corresponding event. Take the following code as an example:
<title> bubbling event </title> <script type= "Text/javascript" > Function Add (stext) {document.getElementById ( "Console"). InnerHTML +=stext; } </script> </pead> <body onclick= "Add (' body Event Trigger ')" > <div onclick= "Add (' div event trigger ')" > <p o nclick= "Add (' P Event trigger ')" > click </p> </div> <div id= "Console" ></div> </body>
[Ctrl + A All SELECT Note: If the need to introduce external JS need to refresh to perform]
View Run effects
Event Monitoring
The incident listens to be accurate to say is the JS engine to the user mouse, keyboard, the window event and so on action surveillance carries on the operation, namely is for the user corresponding operation to carry on the additional event, commonly used similar btnadd.onclick= "alert (' 51obj.cn ')" is simply an additional event, except that this method does not support attaching multiple events and deleting events. The following code will implement the Append event to delete the event (IE):
<script type= "Text/javascript" > <!–var OP; function Window.onload () {Op=document.getelementbyid ("pcontent"); Op.attachevent ("onclick", click); function Click () {alert ("do something"); Op.detachevent ("onclick", click); //–> </script> </pead> <body> <p id= "Pcontent" > Click </p>
[Ctrl + A All SELECT Note: If the need to introduce external JS need to refresh to perform]
View Run Results
IE can not be called standard Dom browser, even the latest IE8, compared to the standard Dom such as Firefox, opera, etc., it is a "heterogeneous"; in Firefox, there really is a function called event listening AddEventListener, as the following example
<script type= "Text/javascript" > <!–window.onload=function () {var Obtn=document.getelementbyid ("btn"); Obtn.addeventlistener ("click", Click,false); function Click () {alert ("Trigger click event"); }//–> </script> <button id= "BTN" > Click </button>
[Ctrl + A All SELECT Note: If the need to introduce external JS need to refresh to perform]
View Run effects
From the above two examples to 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.getelementbyid ("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 only executes once"); if (Window.addeventlistener) {Obtn.removeeventlistener ("click", Click,false); }//ff else if (window.attachevent) {obtn.detachevent ("onclick", click); } else{Obtn.onclick=null; }//–> </script> </pead> <body> <button id= "btn" >www.jb51.net»»</button> </bo dy>
[ CTRL + A All SELECT Note: If you need to introduce external JS need to refresh to perform]
