Introduction to JavaScript event model (graphic tutorial)

There are three event models in various browsers: original event model (original event model), DOM2 event model, and IE event model. The original event model is supported by all browsers, and the one defined in DOM2 The event model is currently supported by all major browsers except IE.

1. Original event model

The event types: divided into "input events (such as onclicki)" and "semantic events (such as onsubmit)"

The event program can be registered in the following ways:

1. JS code as HTML property value

<input type="button" value="Press me" onclick="alert(&#39;thanks&#39;);"

2. Event handler as JS attribute

Note: Documentation Each HTML element in the document tree has a corresponding JS object. The properties of this JS object correspond to the properties of that HTML element. Whether it is a JS code as an HTML property or a time handler as a JS property, its own The attributes are all functions "function".

<form name="f1">
<input name="b1" type="button" value="Press Me"/>
</form>

The first assignment method:

document.f1.b1.onclick=function(){alert('thanks');};

The second assignment method:

function plead(){window.status="Please Press Me!";}
document.f1.bi.onmouseover=plead;

Can be used as an event handler for JS attributes JS attributes explicitly call

document.myfrom.onsubmit();

The event handler can return false to prevent the browser from executing the default action of the event, commonly used operations such as onsubmit. The exception is
blocking the window.status display event of hyperlink mouseover, which returns true. For example:

<a href="help.htm" onmouseover="window.status=&#39;help&#39;;return true;">help</a>

2. DOM2 event model

This model It is formulated with reference to IE's bubble model, which is a specification formulated by w3c. In the original model, the event handler is directly called once an event occurs, and there is no other event propagation process. In the DOM2 model, events have a special propagation process. , divided into three phases:

(1) capturing phase: The event is propagated from the document all the way down to the target element. During this process, if any ancestor element is interested in the event, it can register its own processing Function.

(2)target phase: The event reaches the target element, and the event processing function of the target element is executed.

(3)bubbling phase: The event rises from the target element until it reaches the document, although all All event types will go through the captruing phase, but only some events will go through the bubbling phase. For example, the submit event will not be floated.
During the entire event propagation process, event.stopPropagation() can be called to stop the event propagation. Call preventDefault() to prevent the browser's default behavior.

addEventListener("eventType","handler","true!false");
removeEventListner("eventType","handler","true!false");

3. IE model

The IE model also provides an event object that encapsulates the details of the event. However, IE does not pass the object into the event processing function. Since there will only be one event at any time, IE uses it as an attribute of the global object window. The event propagation mode in IE corresponds to the second and third stages of DOM2. , first execute the processing function of the target element, and then propagate upward to reach the document. In IE, only mouse events can be captured, but in DOM2, all events can be captured. The method of registering and deleting event processing functions in IE is also different from DOM2.

The registration and deletion of event handling functions is through the element's attachEvent("eventType","handler") and detachEvent("eventType","handler"). Different from dom2, eventType has the on prefix

Features:
1. The propagation process only bubbles and does not capture. Bubble interrupt method:

window.ecent.cancelBubble=true;

2. The Event object is not a function parameter of the event handler, but a global variable of the window.
3. Event registration function: attachEvent() and de-registration: detachEvent().

4. Netscape4 event model

Because Netscape seems to have completely stopped development , so I won’t go into details. To put it simply: it only captures bubbles without bubbling.

The above is what I compiled for everyone. I hope it will be helpful to everyone in the future.

Related articles:

In-depth understanding of self-executing anonymous functions in Javascript (graphic tutorial)

Detailed explanationjavascript The principle of the new operator in (graphic tutorial)

Detailed interpretation of the four forms of existence of JavaScript functions (graphic tutorial)

The above is the detailed content of Introduction to JavaScript event model (graphic tutorial). For more information, please follow other related articles on the PHP Chinese website!