Second, JavaScript language--Event handling--dom event exploration

Chapter One event Flow

Event: A specific interaction moment that occurs in a document or browser window. The interaction between JavaScript and HTML is accomplished through events.

Event Flow: Describes the order in which events are accepted from the page

IE: Event Bubbling Stream

Netscape: Event Capture Stream

Event Bubbling: The event is initially received by the most specific element (the node with the deepest nesting level in the document) and then propagated up to the least specific node (document).

Event capture: A less specific node should receive an event earlier, and the most specific node receives the event at the end.

Chapter II Event handlers

1. HTML Event handlers

Disadvantages of HTML events: HTML and JS code are tightly coupled. If you need to change the event handler, both the JS code and HTML need to be modified.

Example:

　　

2, DOM0 level Event processing program

More traditional way: Assign a function to the handler property of an event. is used more than the method, the reason is simple, has the advantage of cross-browser. There are no disadvantages to HTML events. Pros: You can add multiple event handlers to an element, executed sequentially.

Example:

　　

3, DOM2 level Event processing program

The DOM2 level event defines two methods:

Actions for handling the specified and deleted event handlers

AddEventListener () and Removeeventlistner ()

Receive three parameters:

The syntax is:

Element.addeventlistener (Type,listener,usecapture)

The event name to be processed, the function that is the event handler, and the Boolean value (true--> means that the event handler is called during the capture phase,false--> indicates that the event handler is called in the bubbling phase (which can be compatible with various browsers)).

• Where element is the object to bind the function to.
type is the event name, note that "onclick" is changed to "click", "onblur" is changed to "Blur", that is, the event name does not take "on".
Listener Of course is the binding function, remember not to follow the parentheses
• The last parameter is a Boolean value that indicates the order of response for the event

Pros: You can add multiple event handlers to an element, executed sequentially.

Note: Events added with AddEventListener () can only be removed with Removeeventlistner (). And does not do well in IE.

Example:

　　　　

4, IE Event processing program

Attachevent () Add Event

Detaevent () Delete event

Receive the same two parameters: the name of the event handler (the event needs to be added) and the function of the event handler

Reason for not using the third parameter: IE8 and earlier browser versions only support event bubbling.

Browsers that support IE event handlers: IE and opera

Example:

　　

Note: Starting with IE11, the DOM2 event handler has been started and the IE event handler is no longer used.

5. Cross-browser event handlers

　　

Second, JavaScript language--Event handling--dom event exploration