On JS event Monitoring

On JS event Monitoring

1, before talking about event monitoring, first to understand what is the JS event?

We all know that JS is a dynamic data type of language, you can make us in the original static page to achieve some dynamic effect, when an element in the Web page can trigger JS code (function) to achieve the JS dynamic effect of the behavior, I understand the JS event.

2. Part of the event: the source of the event. Event Type = preprocessing function

Event Source: The element that really triggers the event;

Event Type: Example: onmousemove, onmouseover, etc.;

Preprocessing function: function () {};

3. Event Monitoring:

Events are classified as DOM 0-level events and Dom 2-level events, and DOM2-level events are also known as event snooping. The disadvantage of a DOM level 0 event is that if the event is the same, the event of the latter overrides the former, and the DOM2-level event can bind multiple event handlers for the same event of the same object, and the former event is not overwritten.

The methods for DOM2-level events are:

AddEventListener ()

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

Parameter 2: callback function

Parameter 3: Boolean true means capture false for bubbling

Unbind Event Method: RemoveEventListener ()

However, IE does not support this method

IE browser under: attachevent ()

Parameter 1: Event type needs to be added on

Parameter 2: callback function

Unbind Event Method: DetachEvent ()

4. Event flow, event bubbling, event capture

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.

Simply put: When an element triggers an event, the propagation process of the event is called the event stream, and the process is divided into capture and bubbling.

Bubbling event: Presented by Microsoft, the process of passing a child element to a parent element is called event bubbling;

Capture events: The process by which Netscape proposes events to be passed from parent elements to child elements, called event captures;

5. The order in which browser events are executed and propagated by default

Bubbling process: Target element-->.........-->body-->html-->document;

Cases:

HTML structure and CSS styles

JS Code:

Capture process: document-->html-->body.........--> target element;

Example: HTML structure and CSS style or referring to the above

When the bubbling event and the capture event occur simultaneously, the event captures are performed first, and the sequence is executed at the lowest level (common interview questions)

Cases:

Document---Capture body----capture big----capture small--bubbling small----capture big---bubble body----bubbling document---Bubbling

The benefits of event bubbling: You can use the principle of event bubbling to delegate the child's events to the parent element listener, reducing the binding of the event

6. Event Proxy (event delegate)

Using the bubbling mechanism, the event of the child element is delegated to the parent element for listening (adding an event to the parent element), and when the child element fires the event, the event bubbles to the parent, and if the child element you want to specify can trigger the event, the event source (target) can be obtained from the event object ( Then pass the condition to determine whether the desired child element, if yes, executes the event, otherwise does not execute

method to get Event Source: var target = e.target| | E.srcelement

Benefits of the event broker:

1. Implement binding to future element events

2, reduce event binding, improve performance

Cases:

HTML structure:

CSS style:

JSS Code:

In the example above, the event onclick of the child Ali is delegated to the parent element olist to listen, the event object gets to the source onclick, when the child element Ali triggers, the corresponding code will be executed;

When a new LI element is added to a clone, the new element is also bound to the event, eliminating the need to re-bind it.

On JS event Monitoring