what is javascript event model

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

The operating environment of this tutorial: windows7 system, javascript version 1.8.5, Dell G3 computer.

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 the blocking of the window.status display event of the 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 refers to IE It is formulated based on the 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, which is 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 handler. Function.

(2)target phase: When the event reaches the target element, 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 event types will go through the captruing phase, only some events will go through the bubbling phase. For example, the submit event will not be raised.
Event.stopPropagation() can be called during the entire event propagation process to stop the event. To propagate, 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 event Detailed information, but 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 second events of DOM2. In the third stage, the processing function of the target element is first executed, and then propagated upward to reach the document. In IE, only mouse events can be captured, while 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"). The difference from dom2 is that 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

Since Netscape seems to have Development has been completely stopped, so I won’t go into details. To put it simply: it only captures bubbles but does not.

[Recommended learning: javascript advanced tutorial]

The above is the detailed content of what is javascript event model. For more information, please follow other related articles on the PHP Chinese website!