The events themselves are fairly intuitive and commonly used:
| Event |
Describe |
| Abort |
The picture is blocked and cannot be loaded |
| Blur,focus |
Lose focus, get focus |
| Change |
Applies to form elements and determines whether changes occur when an element makes it focus |
| Click,dblclick |
Click, double-click |
| Keydown,keyup,keypress |
Press the key, the key to leave, press the key when the trigger, note that keypress only for the number of letter keys effective |
| Load |
When you load a picture or page |
| Mousedown,mouseup |
Press the key to release the key |
| Mouseover,mouseout |
Over is when the mouse enters the time to start, out is left to trigger |
| MouseMove |
Mouse move |
| Reset,submit |
Resetting and submitting forms |
These are just a list of commonly used events, and a complete and specific list can be found in the relevant manuals.
1. Event handling on Level 0 Dom
The event-handling method on Level 0 DOM is very early and is now widely used, and it is supported from the beginning of IE4.0.
1.1 Event Registration
The following describes how to add a response event, which is to add a handler for an event.
(1) inline registration (inline registration)
This is the simplest one, set the event responder as an attribute of the HTML tag, as in the following example, it can be code, and of course more often a function call. The handle of an event is typically the name of the event plus the prefix on.
<ptml> <pead> <title>event sample</title> <style type= "Text/css" > #adiv {width:200px; height:200px; Background-color: #00aa00; } </style> </pead> <body> <div id= "Adiv" onmouseover= "this.innerhtml+= ' OK '" > a </div> ; </body> </ptml>
[Ctrl + A All SELECT Note: If the need to introduce external JS need to refresh to perform]
This approach is simple and is supported by any browser, with the disadvantage of mixing JavaScript code with HTML code and not adding event responders dynamically or adding multiple responders.
(2) Traditional mode (traditional registration)
This pattern adds the event as a property of the object. For example:
<script type= "Text/javascript" > Function HelloWorld () {alert ("Hello World"); var d = document.getElementById ("Adiv"); D.onmouseout = function () {this.innerhtml + = ' Bye '; } window.onload = HelloWorld; </script>
[Ctrl + A All SELECT Note: If the need to introduce external JS need to refresh to perform]
1.2 Arguments for event (event object)
Some event handlers need more information about the event, such as where the Click event occurred. This information is passed to the event handler through the event arguments. The IE event model and the event model of the consortium are different for this implementation.
IE takes the event object as an attribute of the Window object, while the consortium takes the event object as a parameter to the handler. The following is an example of the Click event, which is written separately for IE and for browsers that support the standard of the consortium.
<textarea id="runcode66905"><ptml> <pead> <title>event sample</title> <style type= "Text/css" > #adiv {width:20 0px; height:200px; Background-color: #00aa00; } </style> <script type= "Text/javascript" > Function Ieclick () {var res = document.getElementById ("Result" ); var s; For (var p in window.event) {s + = p.tostring () + ":" + window.event[p] + ""; } res.innerhtml = S; function W3cclick (args) {var res = document.getElementById ("result"); var s; For (var p in args) {s + = p.tostring () + ":" + args[p] + ""; } res.innerhtml = S; } </script> </pead> <body> <div id= "Adiv" onclick= "W3cclick (event)" >a </div> <div I D= "Result" > </div> </body> </ptml></textarea>
[Ctrl + A All SELECT Note: If the need to introduce external JS need to refresh to perform]
This section of the page code can display all the properties of the Click event Object. The above example is the method used by the browsers of the Web browser to use under IE, just change to onclick= "Ieclick ()". Note that the name of the parameter in the W3cclick can only be an event. Print out a lot of properties, I used FF3.5,CHROME3,IE8 (standard mode and compatibility mode) to run, they have a common property is not much, in fact, these common attributes have meaning, they are:
Altkey,shiftkey,ctrlkey: Whether to press the Alt,shift,ctrl key
Clientx,clienty: client area coordinates (browser window), Screenx,screeny: Screen area coordinates
Type : Event Types
Although the parameters of the event are delivered in a somewhat different way, it does not cause much trouble to write Cross-browser code, only to be judged at the beginning of the function window.event there is no definition.
Copy Code code as follows:
function Bothclick (args) {
var evnt = window.event? Window.event:args;
alert (EVNT.CLIENTX);
}
The registration handle is: <div id= "Adiv" onclick= "Bothclick (event)" >a</div> if the handle is registered in the second way, no special treatment is required.
1.3 Float of the event
Objects on the page are usually overlapping, such as a div that can include several div or other elements. When an event is triggered and multiple elements are affected, and they all have an appropriate event handler, what do these event handlers do? In what order? This is the issue discussed in this verse. In general, it is not uncommon for an event to be caught by multiple handles. First look at an example (CSS omitted):
<script type= "Text/javascript" > Function Body_click () {var Dis=document.getelementbyid ("res"); dis.innerhtml+= "Body Click"; function Out_click () {var Dis=document.getelementbyid ("res"); dis.innerhtml+= "Outer Click"; function Inner_click () {var Dis=document.getelementbyid ("res"); dis.innerhtml+= "Inner Click"; } </script> </pead> <body onclick= "Body_click ()" > <div id= "Out" onclick= "Out_click ()" > Outer Div <div id= "Innerdiv" onclick= "Inner_click ()" > Inner div </div> </div> <div id= "res" > < /div> </body>
[Ctrl + A All SELECT Note: If the need to introduce external JS need to refresh to perform]
In the body, the outer div and Inner div All respond to the Click event, and the results are as follows:
Visible, the event is triggered sequentially by an inward-outer element. (The general textbook says it's rising upward, bubbling, I think this upward is ambiguous, I initially mistook the inner element is above, because it can cover the outer elements of the event with level 0 DOM registration, its float method whether IE or the universal is unified.
1.4 Lifting of the lift
Sometimes we need to respond to an event, we do not need the outer elements to respond again, you can cancel the event of the float. The cancellation method IE is inconsistent with the consortium. IE is implemented by setting the Cancelbubble property of the event object, and the Stoppropagation method of calling event objects is the Internet.
For example, the above example should read:
Copy Code code as follows:
function Inner_click (ARG) {
var Evnt=window.event?window.event:arg;
var Dis=document.getelementbyid ("res");
dis.innerhtml+= "Inner Click <br/>";
if (evnt.stoppropagation) {
Evnt.stoppropagation ();
}else{
Evnt.cancelbubble=true;
}
}<div id= "Innerdiv" onclick= "Inner_click (event)" >
The other is unchanged so that you can see only one row of output.
This in the 1.5 event handler function
This is a pointer to the object that triggered the event.
The event handle for Level 2 DOM is described below. This is a relatively new way, and it does not depend on any particular event handle attribute. The way the consortium is defined is
Object.addeventlistener (' event ', Function,boolean)
The first argument is the event name, the second is the event response function, and if the third variable is true, the event function is triggered in the event bubbling phase, otherwise it is triggered during the capture phase of the event. There are two stages to the event, the first of which is capture, that is, the event is passed from the outermost layer to the inner layer, the corresponding event-handler function is triggered sequentially, then the bubbling phase, and the event is passed from the outermost element to the outer layer. Look at an example:
<ptml> <pead> <title>dom 2 event</title> <script type= "Text/javascript" > Function Setup ( ) {var Div=document.getelementbyid (' Testdiv '); Div.addeventlistener (' click ', function () {alert (' div true ');},true); Document.addeventlistener (' click ', function () {alert (' body true ');},true); Div.addeventlistener (' click ', function () {alert (' div false ');},false); Document.addeventlistener (' click ', function () {alert (' body false ');},false); } Window.onload=setup; </script> </pead> <body > <div id= ' testdiv ' ></div> <body> </ptml>
[Ctrl + A All SELECT Note: If the need to introduce external JS need to refresh to perform]
Click on the gray box, will pop up the body true,div True,div false,body false. Unfortunately, IE does not support this approach, and the latest IE8 is not supported. However, IE also has a similar method of registering the event, the name is attachevent. However, this method does not have a third parameter, which supports the event response in the bubbling phase. The Attachevent function passes event arguments in line with the consensus of the Consortium and is passed by the event argument, but the this within its function points not to the triggering event object, but to window forever. In the event object, there is a property that points to the object that triggers the event, in the Target,ie is srcelement, in the browser that conforms to the Web-code, this and event.target in the events handler point to the same object. The following program shows an IE and a consortium-compatible event handler:
<ptml> <pead> <title>dom 2 event</title> <script type= "Text/javascript" > Function clickm E (event) {var target1=event.target?event.target:event.srcelement; alert (target1.innerhtml); function Setup () {var Div=document.getelementbyid (' Testdiv '); if (Div.addeventlistener) {div.addeventlistener (' click ', Clickme,false); }else{div.attachevent (' onclick ', clickme); }} Window.onload=setup; </script> </pead> <body> <div id= ' testdiv ' > Hello world. </div> </body> </ptml>
[Ctrl + A All SELECT Note: If the need to introduce external JS need to refresh to perform]
There are a lot of inconsistencies in the event handler in the case of the Internet and IE, which is cumbersome. Fortunately, most of them have better solutions. For more information please refer to http://www.quirksmode.org/js/events_events.html
