1. Original event model
Its event types: divided into "input events (such as onclicki)" and "semantic events (such as onsubmit)"
The registration of event programs can be done in the following ways:
1. JS code as HTML property value
The code copy is as follows:<input type="button" value="Press me" onclick="alert('thanks');"
2. Event handler as JS attribute
Note: Each HTML element in the document has a corresponding JS object in the document tree. The attributes of this JS object correspond to the properties of that HTML element. Whether it is the JS code of HTML nature or the time handler of JS attributes, its own attributes are the function "function".
Copy the code as follows:<form name="f1">
<input name="b1" type="button" value="Press Me"/>
</form>
The first assignment method:
The code copy is as follows: document.f1.b1.onclick=function(){alert('thanks');};
The second assignment method:
The code copy is as follows: function plead(){window.status="Please Press Me!";}
document.f1.bi.onmouseover=plead;
Event handlers as JS attributes can be explicitly called with JS attributes
The code copy is as follows: document.myfrom.onsubmit();
The event handler can return Fale to prevent the browser from performing the default actions of events, commonly used operations such as onsubmit. The exception is
The blocking of the window.status display event of the hyperlink mouseover is to return true. For example:
Copy the code as follows: <a href="help.htm" onmouseover="window.status='help';return true;">help</a>
2. DOM2 event model
This model is formulated with reference to the IE bubble model, which is a specification formulated by w3c. In the original model, the event handle is called directly 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 stages:
(1) capturing phase: The event is propagated from the document to the target element. During this process, if any ancestor element is interested in the event, you can register your own processing function.
(2) target phase: The event reaches the target element and executes the event handling function of the target element.
(3) Bubbling phase: Events rise from the target element until the document. Although all event types will go through the captruing phase stage, only some events will go through the bubbling phase stage, 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 and preventDefault() can be called to block the browser's default behavior.
The code copy is as follows: addEventListener("eventType","handler","true!false");
removeEventListner("eventType","handler","true!false");
IE model
The IE model also provides an event object that encapsulates the detailed information of the event, but IE does not pass the object into the event handling function. Since there will only be one event at any time, IE regards 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, the processing function of the target element is executed, and then the upload reaches the document. Only mouse events can be captured in ie. All events can be captured in DOM2. The method of registering and deleting event handling functions in IE is also different from DOM2.
The registration and deletion of event handlers are through the element's attachmentEvent("eventType","handler") and detachEvent("eventType","handler" ). Unlike dom2, eventType has an on prefix
Features:
1. The propagation process only bubbles and does not capture it. Method for interrupting bubbles:
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 functions: attachEvent() and anti-registration: detachEvent().
4. Netscape4 event model
Since Netscape seems to have completely stopped developing, I won’t explain it in detail. Simply put, it just catches and does not bubble.
The above is a basic introduction to the JavaScript event model. I hope it can give you a reference and I hope you can support Wulin.com more.