Javascript browser event summary

Events themselves are quite intuitive, and commonly used are:

event	describe
abort	The image is blocked and cannot be loaded
blur,focus	Lose focus, gain focus
change	Applicable to form elements, determine whether there has been any change when the element focuses on it.
click,dblclick	Click, double-click
keydown,keyup,keypress	Press the key, the key leaves, and triggers when the key is pressed. Note that keypress is only valid for the numeric letter keys.
load	When loading pictures or pages
mousedown,mouseup	Press the key and release the key
mouseover,mouseout	over is set off when the mouse enters, and out is triggered when the mouse leaves.
mousemove	Mouse movement
reset,submit	Reset and submit forms

The above is just a list of commonly used events. For a complete and specific list, you can find the relevant manual.

1. Event handling on level 0 DOM
Event handling methods on level 0 DOM are relatively early and are widely used at present. This type of method has been supported since IE4.0.

1.1 Event Registration
The following mainly introduces how to add response events, that is, add handlers to events.

(1) Inline registration

This is the easiest type. Set the event response program as an attribute of the html tag. As shown in the following example, it can be code, and of course, it is a function call in more cases. The handle to an event is usually the prefix of the event on.

This method is very simple and supports it by any browser. The disadvantage is that it mixes Javascript code and HTML code, and it cannot dynamically add event responders, nor can it add multiple responders.

(2) Traditional registration

This pattern adds events as an object's properties. For example:

1.2 Event parameters (Event object)
Some event handlers require some more information about the event, such as where the click event occurs, etc. This information is passed to the event handler through event parameters. The implementation of this is different between the IE event model and the W3C event model.

IE takes the event object as an attribute of the window object, while W3C takes the event object as a parameter of the handler. Take the click event as an example to write a program for IE and browsers that support W3C standards respectively.

This page code can display all properties of the click event object. The above example is the method used by W3C browser. To use it in IE, just change it to onclick=”IEClick()”. Note that the parameter name in W3CClick can only be an event. There are many attributes printed out. I run them with FF3.5, Chrome3, and IE8 (standard mode and compatibility mode). They don’t have many attributes in common, but in fact only these common attributes are meaningful. They are:

altKey,shiftKey,ctrlKey:Whether to press the alt,shift,ctrl keys

clientX, clientY: client area coordinates (browser window), screenX, screenY: screen area coordinates

type: Event type

Although the parameters of the event are passed a little differently, it does not cause much trouble for writing cross-browser code. You only need to determine whether there is a definition at the beginning of the function.

The registration handle is:<div onclick="BothClick(event)" >a</div>If the handle is registered in the second way, no special treatment is required.

1.3 The rise of events
Objects on the page are usually overlapping, for example, a div can include several divs or other elements. When a certain event is triggered, multiple elements are affected at the same time and they all have corresponding event handlers. So what are the event handlers executed? In what order is it executed? This is the issue to be discussed in this section. Usually, it is rare to see an event being captured by multiple handles. Let’s take a look at an example (CSS omitted):

In body, both the outer div and the inner div respond to the click event, and the result is as follows:
 
It can be seen that events are triggered by elements from the inside to the outer layer in turn. (The general saying in the textbook is to rise up, bubble, I think this upward is ambiguity. I mistakenly thought that the inner element is above because it can cover the outer element) Events registered with level 0 DOM, its floating method is unified in both IE and W3C.

1.4 Cancel of Floating Rise
Sometimes we need to respond to an event without responding to the outer element, which can cancel the rise of the event. The cancellation method IE and W3C are inconsistent. IE is implemented by setting the cancelBubble attribute of the event object, while W3C is used to call the stopPropagation method of the event object.

For example, the above example is changed to:

The others remain unchanged, so that you can only see one line of output.

1.5 This in event handling function
This this points to the object that triggers the event.

The event handles for level 2 DOM are introduced below. This method is a relatively new way, it does not depend on any specific event handle attributes. The W3C stipulates the method

(‘event',function,boolean)

The first parameter is the event name, the second is the event response function, and if the third variable is true, the event function is triggered during the event bubble stage, otherwise it is triggered during the event capture stage. W3C stipulates that there are two stages of occurrence of events. First, it is capture, that is, the event is passed from the outermost element to the inner layer, the corresponding event handling function is triggered in turn, and then the bubble stage, where the event is passed from the innermost element to the outer layer. See an example:

Click on the gray box and body true, div true, div false, body false will pop up one by one. Unfortunately, IE does not support this method, and the latest IE8 does not support it. However, IE also has a similar method to register events, namely attachEvent. However, this method does not have a third parameter, it supports event response in the bubbling stage. The attachEvent function passes event parameters consistent with W3C and is also passed through event parameters. However, this inside its function does not point to the trigger event object, but always points to the window. In the event object, there is an attribute pointing to the object that triggers the event, target in W3C, srcElement in IE, and in browsers that comply with W3C specifications, this and the object pointing to. The following program shows an IE and W3C compatible event handler:

There are still many inconsistencies between W3C and IE in the event handler, which is very troublesome. Fortunately, most of them have better solutions. For more information, please refer to /js/events_events.html