JavaScript Event Learning Chapter 8: Event Sequence

In the first chapter, I mentioned a problem that may not seem so understandable for the first time: "If an element and its parent element have an event handler for the same event, which of the following statements will be executed first?" There is no doubt what browser it is.

The basic problem is simple. Assume that one of your elements is included in another element.

Principal <BR> | element1 | <BR> | ----------------------- | <BR> | element2 | <BR> | ----------------------- | <BR> principal <BR>

Both elements have an onclick event handler. If you click on element2, the click event is triggered on both element 2 and element 1. But which event occurs first? Which event processing program will be executed first? In other words, what is event order?

Two modes
Without a doubt, Netscape and Microsoft have made their own decisions in the bad days of the past.
Netscape said element1 first occurred. This is called event capturing ).
Microsoft thinks element2 happened first. This is called event bubbling ).
The two events are in the opposite order. IE only supports event bubbling. Mozilla, Opera 7, and Konqueror are supported. Earlier Opear and iCab browsers are not supported.

Event capture
When you use event capture

| <BR> --------------- | ----------------- <BR> | element1 | <BR> | --------- -- | ----------- | <BR> | element2 \/| <BR> | ------------------------- | <BR> | Event CAPTURING | <BR> ----------------------------------- <BR>

The event handler of element1 is executed first, and element2 is executed later.

Event bubbling
But when you use event bubbling

/\ <BR> --------------- | ----------------- <BR> | element1 | <BR> | -----------| ----------- | <BR> | element2 | <BR> | ----------------------- | <BR> | Event BUBBLING | <BR> ------------------------------------- <BR>

The event handler of element2 is executed first, and the event handler of element1 is executed later.

W3C Mode
W3C decided to maintain gravity in this war. In the W3C event model, any event is first captured until the target element is reached, and then bubbling.

|/\ <BR> ----------------- | -- | ----------------- <BR> | element1 | <BR> | ----------- -- | ------------- | <BR> | element2 \/| <BR> | ------------------------------ | <BR> | W3C event model | <BR> -------------------------------------------- <BR>

As a designer, you can register the event handler in the capture or bubble phase at will. You can use the addEventListener () method described in advanced mode. If the last parameter is true, it is set to event capture. If it is false, it is set to event bubble.

Assume that you write

Element1.addEventListener ('click', doSomething2, true) <BR> element2.addEventListener ('click', doSomething, false) <BR>

If you click element2, the following occurs:
1. click events occur in the capture phase. In this case, if any parent element of element2 has an onclick event handler, It will be executed.
2. If doSomething2 () is found on element1, It will be executed.
3. Events are passed down until the target itself, and there are no other capture phase programs. The event then enters the bubble stage and then executes doSomething (), that is, element2 registers the event handler in the bubble stage.
4. The event is passed up and then checked whether there is a parent element to set the event handler in the bubble stage. No, so nothing will happen.

Reverse:

Element1.addEventListener ('click', doSomething2, false) <BR> element2.addEventListener ('click', doSomething, false) <BR>

Now, if you click element2, the following occurs:
1. Event click occurs in the capture phase. The event will check whether the parent element of element2 registers the event handler during the capture phase, which is not found here.
2. Events are passed down until the target itself. Then start the bubble stage and execute dosomething (). This is the event handler registered in the element2 bubble stage.
3. The event continues to be passed up and then checks whether the event handler has been registered in the bubble stage.
4. element1. then doSomething2 () is executed.

• Three pages in total:
• Previous Page
• 1
• 2
• 3
• Next Page