JS Event Principal Agent

In the technique of optimizing Web page performance, the optimization of the DOM is essential. This involves the frequent manipulation of the DOM by JavaScript. such as events that respond to user actions. In general, if it is a slightly junior front-end programmer, when the project is taken, the addition of DOM events, perhaps some do not consider this performance optimization problems (such as me), which will lead to a large number of redundant DOM operation of the page. is undoubtedly increased memory and overhead while reducing the performance of the Web page.

In addition to DOM events, you can try to optimize the code. This is the event delegation mechanism to be mentioned here. The meaning of the event delegation mechanism in the online search whether the official explanation or the vast number of users to share. You can probably understand something from it: delegate to the parent element the event that the child element needs to be added. That is, the event is bound to the parent element. When a child element fires an event, it bubbles to the parent element, which naturally triggers the event that binds above the parent element.

For the above event delegate, there are two questions to understand: event bubbling, getting the element that triggered the event.

1) Event bubbling:

When it comes to event bubbling, talk about its opponents, event capture. Both belong to the event stream. That is, the event flow is divided into the bubbling event stream and the capture event stream. The interpretation of the event stream is the order in which the page receives the event.

Bubbling is the bottom up. From the child elements like bubbling bubbles. The catch is just the opposite: from the page root node (document) to the inner element. These two events are more frequently used for event bubbling. For example, the event delegate used here is the event bubbling mechanism.

2) Gets the element that triggered the event

When the child element inside the parent element triggers the event, the event bubbles up, and the event is triggered up to the parent element of the bound event. The event bubbling diagram is captured online as follows:

After bubbling to the parent element, how does the parent element know which child element is triggering the event at this point? This is used to an event object. Event acquisition and some of its more detailed introduction can be self-searching online. And here you need to use some of the properties of the event

(1) event.target/event.srcelement

Gets the source of the event, that is, who triggered the event, not who the event was bound to. For example, the event that is said here is bound to the parent element, but the child element can trigger the event.

(2) Event.target.nodeName

The nodename or whatever id,classname under target is to get the specific child elements. Because target it gets a shape like this:

<li class= "Myli" > First item </li>

With these, you can start writing event proxies:

Bind event to Parent element ul

As shown above, when you click on an Li, Li's background changes to Lightgray, and the others keep white color. This is the agent for the event. Adds an event only to the parent element. This binding event is triggered when the child element is bubbling to the parent element. This significantly reduces the manipulation of the DOM. This optimizes the performance of the Web page.

There is a piece of code that is commented out. What it means is that the event is bound to the top of the parent element, then clicking on the child element will trigger the parent element's event. But this time I don't want the child element to trigger the parent element's event. This event agent is thrown out at this time. Because it has nothing to do with the event agent. So I'm going to stop the child element from triggering the parent element event. One way to do this is to add an event on each child element and block the passing of the bubbling. This feeling is not worth the candle. So do not trigger this event by using E.target to determine if the child element is currently clicked. It is only when you click on yourself that the event is triggered.

Back to the event proxy. If the events of the child elements are different, then the code needs to be modified accordingly. You can use a series of e.target such as Id,classname to determine which sub-element is currently clicked, and then use If/else, or switch. are processed separately.

Of course, event bubbling is not the case with all events. Some events are not. Of course we used the click, keyboard events, MouseDown such. can be bubbling. But focus/blur these can not bubble. About which events do not bubble need to check the information online. Be careful when you use it.

JS Event Principal Agent