Event delegation?

  • JavaScript advanced programming: event delegate is the use of event bubbling, only a specified event handler, you can manage a certain type of all events.
  • Respond an element to an event (click, keyDown…) Delegate to another element

Generally speaking, one or a set of events entrusted to its parent element layer or outer elements, more real binding events is the outer element, when the incident response to need binding element, through the event bubbling mechanism bind the event to trigger its outer elements, and then in the outer elements to perform the function.

Here’s a colloquial example: Class to borrow equipment, are generally a don’t a person to, and then get in the class, one by one handed out to students in their group Here, borrow equipment is an event, in the classroom refers to the group need to respond to events of DOM elements, and went out to borrow equipment group leader is the agent of elements, so the real binding is the element of events, The leader of the device distribution process is in the event execution, need to determine the current response event should match which or which of the proxied elements.

Event delegation is implemented using the bubbling principle of events. What is event bubbling? The event starts at the deepest node and then propagates the event up. For example, there is a node tree on the page, div>ul>li>a; For example, if we add a click event to the innermost DIV, the event will be executed layer by layer in the order of A > Li >ul>div. There is such a mechanism that if we add a click event to the outermost div, ul, Li, and A will all bubble up to the outermost div. So they all fire, and this is called event delegate, and they delegate their parent to execute the event.

The DOM event standard describes three stages of event propagation

  1. Capture phase: Events (from Windows) approach elements down
  2. Target phase: The event reaches the target element
  3. Bubbling phase: Events begin bubbling on elements

Why use event delegates

In general, the DOM needs event handlers, so we’ll just give it an event handler. What if a lot of dom needs event handlers? Let’s say we have 100 Li’s, and each li has the same click event. Maybe we could loop through all the Li’s with a for loop, and then add events to them. What’s the impact of that?

In JavaScript, the number of event handlers added to the page is directly related to the overall performance of the page, because the need to constantly interact with dom nodes, the more times the DOM is accessed, the more times the browser will have to redraw and rearrange, which will prolong the interaction ready time of the whole page. This is why one of the main ideas of performance tuning is to reduce DOM manipulation; If you want to use the event delegate, you will put all the operations into the JS program, and the DOM operation will only need to interact once, which can greatly reduce the number of interactions with dom, improve performance;

Each function is an object, the object will use memory, object, the more the greater the memory usage rate, nature is the worse performance (not enough memory to use, is called flints, haha), such as the 100 li, would take 100 memory space, and if it was 1000, 10000, that can only say that ha ha, if use event delegation, Then we can only operate on its parent (if there is only one parent) this object, so we need a memory space is enough, is not a lot of savings, natural performance will be better.

Advantages of event delegation

  • Save memory footprint and reduce event registration, such as proxy for all LI click events on UL
<ul id="list">
<li>1111</li>
<li>2222</li>
<li>3333</li>.<li>nnnn</li>
</ul>
Copy the code

  • You can add a child object without binding it again (dynamically binding events)

  • Using events can reduce a lot of rework in the case of dynamically binding events.

  • The bubbling process of events also takes time, and the closer you get to the top, the longer the “event propagation chain” of events, the more time it takes. If the DOM is deeply nested, events bubbling through a large number of ancestor elements can result in a performance penalty.

How do I block the default action?

There are some default behaviors of HTML elements, such as the A tag, which jumps when clicked; The input of type Submit in the form form has a default commit jump event; Input of type reset has the behavior of resetting the form.

Prevents events from bubbling

function stopBubble(e){
    
    if (e&&e.stopPropagation) { / / not IE
        e.stopPropagation();
    } else {//IE
        window.event.cancelBubble=true; }}Copy the code

DOM provides the stopPropagation() method, but IE does not support it. Use the Event object to call the event function. The cancelBubble property is false by default. When set to true, it prevents event bubbles and is called by the event object in the event function. JQuery provides the stopPropagation() method to stop event bubbles. Just call it with the event object, event.stopPropagation();

Blocking default behavior

var $a = document.getElementsByTagName("a") [0];

$a.onclick = function(e){
    alert("I blocked the jump.")
    e.preventDefault();
    //return false; / / can also
}
Copy the code

The DOM provides the preventDefault() method to cancel the event’s default behavior, but only for events with the cancelable property set to true. Call it in the event function using the Event object. IE provides the returnValue property. The default value is true. When it is set to false, the default behavior of the event is cancelled, and the event object is called in the event function. The jQuery preventDefault() method is provided to prevent the default behavior of the element, just call it with the event object, event.preventDefault()

For a links, you can use javascript pseudo-protocols

reference

  • www.cnblogs.com/liugang-vip…