Javascript event bubbling details and capture and blocking method_javascript skills

Although proficient in jquery, but not very familiar with its prototype javascript, recently encountered some difficulties in learning javascript, such as bubble and capture, many times mentioned, but I do not know where the application is. I have found some good articles to explain and share them with you. I. sequence of events

The origin of this problem is very simple. Suppose you have nested another element in one element.

The Code is as follows:

-----------------------------------
| Element1 |
| ------------------------- |
| Element2 |
| ------------------------- |

-----------------------------------

: And both have an onClick event handler ). If you click element 2, the click events of element 1 and element 2 are triggered. But which event is triggered first? Which event processing function will be executed first? In other words, what is the order of events?

2. Two Models

As expected, Netscape and Microsoft have two completely different solutions in the days of the "browser war:

Netscape claims that the event of element 1 first occurs. The event occurrence sequence is called capture
Microsoft maintains that element 2 has priority. This event order is called the bubble type.
The order of the two events is the opposite. Explorer supports only bubble events. Mozilla, Opera7, and Konqueror support both events. The older opera and iCab do not support either.

Iii. Captured events

When you use a capture event

The Code is as follows:

--------------- | -----------------
| Element1 |
| ----------- |
| Element2 \/|
| ------------------------- |
| Event CAPTURING |
-----------------------------------

: The event handler function of element 1 is first triggered, and the event handler function of element 2 is finally triggered.

Iv. Bubble events

When you use a bubble event

The Code is as follows:

/\
--------------- | -----------------
| Element1 |
| ----------- |
| Element2 |
| ------------------------- |
| Event BUBBLING |
-----------------------------------

: The processing function of element 2 is first triggered, and element 1 is second

5. W3C Model

W3c wisely chose a right choice in this battle. Any event that occurs in the w3c event model first enters the capture stage until the target element is reached and then enters the bubble stage.

The Code is as follows:

| /\
----------------- | -- | -----------------
| Element1 |
| ------------- | -- | ----------- |
| Element2 \/|
| -------------------------------- |
| W3C event model |
------------------------------------------

For a web developer, you can choose whether to bind an event handler in the capture or bubble phase. This is implemented through the addEventListener () method. If the last parameter of this function is true, bind the function in the capture phase. Otherwise, bind the function in the bubble phase.

Suppose you want

The Code is as follows:

Element1.addEventListener ('click', doSomething2, true)

Element2.addEventListener ('click', doSomething, false)

If you click element 2, the following occurs:

