Easy Learning of JavaScript: event processing functions for DOM programming Learning

Easy Learning of JavaScript: event processing functions for DOM programming Learning

The types of events that can be processed in JavaScript can be divided into mouse events, keyboard events, and HTML events. For every event

Has its own trigger range and method. If the trigger range and method are exceeded, event processing will become invalid. All event processing functions have two groups.

The name of the on + event. For example, the time processing function of the click event is onclick.

JavaScript event processing functions and usage list

One mouse event: All elements on the page can be triggered

(1) click: triggered when you click the mouse button or press the Enter key. Onclick events are the most common mouse events, covering almost all

Many processes of interacting with users. Let's just look at a simple example:
 

<Script type = "text/javascript"> window. onload = function () {var div = document. getElementById ("test"); div. onclick = function () {this. style. backgroundColor = "red" ;}}</script> before clicking Me (initialization status ):

After clicking (it is also the status that will be maintained in the future ):

(2) dblclick: triggered when you double-click the mouse button. This mouse event is rarely used, so we will not give an example.

(3) mousedown: triggered when the user presses the mouse and the mouse does not play.

(4) mouseup: triggered when the user releases the mouse button.

Onmousedown, onmouseup, and onclick events are all the processes of Mouse clicking. When a mouse button is clicked

Onmousedown event. When the mouse button is released, the onmouseup event is triggered.

Event. Let's look at a simple example:

<Script type = "text/javascript"> window. onload = function () {var div = document. getElementById ("test"); div. onmousedown = function () {this. style. backgroundColor = "blue"; this. innerHTML = "loosen the mouse";} div. onmouseup = function () {this. style. backgroundColor = "yellow"; this. innerHTML = "thank you" ;}}</script> before clicking Me (initialization status ):
Click the mouse and do not release it:
Release the mouse (the last hold state, which is initialized after refresh again ):

(5) mouseover: triggered when you move the mouse over an element.

(6) mouseout: triggered when the mouse moves out of an element.

These two events are generally used at the same time and are often used for Web Front-end development. Such as the drop-down menu in the navigation bar and other dynamic effects. Let's see

A simple example:

<Script type = "text/javascript"> window. onload = function () {var div = document. getElementById ("test"); div. onmouseover = function () {this. innerHTML = "thank you";} div. onmouseout = function () {this. innerHTML = "move the Mouse up" ;}</script> before the Mouse Over Me is put (initialization status ):
After the mouse is placed:
Put the mouse down (the last state to be refresh and then initialize ):

(7) mousemove: triggered when the mouse pointer moves over the element. This is a good demonstration, but there is not much change. We will wait for the actual use.

In a detailed demonstration and understanding.

Dual-Keyboard Events

Keydown: triggered when you press any key on the keyboard. If you press it, it will be triggered again.

Keypress: triggered when you press the character key on the keyboard. If you press it, It is triggered again.

Keyup: triggered when the user releases the key on the keyboard.

Due to browser compatibility issues, we will not give an example here. For more information, see: http://www.jb51.net/article/21592.htm

Three HTML events

(1) load: triggered on the window after the page is fully loaded, or triggered on the framework set after the framework set is loaded.

(2) unload: triggered on the window after the page is fully uninstalled, or triggered on the framework set after the framework set is uninstalled.

When a user enters or leaves the page, the onload and onunload events are triggered. The onload event can be used to check the browser type and version of a visitor

Load different versions of web pages based on the information. Onload and onunload events can be used to process cookies. The onload event we used previously

If it is used, it will not be used as an example.

(3) select: triggered when you select one or more characters in the text box (input or textarea.

<Script type = "text/javascript"> window. onload = function () {var userName = document. getElementById ("userName"); userName. onselect = function () {alert ("You selected" + this. value) ;}</script> enter your English Name:

Event that occurs when a field is input and a character is selected.

Effect:

(4) change: triggered when the content of the text box (input or textarea) changes and the focus is lost. Let's hold a simple example:

<Script type = "text/javascript"> window. onload = function () {var userName = document. getElementById ("userName"); userName. onchange = function () {this. value = this. value. toUpperCase () ;}</script> enter your English Name:

When you leave the input box, the triggered function converts the text you entered into uppercase letters.

Before losing focus:
After the focus is lost:

(5) focus: triggered on the window and related elements when the page or element gets the focus.

(6) blur: triggered on the window and related elements when the page or element loses focus.

The above two events are also used together. Let's look at a simple example:

<Script type = "text/javascript"> window. onload = function () {var div = document. getElementById ("test"); div. onmouseover = function () {this. innerHTML = "thank you";} div. onmouseout = function () {this. innerHTML = "move the Mouse up" ;}</script> Mouse Over Me When the input field obtains the focus, the background color change function is triggered.
Initialization status:
After obtaining the focus:
After the focus is lost:

(7) submit: when a user clicks the submit button, it is triggered on the element.

(8) reset: the reset button is triggered on the element. These two events are generally used in the Form submission.

If there is no effect, we will not demonstrate it. In the relevant submission form blog post, we will introduce it in detail.

(9) resize: triggered on the window or frame when the size of the window or frame changes.

(10) scroll: triggered when the user rolls an element with a scroll bar. If the preceding two events are rarely used, no example is provided.