Events are quite intuitive and commonly used:
| Event |
Description |
| Abort |
The image cannot be loaded because it is blocked. |
| Blur, focus |
Lose focus and get focus |
| Change |
It is applicable to form elements. When an element sets its focus, it determines whether it has changed. |
| Click, dblclick |
Click and double-click |
| Keydown, keyup, keypress |
Press the key and press the key to exit. It is triggered when the key is pressed. Note that keypress is only valid for the numeric keys. |
| Load |
When loading images or pages |
| Mousedown, mouseup |
Press the key to open the key |
| Mouseover, mouseout |
Over is triggered when the mouse enters and the mouse leaves. |
| Mousemove |
Move the mouse |
| Reset, submit |
Reset and submit forms |
The above is only a list of common events. You can find the relevant manual for the complete list.
1. Event Processing on level 0 DOM
The event processing method on level 0 DOM is relatively early and is widely used at present. This method has been supported since IE4.0.
1.1 event registration
The following describes how to add a response event, that is, to add a handler for the event.
(1) inline Registry)
This is the simplest method. The Event Response Program is set as an attribute of the html Tag. For example, it can be code. Of course, it is a function call in more cases. The handle of an event is generally the name of the event with the prefix on.
<Html> <pead> <title> event sample </title> <style type = "text/css"> # adiv {width: 200px; height: 200px; background-color: #00aa00 ;}</style> </pead> <body> a </body> </ptml>
[Ctrl + A select all Note: If you need to introduce external Js, You need to refresh it to execute]
This method is very simple. It is supported by any browser. The disadvantage is that Javascript code and HTML code are mixed together. In addition, you cannot dynamically add Event Response programs or add multiple response programs.
(2) traditional mode (traditional registration)
In this mode, events are added as attributes of objects. For example:
[Ctrl + A select all Note: If you need to introduce external Js, You need to refresh it to execute]
1.2 Event parameters (Event object)
Some Event Handlers need more information about the event, such as the location where the click event occurs. The information is transmitted to the Event Handler through the event parameters. The IE event model and W3C event model have different implementations.
IE regards the event object as an attribute of the window object, while W3C regards the event object as a parameter of the processing program. The following uses the click event as an example to write a program for IE and a browser that supports W3C standards.
<Html> <pead> <title> event sample </title> <style type = "text/css"> # adiv {width: 200px; height: 200px; background-color: #00aa00 ;}</style> </pead> <body> a </body> </ptml>
[Ctrl + A select all Note: If you need to introduce external Js, You need to refresh it to execute]
This page code shows all the properties of the click event object. The above example is the method used by W3C browsers. To use it in IE, you only need to change it to onclick = "IEClick ()". Note that the parameter name in W3CClick can only be event. There are many printed attributes. I use FF3.5, Chrome3, and IE8 (standard mode and compatible mode) to run them separately. There are not many attributes in total, and these attributes are actually meaningful, they are:
AltKey, shiftKey, ctrlKey: whether to press alt, shift, ctrl
ClientX, clientY: client zone coordinates (browser window), screenX, screenY: screen zone coordinates
Type: Event type
Although the parameter transmission method of the event is a bit different, it does not cause too much trouble to write cross-browser code. You only need to judge whether window. event has been defined at the beginning of the function.
Copy codeThe Code is 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 you use the second method to register the handle, no special processing is required.
1.3 event float
Objects on a page are usually overlapped. For example, a div can contain several divs or other elements. When an event is triggered, multiple elements are affected at the same time, and all of them have corresponding Event Handlers. What are these Event Handlers executed? In what order? This is the question to be discussed in this section. Generally, a single event is captured by multiple handles. First, let's look at an example (CSS omitted ):
</Head> <body onclick = "body_click ()"> Outer Div Inner Div </body>
[Ctrl + A select all Note: If you need to introduce external Js, You need to refresh it to execute]
In the body, both the outer div and the inner div respond to the click event. The result is as follows:
It can be seen that events are triggered by elements of the inner and outer layers in sequence. (In general, the saying in the teaching material is "upstreaming" and "bubbling". I think this is ambiguous. At the beginning, I mistakenly thought that the inner element is above, because it can overwrite the outer element) events registered with level 0 DOM, its float method is uniform for IE and W3C.
Cancellation of 1.4 float
Sometimes, after responding to an event, we do not need the elements of the outer layer to respond again. We can cancel the event. The cancellation method IE is inconsistent with W3C. IE is implemented by setting the cancelBubble attribute of the event object, while W3C calls the stopPropagation method of the event object.
For example, the above example is changed:
Copy codeThe Code is 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 others remain unchanged, so that only one row of output can be seen.
1.5 this in the event processing function
This indicates the object that triggers the event.
The following describes the event handle of level 2 DOM. This method is a relatively new method, which does not depend on any specific event handle attributes. The W3C rules are as follows:
Object. addEventListener ('event', function, boolean)
The first parameter is the event name, the second is the event response function, and the third variable is true, the event function is triggered in the event bubble stage, otherwise, the event is triggered during the event capture phase. W3C specifies that an event has two phases: capture, that is, the event is transmitted from the outermost element to the inner layer, and the corresponding event processing function is triggered in sequence, followed by the bubble stage, the event is transmitted from the innermost element to the outer element. Let's look at an example:
<Html> <pead> <title> DOM 2 Event </title> </pead> <body> </ptml>
[Ctrl + A select all Note: If you need to introduce external Js, You need to refresh it to execute]
If you click the gray box, the body "true", "div" true "," div "false", and "body" false "will pop up in sequence. Unfortunately, IE does not support this method, and the latest IE8 does not. However, IE also has a similar method for registering an event, named attachEvent. However, this method does not have a third parameter. It supports Event Response in the bubble stage. The attachEvent function is consistent with W3C when passing event parameters. It is also passed through the event parameter. However, this inside the function points to a window instead of a trigger event object. In the event object, there is an attribute pointing to the object that triggers the event, W3C is the target, IE is the srcElement, and in the page view of the w3cworkflow, thisand event.tar get in the event processing file point to the same object. The following program shows an event handler compatible with IE and W3C:
<Html> <pead> <title> DOM 2 Event </title> </pead> <body> Hello World. </body> </ptml>
[Ctrl + A select all Note: If you need to introduce external Js, You need to refresh it to execute]
There are many inconsistencies between W3C and IE in the event processing program, which is very troublesome. Fortunately, most of them have better solutions. For more information, see http://www.quirksmode.org/js/events_events.html