(The event is like a visitor visiting from the outside to the inside, gradually approaching the trigger's main element, and then leaves in reverse direction)

1. Click the event to start the capture phase (gradually approaching element 2 ). Check whether any of the ancestor elements of element 2 have The onclick processing function in the capture phase.
2. One element 1 is found, so doSomething2 is executed.
3. Check the event to the target (element 2). No more processing functions are found in the capture phase. The event starts to enter the bubble stage. take it for granted that doSomething () is executed. This function is bound to element 2 in the bubble stage.
4. Move the event away from element 2 and check whether any ancestor element is bound with a handler in the bubble stage. There is no such situation, so nothing has happened.
The opposite is:

The Code is as follows:

Element1.addEventListener ('click', doSomething2, false)

Element2.addEventListener ('click', doSomething, false)

Now, if you click element 2, the following occurs:

1. Click the event to enter the capture phase. Check whether there is an onclick processing function in the capture phase in the ancestor element of element 2.
2. Check the event to the target. The event starts to enter the bubble stage and executes the function bound to element 2 in the bubble stage. DoSomething ()
3. The event begins to stay away from the target and checks whether any of the ancestor elements of element 2 are bound to the handler in the bubble stage.
4. A doSomething2 () of element 1 is executed.

6. Compatibility and traditional mode

In browsers that support w3c dom (Document Object Model), the traditional event binding method is

The Code is as follows:

Element1.onclick = doSomething2;

It is considered to be bound to the bubble stage by default.

7. Use a bubble event

Few developers will consciously use bubble events or capture events. On the webpage they created today, there is no need to let an event be processed by several functions due to bubbling. But sometimes users are often confused, because there are many situations after they only click the mouse once (multiple functions are executed because of bubbling ). In most cases, you still want your processing functions to be independent of each other. When a user clicks an element, what happens, and clicks another element, what happens is independent of each other, not because of the bubble chain.

8. It has been happening

First, you need to understand that event capture or bubbling is always happening. If you define a general onclick handler for the entire page document

The Code is as follows:

Document. onclick = doSomething;
If (document. captureEvents) document. captureEvents (Event. CLICK );

Clicking the click event of any element on the page will eventually bubble to the highest document layer on the page, so trigger that generic processing function unless the previous processing function explicitly terminates the bubble, in this way, bubbles will not be transmitted to the entire document layer.

Supplement the second sentence of the above Code:

>>> Start with IE
Object. setCapture () when an object is setCapture, its methods will be inherited to the entire document for capture.
Object. releaseCapture ()
>>> Others
Mozilla also has similar functions, with slightly different methods
Window. captureEvents (Event. eventType)
Window. releaseEvents (Event. eventType)
>>> Example

The Code is as follows:

// If only the following sentence is used, clicking obj triggers click obj. onclick = function () {alert ("something ")}
// If the following sentence is added, the method will be inherited to document (or window, different browsers) to capture
Obj. captureEvents (Event. click); // FF
Obj. setCapture () // IE

IX. Usage

Because any event is propagated to the page document (the highest level), this makes the default event handler Function Possible. Suppose you have such a page

The Code is as follows:

------------------------------------
| Document |
| --------------- ------------ |
| Element1 | element2 |
| --------------- ------------ |

------------------------------------
Element1.onclick = doSomething;
Element2.onclick = doSomething;
Document. onclick = defaultFunction;

If you click element 1 or element 2, doSomething () is executed. If you do not want to let the event bubble to execute defaultFunction (), you can prevent event bubbles from spreading upwards here ,. However, if you click another part on the page, defaultFunction () will still be executed. This effect may be useful sometimes.

Set the page -- make the processing function have a large trigger area, which is required in the "drag effect" script. In general, a mousedown event on an element layer means that this element is selected and can be used to respond to the mousemove event. Although mousedown is usually bound to this element layer to avoid browser bugs, the range of the event functions of the other two must be the whole page (?)

Remember that the First Law of Browserology learned by the browser is: Everything is possible (anything can happen), and at least you have a bit of preparation. So it may happen that when a user moves his or her mouse on the page, the script cannot respond in large ways, so that the mouse does not stop on the element layer.

1. If the onmouseover processing function is bound to the element layer, this element layer will no longer respond to the mouse movement, which makes users feel strange.
2. If the onmouseup processing function is bound to the element layer, the event cannot be triggered either. The consequence is that after the user wants to put down the element layer, the element layer continues to respond to mouse movement. This will lead to more confusion (?)

In this example, event bubbling is very useful because placing your processing functions on the page layer ensures that they are always executed.

10. Shut it down (to prevent event bubbles)

But in general, you will want to turn off all the bubbles and captures to ensure that the functions do not disturb each other. In addition, if your document structure is quite complex (many tables are nested with each other or so), you will also close the bubble to save system resources. In this case, the browser has to check every ancestor of the target element to see if it has a processing function. Even if none of them are found, the search just took a lot of time.

In Microsoft models, you must set the event cancelBubble attribute to true.

The Code is as follows:

Window. event. cancelBubble = true

In the w3c model, you must call the stopPropagation () method of the event.

The Code is as follows:

E. stopPropagation ()

This prevents all bubbles from spreading outward. As a cross-browser solution, we should do this:

The Code is as follows:

Function doSomething (e)

{
If (! E) var e = window. event;

E. cancelBubble = true;

If (e. stopPropagation) e. stopPropagation ();

}

Set cancelBubble in a browser that supports the cancelBubble attribute. The browser shrugged and then created this attribute. Of course, this cannot really cancel the bubble, but it can at least ensure that this command is safe and correct.

11. currentTarget

As we have seen before, an event uses the target or srcElement attribute to indicate the target element on which the event actually occurred (that is, the element that the user initially clicked ). In our example, element 2 is used because we click it.

It is very important to understand that the target element in the capture or bubble stage remains unchanged and is always associated with element 2.

But suppose we have bound the following functions:

The Code is as follows:

Element1.onclick = doSomething;

Element2.onclick = doSomething;

If you click element 2, doSomething () is executed twice. But how do you know which html element is responding to this event? Target/srcElement does not give clues, but people tend to prefer element 2 because it is the cause of the event (because the user clicks on it ).
To solve this problem, w3c adds the currentTarget attribute, which points to the Element Processing the event: this is exactly what we need. Unfortunately, the Microsoft model does not have similar attributes.
You can also use the "this" keyword. In the above example, it is equivalent to the html element that is processing the event, just like currentTarget.

12. Microsoft model Problems

However, when you bind a model to a Microsoft Event, the this keyword is not equivalent to an HTML element. Lenovo lacks a Microsoft model (?) similar to the currentTarget attribute (?) -- If you follow the above Code, doing so means:

The Code is as follows:

Element1.attachEvent ('onclick', doSomething)

Element2.attachEvent ('onclick', doSomething)

You cannot know exactly which HTML element is responsible for processing the event. This is the most serious problem for the Microsoft Event binding model. For me, this is why I never use it, even if you are developing an application that is only for Windows IE

I want to add attributes similar to currentTarget as soon as possible-or follow the standard? Web developers need this information

Postscript:

Because javascript has never been used in practice, I am not very familiar with this article. I can only translate it, for example, the section about the drag-and-drop effect, if you have any questions, please leave me a message. Thank you for your support!