Shulou(Shulou.com)06/02 Report--

This article mainly explains the "JavaScript event mechanism example analysis", the article explains the content is simple and clear, easy to learn and understand, now please follow the editor's train of thought slowly in depth, together to study and learn "JavaScript event mechanism example analysis" bar!

Event flow

JavaScript events exist in the form of a stream, and multiple elements of an event respond at the same time. Sometimes this is not what we want, we just need a specific element to respond to our binding event.

Event classification

Capture events (non-IE), bubble events (supported by all browsers)

Capture events are top-down, while bubble events are bottom-up. Let me use a diagram to show it visually:

We may encounter bubbling events more often in our work, but how can captured events be executed? if we want to create captured events in non-IE browsers, just set the third parameter of addEventListener to true.

The two elements of ID for div1 and div2 are bound to the event handlers of the capture phase, so that:

When you click # div1 (blue area), you should alert "div1".

When you click # div2 (yellow area), you should first alert "div1" and then alert "div2", because in the event capture phase, the event is propagated downward from the root element, # div1 is the parent element of # div2, and the click event naturally bound to # div1 is also executed before the click event on # div2.

Examples of bubble events:

0102030405 Bubble event 0607var I

= 1 10document.getElementById 08 function Add (sText,objText) 09 {10document.getElementById ("Console") [xss_clean]

+ = sText + "execution order:" +

I + "+"; 11i

= I + 1 + 1 + 12 shock window.event.cancelBubble

= true;13} 141516171819 Click

2021222324

From this example we can clearly see that the event bubbling rises from the target element P to the body element.

Prevent the event from bubbling

Here is a function that is compatible with IE and other browsers to prevent event bubbling

1function stopBubble (e)

{2max / if an event object is provided, this is a non-IE browser 3if (

E & & e.stopPropagation) 4gamble / so it supports the W3C stopPropagation () method 5e.stopPropagation (); otherwise, we need to use IE to cancel the event bubbling 8window.event.cancelBubble

= true;9}

There is no stopPropagation method in IE, but we can use window.event.cancelBubble to prevent events from bubbling.

Listening function

IE: attachEvent 、 detachEvent

Non-IE: addEventListener, removeEventListener

In addition to the above four functions, a more general method is document.getElmentById (element ID). Onclick = function () {}

Event object

When an event is triggered, how can you get the event object in the listener function execution function? Use window.event.srcElement in IE and e.currentTarget in non-IE browsers

Example code:

01btn.onclick

= ctdClickEvent;0203function ctdClickEvent (e) 04 {05if (

!-[1,]) / / IE06 {07var readonly

= "readOnly"; 08var obj

= window.event.srcElement;09} 10else11 {12amp / non-IE13var readonly

= "readonly"; 14var obj

= e.currentTargetscape 15} 1617var id

= obj.id.replace ("btn_", "); 1819if (

Obj.value== "this item is changed to non-renewal") 20 {21.22} 23else24 {25.26} 27sumPrice (); 28} Thank you for your reading, the above is the content of "example Analysis of JavaScript event Mechanism". After the study of this article, I believe you have a deeper understanding of JavaScript event mechanism example analysis, and the specific use needs to be verified in practice. Here is, the editor will push for you more related knowledge points of the article, welcome to follow!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.