js bubbling events and event listening usage analysis_javascript skills

Bubble event
"Bubble event (bubble)" in js is not a fancy trick that can be used in practice. It is a mechanism for executing the sequence of js events. "Bubble algorithm" is a classic problem in programming. The "bubble" in the bubble algorithm should be said to be exchange more accurately; the "bubble event" in js is the true meaning of "bubble". It traverses the tree layer by layer from the lowest level of the DOM, and then attaches the corresponding events. Take the following code as an example:

<title>Bubble event</title> <div onclick="Add('div事件触发 ')"> <p onclick="Add('p事件触发 ')" style="background:#c00;"> </p>Click</div> <div id="Console" style="border:solid 1px #ee0; background:#ffc;"> </div>
[Ctrl A Select all Note: If you need to introduce external Js, you need to refresh to execute

]

View the running effect
Event monitoring
To be precise, event monitoring can be said to be the operation of the js engine to monitor the user's mouse, keyboard, window events and other actions, that is, to attach events to the user's corresponding operations. Commonly used ones are similar to btnAdd.onclick=" alert('51obj.cn')" is a simple attached event, but this method does not support attaching multiple events and deleting events. The following code will implement deletion of events after attaching events (under IE):

<p id="pContent" style="border:solid 1px #d00; background:#cff;"> </p> Click
[Ctrl A Select all Note:

If you need to introduce external Js, you need to refresh to execute
]

View the running results

IE cannot be called a standard DOM browser. Even the latest IE8 is a "heterogeneous" compared to standard DOM such as Firefox, Opera, etc.; only in Firefox does there really exist a function called event listening function addEventListener, as shown in the following example<button id="btn"></button>
Click

[Ctrl A Select all Note:
If you need to introduce external Js, you need to refresh to execute
]

View the running effect From the above two examples, we can see that attachEvent is not supported in Firefox, and IE does not support addEventListener. Therefore, compatibility methods need to be used. <button id="btn"> </button>
www.jb51.net»»

[Ctrl A select all Note: If you need to introduce external Js, you need to refresh to execute ]