[JS] DOM event model and jsdom Model

[JS] DOM event model and jsdom Model

The DOM event model consists of the following four parts:

1. Event stream
2. Event model of mainstream browsers
3. Event object
4. Register and remove Event Listeners

Next we will learn one by one:

First, what is DOM? The Document Object Model (DOM) is an application interface (API) that represents documents (such as HTML and XML), accesses, and operations that constitute various elements of a document ). Generally, all browsers that support Javascript support DOM.

In the eyes of DOM, HTML is a tree-like document like XML.

In DOM, each Node of the HTML document is considered as a Node object of various types. Each Node object has its own attributes and methods. These attributes and methods can be used to traverse the entire document tree. Due to the complexity of HTML documents, DOM defines nodeType to represent the node type. The following lists several common Node types of a Node:

Interface	NodeType constant	NodeType Value	Remarks
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	Annotated text
DocumentFragment	Node. DOCUMENT_FRAGMENT_NODE	11	Document parts
Attr	Node. ATTRIBUTE_NODE	2	Node attributes

 

1. event stream

The DOM (Document Object Model) structure is a tree structure. When an HTML element generates an event, the event will be transmitted in the path between the element node and the root node, all nodes passing through the path will receive the event. This propagation process is called the DOM event stream.

 

2. event model of mainstream browsers

Most mainstream Browsers Do not support DOM standard event processing models-capture and bubble.

Currently, all mainstream Firefox, Opera, and Safari browsers except ie support standard DOM event processing models. IE still uses its own model, that is, the bubble type. One part of the model is used by DOM, which is also good for developers. Only DOM standards are used, cross-browser can be effectively implemented only when Internet Explorer has a common event processing method.

Bubbling): From the DOM tree structure, events are transmitted from the leaf node along the ancestor node until the root node; from the HTML element arrangement level in the browser interface view, it is understood that an event is transmitted to the uncertain target element from the most specific target element with a subordination.

Capturing): Implementation of NetscapeNavigator, which is the opposite of the bubble type, from the top-level elements of the DOM tree to the most precise elements.

DOM standard event model: because two different models have their advantages and explanations, DOM standard supports both capture and bubble types, which can be said to be a combination of them.It can bind multiple event handlers to a DOM element, and within the handler function, this keyword still points to the bound DOM element, in addition, the event object is transferred at the first position in the list of processing function parameters.

The first is the capture-type event transfer, followed by the bubble-type transfer. Therefore, if a processing function registers both the capture-type event listener and the bubble-type event listener, in the DOM event model, it will be called twice.

The DOM event stream of Javascript mainly goes through three stages: Event capture stage, target start stage, and time bubble stage. Note that all events go through the capture and target phases, but not all the time passes through the bubble phase.

 

3. event object

In IE browser, the event object is a property event of the window object, and the event object can only be accessed when the event occurs. After all the events are processed, the object disappears. The standard DOM specifies that the event must be passed to the event handler as a unique parameter.To achieve compatibility, we usually use the following method:

FunctionsomeHandle (event ){

If (window. event)

Event = window. event;

}

Note:

In the two browsers that process events, the type attribute is compatible with various browsers. It indicates the retrieved event type and returns a string.

When detecting the Shift, Alt, and Ctrl keys, the two browser events use the same method.

In IE, the event object is included in the srcElement attribute of the event, and in the standard DOM browser, the object is included in the target attribute.

To handle the compatibility between the two browsers, the following is an example:

Function handle (oEvent ){

If (window. event) oEvent = window. event; // processing compatibility, get the event object

Var oTarget;

If (oEvent. srcElement) // processing compatibility, get the event Target

OTarget = oEvent. srcElement;

Else

OTarget = oEvent.tar get;

Alert (oTarget. tagName); // The target tag name is displayed.

}

Window. onload = function (){

Var oImg = document. getElementsByTagName ("img") [0];

OImg. onclick = handle;

}

4. Register and remove Event Listeners

How to register multiple Event Listeners and remove listeners in IE

In ie, the HTML element has an attachEvent method that allows multiple event listeners of the element to be registered. For example:Element. attachEvent ('onclick', observer );

To remove the listener of the previously registered event, call the detachEvent method of the element. The parameters are the same. For example:Element. detachEvent ('onclick', observer );

Register multiple Event Listeners and remove listener methods in DOM Standard

The method for registering an element event listener in a DOM standard browser is different from that in IE browser. It is registered using the addEventListener method of the element. This method supports registration of a bubble event, it also supports capturing 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 the event name is different from that of IE, and the event name isNot starting with 'on'The second parameter, observer, is the callback processing function. The third parameter indicates whether the processing callback function is called in the capture stage or the bubble stage during event transfer, by default, true indicates the capture phase.

Remove the registered event listener and call the removeEventListener of the element. The parameters remain unchanged.

Element. removeEventListener ('click', observer, useCapture );

Add events directly to the DOM Node

How to cancel the default handling of browser events and events after they are passed:

Canceling event transfer means stoppingCapture or bubble events. For example, in a bubble event transfer, after the body processes and stops the event transfer, the event listener of the document at the upper layer will no longer receive notifications or be processed.

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

Cancel the event transfer in the browser:

In IE, set the cancelBubble of the event object to true.

FunctionsomeHandle (){

Window. event. cancelBubble = true;

}

DOM standard calls the stopPropagation () method of the event object.

FunctionsomeHandle (event ){

Event. stopPropagation ();

}

Therefore, the cross-browser stop event transfer method is:

FunctionsomeHandle (event ){

Event = event | window. event;

If (event. stopPropagation)

Event. stopPropagation ();

Else event. cancelBubble = true;

}

Cancel default processing after event Transfer

In IE, set the returnValue of the event object to false.

FunctionsomeHandle (){

Window. event. returnValue = false;

}

DOM standard calls the preventDefault () method of the event object.

FunctionsomeHandle (event ){

Event. preventDefault ();

}

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

FunctionsomeHandle (event ){

Event = event | window. event;

If (event. preventDefault)

Event. preventDefault ();

Else event. returnValue = false;

}

It can be seen that in order to be compatible with different standards of different browsers, we need to add more if. else judgments to run on various browsers. In life, people are also like this. Different personalities of each person require us to be more inclusive and have a broader mind to get along with others.

Author: Zhizhi

Sign: The road is long, and I will go up and down.