jQuery Learning 4 Browser Event Model_jquery-JS Tutorial-php.cn

First of all, you need to know the two-level mode of DOM: DOM0 level and DOM2 level

In DOM0 level event handler is declared by assigning the reference of the function instance to the attribute of the DOM element.

Declare the DOM level 0 event handler

Copy the code The code is as follows:

DOM Level 0 Events Example

Event bubbling: After the target element gets a chance to handle the event, the event model checks the target element's Parent element to see if a handler has been established for the same type of event. If it is, the parent element's handler is also called. Then check its parent element until the top of the DOM tree is checked. This process is called event bubbling.

Event propagation from the starting point to the top of the DOM tree

Copy the code The code is as follows:

DOM Level 0 Bubbling Example

DOM 2nd The disadvantage of level 0 of the DOM level 0 model is that properties are used to store references to functions that are event handlers, so each element can only register one event handler at a time for any specific event type. program.

The DOM level 2 event model (also known as listeners) is designed to solve these types of problems. Each DOM element defines a method named addEventListener(), which is used to attach event handlers (listeners) to the element. The format of this method is as follows:

addEventListener(enentType,listener,useCapture)

The parameter eventType is a string used to identify the time type to be processed. For example: click, mouseover, keydown, etc.

The parameter listener is a reference to a function (or inline function) used to establish a handler of the specified type on the element.

The parameter useCapture is of Boolean type.

Use the DOM level 2 model to create an event handler

Copy the code The code is as follows:

DOM Level 2 Events Example

以上代码简单说明我们能在同一个元素上为同一个事件类型建立多个事件处理程序

Related labels：

jquery Browser

source：php.cn

Previous article：javascript Get the KeyCode code in IE and FireFox at the same time_javascript skills Next article：javascript contains and compareDocumentPosition methods to determine whether there is a relationship between HTML nodes_javascript skills

Statement of this Website

The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn