An introduction to popup events. JavaScript - Bubbling Events How Most of Them Work

Hello! In this tutorial, I want to talk about such an important concept as bubbling and event interception. Bubbling is a phenomenon where if you click on a child element, the event propagates to its parent.

It is very useful when processing large nested lists or tables, in order not to assign an event handler to each element, you can assign one handler per parent element, and the event will already propagate to all nested elements in the parent. Let's take an example.

This handler for

will work if you click on the attached tag or : Click on EM, the DIV handler will be triggered As you can see, when you click on the nested em element, the handler on the div is triggered. Why it happens? Read on to find out. Surfacing So the basic principle of surfacing is: When any event occurs, it does not matter if the mouse hovers over the element, the event will first be triggered on the parent element, and then it will propagate along the chain to all nested elements. For example, let's say there are 3 nested FORM> DIV> P elements, each with an event handler: FORM DIV Bubbling ensures that a click on the inner element Will call the click handler (if there is one of course) first on the very This process is called bubbling, because events seem to “float” from the inner element upward through their parents, just like an air bubble floats in water, so you can also find the definition of bubbling, well, it's just from the English word bubbling. Accessing the target element event.target In order to find out on which element we caught this or that event, there is the event.target method. (read about the event object). event.target- this is actually the original element on which the event occurred. this- this is always the current element, which has reached the bubble, and the handler is currently executing on it. For example, if you have only one form.onclick handler installed, it will catch all clicks inside the form. At the same time, wherever there is a click inside, it will still pop up to the element , on which the handler will be triggered. Wherein: this(= event.currentTarget) will always be the form itself, since the handler was triggered on it. event.target will contain a link to a specific element within the form, the most nested one on which the click occurred. In principle, this can be the same as event.target if the form is clicked and there are no more elements in the form. Stopping ascent Typically, event bubbling goes straight up to the root window object. But it is possible to stop the ascent at some intermediate element. To stop the bubbling call the event.stopPropagation () method. Let's consider an example, when the button is clicked, the body.onclick handler will not work: If an element has several handlers set for the same event, then even if the bubbling stops, all of them will be executed. Thus, stopPropagation will prevent the event from propagating further, but all handlers will work on the element, but no further on the next element. To stop processing on the current element, browsers support the event.stopImmediatePropagation () method. This method will not only prevent bubbling, but also stop event processing on the current element. Immersion In the standard, in addition to the "bubbling" of events, there is also "immersion". Diving, unlike surfacing, is less in demand, but it will still be useful to know about it. So there are 3 stages of the passage of the event: The event goes from top to bottom. This stage is called the "interception stage". The event has reached a specific item. This is the "goal stage". After all, the event starts to pop up. This is the "surfacing stage". The standard demonstrates this as follows: Thus, when the TD is clicked, the event will travel along the chain of parents, first down to the element ("plunges"), and then up ("pops up"), using handlers along the way. Above, I wrote only about ascent, because actually other stages are not used and go unnoticed for us. The handlers do not know anything about the interception stage, but start working from the ascent. And to catch an event at the interception stage, you just need to use: The argument is true, then the event will be intercepted on the way down. The argument is false, then the event will be caught on bubbling. Examples of In the example on , , The handlers are the same as before, but this time - at the immersion stage. Well, to see the interception in action, click on the element in it. The handlers will fire in the order "from top to bottom": FORM → DIV → P. The JS code here is like this: Var elems = document.querySelectorAll ("form, div, p"); // hang up a handler for each element at the interception stage for (var i = 0; i< elems.length; i++) { elems[i].addEventListener("click", highlightThis, true); } Nobody bothers you to assign handlers for both stages, like this: Var elems = document.querySelectorAll ("form, div, p"); for (var i = 0; i< elems.length; i++) { elems[i].addEventListener("click", highlightThis, true); elems[i].addEventListener("click", highlightThis, false); } Click on the inner element To see the order of the event: It should be FORM -> DIV -> P -> P -> DIV -> FORM. Note that the element Will participate in both stages. Outcomes When an event occurs - the element on which the event occurred is marked as event.target. The event first moves down from the document root to event.target, invoking the handlers supplied via addEventListener (…., True) along the way. The event moves from event.target up to the beginning of the document, along the way it calls the handlers supplied via addEventListener (…., False). Each handler will have access to the properties of the event: event.target is the deepest element where the event actually happened. event.currentTarget (= this) - the element on which the self-handler has triggered at the moment (to which the event has "reached"). event.eventPhase - in which phase the event handler was triggered (immersion = 1, bubbling = 3). The bubbling can be stopped by calling the event.stopPropagation () method, but it is not recommended to do this, since you may need the event for the most unexpected purposes. Interception of an event One of the important features of the language is event interception. If someone, for example, clicks on a button, the onClick event handler corresponding to that button is called. With the help of event handling, you can ensure that the object corresponding to your window, document or layer intercepts and processes the event even before the event handler is called by the object of the specified button for this purpose. Likewise, an object in your window, document, or layer can process an event signal even before it reaches its normal destination. To see what this can be useful for, let's look at the following example: Click on this link As you can see, we do not specify event handling programs in the tag ... Instead, we write window.captureEvents (Event.CLICK); in order to intercept the event Click window object. Usually the window object does not work with the event Click... However, after intercepting, we then redirect it to the window object. Note that in Event.CLICK fragment CLICK must be written in capital letters. If you want to intercept several events, then you should separate them from each other with | symbols. For example: window.captureEvents (Event.CLICK | Event.MOVE); In addition, in the function handle () assigned by us to the role of the event handler, we use the instruction return true;... What this really means is that the browser has to process the link itself after the function finishes. handle ()... If you write instead return false; then it will all end there. If now in the tag You will define the event handler onClick, you will understand that this program will not be called when this event occurs. This is not surprising, since the window object catches the event signal even before it reaches the link object. If you define a function handle () how function handle (e) ( alert ("The window object captured this event!"); window.routeEvent (e); return true; } then the computer will check to see if other event handlers have been defined for this object. The variable e is our Event object, which is passed to the event handling function as an argument. In addition, you can directly send an event signal to an object. To do this, you can use the method handleEvent ()... It looks like this: Click on this link onClick = "alert (" Event handler for the second link! ");"> Second link All signals about Click events are sent for processing via the second link - even if you haven't clicked on any of the links at all! The following script demonstrates how your script can respond to keystroke signals. Click on a key and see how this script works. Let's create an HTML page and paste the above HTML code into it. Let's insert the script, written in JavaScript, before the closing body tag. After that, open the newly created page in a web browser, press the F12 key and go to the console. Now let's left-click in the area belonging to the strong element and see how the event will bubble up. How to interrupt bubbling of an event The bubbling of an event (bubble) can be interrupted. In this case, this event will not be triggered for parent (parent) elements. The method that is designed to stop the bubbling event (bubble) is called stopPropagation (). For example, let's change our example above so that the event doesn't pop up above the body: