JS Event Delegate

One, what is an event delegate?

When it comes to event delegation, the event mechanism of JavaScript is first mentioned.

In JS, it is divided into DOM level 0 events and DOM Level 2 events.

Let's see what is a dom0 level event:

The disadvantage of DOM level 0 events is that events written after you bind multiple events to an object overwrite the first-written event

The following are the DOM2 level events:

DOM Level 2 Events:

AddEventListener (' Event type ', function name , true/false);

Parameter 1: Event type does not need to be added on

Parameter 2: callback function

Parameter 3:true means capture Dalse represents capture

How to Unbind an event:RemoveEventListener ()

IE's DOM2 level event:

Attachevent ()

Parameter 1: Event type needs to be added on

Parameter 2: callback function

Unbind Event Method:detachevent ();

Event Flow: when an HTML element produces an event , the event propagates through the path between the element node and the root node, and the node that passes through the path receives the event, which is called the DOM event stream

Bubbling event: Microsoft raises the event that a child element is passed to the parent element, called bubbling

Capture event: The process by which Netscape presents an event passed by a parent element to a child element, called event capture

The event was finally entrusted:

Event delegation: Using the principle of event bubbling, the parent is used to trigger the event of the child.

Event object: An object represents the state of an event, such as the element in which the event occurred, the state of the keyboard key, the position of the mouse, the state of the mouse button

Event delegate:

Gets the compatible wording of the event object:

Btn.click = function (e) {

var e = e| | Event

}

Get Targe His compatible wording:

var target = e.target| | E.srctarget;

JS Event Delegate