Table of Contents
1. Event type
1.Window events
2. Form element events
3.Image events
4. Keyboard events
5.Mouse events
2. Basic mechanism of JavaScript event processing
3. Methods of binding events
1.DOM element binding
2. JavaScript code binding events
3. Listening event function binding
4. Event object of JavaScript event
1. Get the event object
2. Obtain mouse coordinates
3. Get the event source
One. Event Type
JavaScript events are generally used to capture user operations. The event types are as follows:
1.Window event
Window events only work in body and frameset elements
onload executes the script when the page is loaded
onunload executes the script when the page is closed
2. Form element event
Only valid in forms
onchange executes script when element changes
onsubmit is executed when the form is submitted
onreset executes script when element is selected
onblur executes script when element loses focus
onfocus is executed when the element gets focus
3.Image event
This event is used in the img tag
onabort Execute script when image loading is interrupted
4.Keyboard events
Keyboard events are invalid in the following tags: base, bdo, br, frame, frameset, head, html, iframe, meta, param, script, style and title
onkeydown executes a script when the keyboard is pressed
onkeypress Execute script when keyboard is pressed and released
onkyeup executes the script when the keyboard is released
5.Mouse event
Mouse events are invalid in the following tags: base, bdo, br, frame, frameset, head, html, iframe, meta, param, script, style and title
onclick executes the script when the mouse is clicked
ondblclick executes the script when the mouse is double-clicked
onmousedown executes script when mouse button is pressed
onmouseout Execute script when mouse pointer moves out of element
onmouseover Execute script when mouse hovers over element
onmouseup executes script when mouse button is released
onmousemover executes the script when the mouse moves
2. Basic mechanism of JavaScript event processing
(1) Bind event processing functions to DOM elements;
(2) Monitor user operations
(3) When the user performs an operation corresponding to the bound event on the corresponding DOM element, the event processing function responds;
(4) Update the processing results to the html document
Three. Methods of binding events
The first version of the event must be bound to the DOM element. Only after binding can the user’s operations be monitored. There are three binding methods:
1.DOM element binding
The so-called DOM element binding is to bind events to HTML elements. The general format is as follows:
onxxx="javascript code"
The javascript code is a function for some events. These functions can be internal to JavaScript or defined by ourselves.
For example, a native function binds an event and implements an alert function by binding the event onclick.
Click the button and a warning box will appear
If the above code can also be implemented through a custom function:
2.JavaScript code binding event
The so-called JavaScript event binding is to achieve the separation of events and HTML elements by binding events in JavaScript. The syntax of event binding is generally:
elementobject.onxxx=function(){
//event function
}
For example: a case where the image changes when hovering the mouse
When the mouse does not move over the picture:
When hovering the mouse over the image:
3. Listening event function binding
There are two event listening functions, addEventListener() and attachEvent() functions
(1) addEventListener() function syntax:
elementobject.addEvenListener(evenName,handle,useCapture);
Look at the parameters:
evenName The name of the event, but the name here does not add on, such as click, dblclick event
handle event handle, event processing function
useCapture Boolean value, whether to use capture, usually false
For example, the example of the beautiful girl picture above is written using the listening event function:
(2) attachEvent() function syntax:
Note: The previous addEventListener() function can be used for general browsing, but it cannot be used for IE8 and below versions. You can use the attachEvent() function, but this function is too old. Some browsers really do not support addEvent() )
elementobject.addEvent(evenName,handle);
parameter:
evenName The name of the event, but the name here does not add on, such as click, dblclick event
handle event handle, event processing function
4. Event object of JavaScript event
The event object of JavaScript events represents the current event. The attributes of the event object contain the status of the current object and are only valid during the event.
1. Get event object
The event object parameter is passed in, and the current event of a certain DOM can be obtained by passing in:
elementobject.onxxx=function(){
var eve=e //Declare a variable to receive the event object;
}
For IE8 and below, event must be used as a property of the window object
elementobject.onxxx=function(){
var eve=window.event;
}
Small example:
2. Get mouse coordinates
Mouse coordinates are an attribute of the event object. Mouse coordinates include mouse Y-axis coordinates, Y-axis coordinates, relative client coordinates and relative screen coordinates.
Properties specified by W3C specifications:
clientX The horizontal coordinate of the mouse pointer relative to the client
clientY The vertical coordinate of the mouse pointer relative to the client
screenX The horizontal coordinate of the mouse pointer relative to the computer screen
screenY The vertical coordinate of the mouse pointer relative to the computer screen
IE browser-specific properties:
offsetX is the horizontal coordinate of the location where the event occurs in the coordinate system of the event source element.
offsetY is the vertical coordinate of the location where the event occurs in the coordinate system of the event source element.
x horizontal coordinate of the location where the event occurred
y is the vertical coordinate of the location where the event occurred
example:
3. Get event source
As the name suggests, it depends on which element attribute the event occurred. This attribute is target. This attribute is not supported under IE8 and below. You can use the SRCElement attribute to obtain the event source.
example:
