"JS" DOM event model

DOM The event model mainly contains 4 the content of each aspect is:

1. Event Flow
2. event models for mainstream browsers
3. Event Object
4. Registering and removing event listeners

Here's a look at the following:

First, what is DOM? The Document Object Model (DOM) is an application interface (API) that represents documents such as HTML and XML, and accesses and operates various elements that make up a document. In general, all browsers that support JavaScript support DOM.

In the DOM eye, HTML is a tree-like document,

Under the DOM, the individual nodes of the HTML document are considered to be of various types of node objects. Each node object has its own properties and methods that can be used to traverse the entire document tree. Because of the complexity of the HTML document, the DOM defines nodetype to represent the type of the node. Here are some of the node types commonly used by node:

Interface	NodeType Constants	NodeType value	Note
Element	Node.element_node	1	ELEMENT node
Text	Node.text_node	3	Text node
Document	Node.document_node	9	Document
Comment	Node.comment_node	8	Text of the comment
DocumentFragment	Node.document_fragment_node	11	Document fragment
Attr	Node.attribute_node	2	Node properties

1. Event Flow

The DOM (Document Object model) structure is a tree structure that, when an HTML element produces an event, propagates the path between the element node and the root node, and the node that passes through the path receives the event, which can be called the DOM event stream.

2. event models for mainstream browsers

Until the DOM Level3, most mainstream browsers continue to support the DOM standard event-handling model-capturing and bubbling.

Currently, in addition to IE browser, other mainstream Firefox,opera,safari support the standard DOM event processing model. IE still uses its own model, the bubble type, its part of the model is used by the DOM, which is also good for developers, only using the DOM standard, IE has a common event processing way to effectively cross the browser.

bubbling event (bubbling): It is understood from the DOM tree structure that the event is passed from the leaf node to the root node along the ancestor node. From the browser interface view HTML element arrangement hierarchy the understanding is that the event is passed from the most determined target element with a dependency to the most indeterminate target element.

Capture Event (capturing): The implementation of Netscapenavigator, which is just the opposite of the bubbling type, from the topmost element of the DOM tree to the most precise element.

DOM Standard event model: Since two different models have their advantages and explanations, the DOM standard supports both capturing and bubbling, which can be said to be a combination of both. It can bind multiple event handlers in a DOM element, and within the processing function, the This keyword still points to the bound DOM element, and the first position of the handler parameter list passes the event object.

The first is the capture pass event, followed by the bubbling pass, so if a handler function registers the listener for the captured event and registers the bubbling event listener, it will be called two times in the DOM event model.

The DOM event flow of JavaScript mainly goes through three stages, namely event capturing phase, target departure stage and time bubbling stage. Note that all events go through the capture and target stages, but not all of the time goes through the bubbling phase.

3. Event Object

in IE, the event object is a property event for the Window object, and the event object can only be accessed at the time of occurrence, and after all events have been processed, the object disappears. The standard DOM specifies that the event must be passed as a unique parameter to the handler function. therefore, in order to achieve compatibility, the following method is usually used:

Functionsomehandle (event) {

if (window.event)

Event=window.event;

}

Description

In both browser processing events, the Type property is compatible with various browsers, and he represents the type of event that gets, returning a string.

When detecting Shift,alt,ctrl three keys, the same method is used for both browser events.

In ie, the object of the event is contained in the Srcelement property of the events, and in the standard Dom browser, the object is contained in the target property.

To handle two browser compatibility, here are some examples:

function handle (oevent) {

if (window.event) oevent =window.event; Handling compatibility, getting event objects

var otarget;

if (oevent.srcelement)//processing compatibility, get event targets

Otarget =oevent.srcelement;

Else

Otarget = Oevent.target;

alert (otarget.tagname); The tag name of the popup target

}

Window.onload = function () {

var oimg =document.getelementsbytagname ("img") [0];

Oimg.onclick = handle;

}

4. registering and removing event listeners

IE registering multiple event listeners and removing listener methods

The HTML element in IE browser has a attachevent method that allows the outside world to register multiple event listeners for that element, for example:element.attachevent (' onclick ', observer);

To remove the listener for a previously registered event, call the element's DetachEvent method with the same parameters, for example:element.detachevent (' onclick ', observer);

DOM Standard to register multiple event listeners and remove listener methods

The browser that implements the DOM standard differs from the registered element event listener in IE, which is registered through the AddEventListener method of the element, which supports both the registered bubbling event processing and the capture type event processing.

element.addeventlistener (' click ', observer,usecapture);

The AddEventListener method accepts three parameters. The first parameter is the event name, it is worth noting that here the event name is different from IE, the event name does not start with ' on ' ; the second parameter, observer, is the callback handler function The third parameter indicates whether the processing callback function is called during the capture phase of the event pass or the bubbling phase, and the default true is the capture phase.

Removing the registered event listener invokes the RemoveEventListener of element and the parameters are unchanged.

element.removeeventlistener (' click ', observer,usecapture);

directly in DOM Add event on node

How to cancel the delivery of a browser event and the default handling of the browser after the event is passed:

Canceling event delivery means stopping the further passing of a captured event or bubbling event . For example, in a bubbling event pass, the event listener for document on the upper level no longer receives notification and is no longer processed after the body handles the stop event delivery.

The default processing after an event is passed is that the browser will usually execute the default action associated with the event after the event is passed and processed (if such an action exists).

canceling the browser's event delivery :

under IE, by setting the cancelbubble of the event object to True.

Functionsomehandle () {

Window.event.cancelBubble = true;

}

The DOM standard is done by invoking the Stoppropagation () method of the event object.

Functionsomehandle (event) {

Event.stoppropagation ();

}

As a result, cross-browser stop events are delivered in the following ways:

Functionsomehandle (event) {

Event = Event | | window.event;

if (event.stoppropagation)

Event.stoppropagation ();

else event.cancelbubble = true;

}

Canceling the default processing after an event is passed

Under IE, by setting the returnvalue of the event object to False.

Functionsomehandle () {

Window.event.returnValue = false;

}

The DOM standard is done by invoking the Preventdefault () method of the event object.

Functionsomehandle (event) {

Event.preventdefault ();

}

Therefore, the default processing after the cross-browser cancellation event passes is:

Functionsomehandle (event) {

Event = Event | | window.event;

if (Event.preventdefault)

Event.preventdefault ();

else Event.returnvalue = false;

}

In order to be compatible with different standards for different browsers, we need to add more if. else judgment to run on various browsers. Life, people are the same, each person's character is different, we need more tolerance, the mind can be more broad, to be better with people to get along with.

Author: Zhi Zhi

Sign: The road long its repair far XI, I will go up and down and quest.

"JS" DOM event model