Bubble event
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> </pead> <body onclick = "Add ('body event trigger ') "> <p onclick =" Add ('P event trigger ') "style =" background: # c00; "> click </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 ):
</Head> <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:
<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.
</Head> <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]