Js bubble events and event listening code analysis bubble events
In js, "bubble" is not a fancy technique that can be used. It is a mechanism for executing the sequence of js events, the "bubble algorithm" is a classic problem in programming. The "bubble" in the bubble algorithm should be more accurate in exchange; the "bubble event" in js is the "bubble" in the true sense ", it traverses the tree layer by layer from the lowest DOM layer, and then attaches the corresponding event. The following code is used as an example:
<Title> bubble event </title> <script type = "text/javascript"> function Add (sText) {document. getElementById ("Console "). innerHTML + = sText;} script </pead> <body onclick = "Add ('body event trigger ') "> <p onclick =" Add ('P event trigger ') "> <p onclick =" Add ('P event trigger') "style =" background: # c00; "> click </p> <p id =" Console "style =" border: solid 1px # ee0; background: # ffc; "> </p> </body>
[Ctrl + A select all Note: If you need to introduce external Js, You need to refresh it to execute]
View running results
Event listening
To be precise, event monitoring is an operation performed by the js engine to monitor the user's mouse, keyboard, window events, and other actions, that is, additional events are performed for the user's corresponding operations, commonly used btnAdd. onclick = "alert ('51obj. cn ') "is a simple method of attaching events, but this method does not support appending and deleting events. The following code will delete the event after attaching the event (under 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" style = "border: solid 1px # d00; background: # cff; "> click </p>
[Ctrl + A select all Note: If you need to introduce external Js, You need to refresh it to execute]
View running results
IE cannot be called a standard DOM browser. Even the latest IE8 is a "heterogeneous" compared with standard DOM such as Firefox and Opera "; in Firefox, The addEventListener function is called event listening, as shown in 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 select all Note: If you need to introduce external Js, You need to refresh it to execute]
View running results
The above two examples show that attachEvent does not support Firefox, and IE does not support addEventListener. Therefore, compatibility is required.
<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 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> </body>
[Ctrl + A select all Note: If you need to introduce external Js, You need to refresh it to execute]