event:
Concept: Some components are carried out certain operations, trigger the execution of some code
* Event: Some operations, such as: click, double click, press the keyboard, the mouse moved
* Event Source: components. Such as: the button text input box ....
* Listener: Code
* Registered listeners: the combination of events, event source, the listener. When an event occurs event source, then trigger the execution of a listener Code
Common events:
1. Click event:
1, onclick (click event) when a user clicks on an object called an event handler
2, ondblclick (double-click event)
2, the focus of the event
1, onblur: lose focus
Checking for general form
2, onfocus: element gets focus
3. Load event:
1, onload: a page or an image finished loading
4, mouse events:
1, onmousedown mouse button is pressed
* Defining process to define a parameter, receiving event object
* Button property of the event object can get the mouse button is clicked a button
2, onmouseup mouse button is released
3, onmousemove mouse is moved
4, onmouseover mouse over an element
5, onmouseout mouse is moved off an element
5, keyboard events:
1, onkeydown of a keyboard key is pressed
2, onkeyup a keyboard key is released
3, onkeypress and a keyboard release button is pressed
6, choice and change
1, the contents field is changed onchange
2, onselect text is selected
7, form events:
1, onsubmit confirmation button is clicked
* You can stop the form submission
* Method returns false, then the form submission is blocked
2, onreset reset button is clicked
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>常见事件</title> <script> 1, onclick (click event) when a user clicks on an object called an event handler 1. Click event: Common events:/ * 2, ondblclick (double-click events) 2, the focus of the event 1, onblur: lose focus 2, onfocus: element receives the focus 3, the load event: 1, the onload: a page or an image has finished loading 4, mouse events: 1, onmousedown mouse button is pressed 2, onmouseup mouse button is released 3, onmousemove mouse is moved 4, onmouseover mouse over an element 5, the mouse is moved off an element onmouseout 5, keyboard events: . 1, a keyboard onKeyDown is pressed 2, onkeyup a keyboard key is released 3, onkeypress of a keyboard key is pressed and release 6, select and change a content of the domain is changed onchange 2, onselect text is selected 7, form events: 1, onsubmit confirmation button is clicked 2, onreset reset button is clicked * / // 2, loaded onload event the window.onload = function () { // . 1, lost focus event document.getElementById ( " username " ) .onblur = function () { Alert ( " lose focus of .... " ); } // 3 binding move the mouse over the element event document.getElementById ( " username " ) .onmouseover = function () { Alert ( " the mouse to the ..... " ); } // 4, bound mouse click events document.getElementById ( " username " ) .onmousedown = function (Event) { Alert ( " mouse clicks ..... " ); Alert (event.button) } document.getElementById ( " username " ) .onkeydown = function ( Event) { // Alert ( "mouse clicks ....."); IF (event.keyCode == 13 is ) { Alert ( " Submit form " ); } } document.getElementById ( " username " ) .onchange = function (Event) { Alert ( " change .... " ) } document.getElementById ( " City " ) .onchange = function (Event) { Alert ( " changed. ... " ) } document.getElementById ( " form " ) .onsubmit = function () { // check whether the user name format for var flag = false; return flag; } function checkForm(){ return false; } } </script> </head> <body> <!-- function fun(){ return checkForm; } --> <form action="#" id="form" onclick="return checkForm()"> <input name="username" id="username"> <select id="city"> <option> --请选择-- </option> <option> 北京 </option> <option> 上海 </option> <option> 广州 </option> </select> <input type="submit" value="提交"> </form> </body> </html>