Summary of event issues in JavaScript

I. What is an event?

The event is the interaction between the DOM and the browser (as long as the behavior is triggered, which is equivalent to triggering the event), and we can bind the event through event snooping, for example: Box.onclick=function () {}, if we click on this box, Triggers the box's Click event, which also binds the event to the method, allowing it to perform certain operations. (The event is the default given by the browser, the innate, binding event is simply to bind a particular element to the corresponding event name and method, let it execute a specific method)

Event binding: Is the binding method of the related event behavior to an element

-DOM Level 0 event :

　　　

-DOM Level 2 event:

　　　

Two. The difference between DOM level 0 and DOM Level 2 events:

1.DOM Level 0 is assigned to one of the private properties of the current element: box.click= ...

1). We pass event Listener Handler onclick Property =function () {} This form of binding event, called DOM Level 0 event

2). All DOM Level 0 events are bubbling, executing the event handler function

3). You can only bind a method to an event of the current element, bind more than one, and the back bound will overwrite the front

4). What we call an event is the interaction between the document and the browser, and the document is Dom,dom contains HTML and documents

5). The handler to remove the event listener is to directly access the event listener property of the DOM object, and then the function that handles the event is set to NULL, for example:

　　　　　　

2.DOM2 level belongs to the search mechanism through the prototype chain, find Eventtarget.prototype Addeventlisten This method, execute this method, put the function that needs to bind in the event pool of the current element.

1). You can bind several different methods to an event type of the current element, triggering the event, which will execute the method in the order of the event pool (and in the same order as the binding).

The lower version has the difference)

2). There are separate events in DOM 2 that are not private properties of the element, so only the DOM2 binding method will give these event binding methods, for example: domcontentloaded ...

3). Whether the execution time of the DOM Level 2 event processing event function is performed during the capture phase or during the bubbling phase

4). Event snooping for DOM2-level events is a listener event that is implemented by AddEventListener on the prototype of the DOM element to find the prototypes on the event object

5). Remove event listener, which is a removal event listener implemented via RemoveEventListener (Standard browser)

6). If the third parameter is not passed, we default to False, which is what happens during the bubbling phase.

7). This in the event handler is the element object that is currently triggering the event

Note: 1. In the IE browser is different, the DOM 2 event in IE, is through attachevent () implementation of the event monitoring and detachevent () event to remove the listener, only two parameters are supported, all events are defined in the bubbling phase of execution, ie browser and IE8 before, Even a DOM Level 2 event is just a handler function that supports events, which is performed during the bubbling phase.

The This of the event handlers in 2.IE is the window

Three. Event Flow:

Event triggering execution is divided into three steps: Event capture phase----event bubbling phase, capture event source
Default propagation mechanism for events:
Capture phase: Find elements in order from outward
Target phase: Action of the current event source itself
Bubble stage: Trigger related behavior from inside to outside (the bubbling phase is our most common)

Event delegation can be implemented using event propagation mechanism.

Four. Event-related compatibility processing:

Ele.addeventlistener (Type,fn,[bool]); DOM Level 2 binding events

Ele.removeeventlistener (Type,fn,[bool]); DOM Level 2 Removal events

Ele.attachevent (' on ' +type,fn); Binding events in DOM Level 2 ie

Ele.detachevent (' on ' +type,fn); Removing events in DOM Level 2 ie

　　

e=e| |  window.event; Get Event Object

e.target=e.target| |  E.srcelement; Get Event Source

E.stoppropagation?e.stoppropagation (): e.cancelbubble=true; Prevent event Propagation

E.preventdefault?e.preventdefault (): E.returnvalue=false; Block event bubbling

e.pagex=e.pagex| | (document.documentelement.scrollleft| | Document.body.scrollLeft) +e.clientx;

e.pagey=e.pagey| | (document.documentelement.scrolltop| | DOCUMENT.BODY.SCROLLTOP) +e.clienty;

Problems with DOM Level 2 event binding in Ie6~8:

1). This points to the problem, the default this point to the window;

2). Repeat the problem, bind the event, can be repeated to the same element of the same behavior, binding the same event handler;

3). Order confusion, after binding the event handler to the element, the order of execution is inconsistent with the order of the binding;

Summary of event issues in JavaScript