Getting Started with javascript--events (24)

JavaScript events are a series of actions caused by users accessing Web pages;

For example: The user clicks, when the user performs certain actions, then executes a series of code;

An introduction to the event

1 // events are typically used for browser and user interaction , and the first is the advent of IE and Netscape Navigator as a means of sharing server-side meta-load; 2 // The DOM2 level specification begins to attempt to standardize DOM events in a logical manner; 3 // Ie9/firefox/opera/safari and chrome all have implemented the core of the "DOM2 level Event" module; 4 // IE8 before the browser still uses its proprietary event model; 5 // JavaScript has three event models: an inline model/script model and a DOM2 model; 

Two inline models (HTML event handlers)

1 //This model is the most traditional simple method of dealing with events;2 //In an inline model, an event handler is an attribute of the HTML tag that handles the specified event; 3 //Although the inline is used more in the early days, it is mixed with HTML and is not separated from HTML;4 5 //in HTML, the event handler function is executed as a property of the JS code ;6<input type= "button" value= "Pushbutton" onclick= "alert (' Lee ');"/>//note single double quotes;7 //in HTML, the event handler function is executed as a property of the JS function;8<input type= "button" value= "buttons" onclick= "box ();"/>//the function of executing JS;9     //PS: Functions must not be put into the window.onload, so it is not visible;

Three-script model (DOM0-level event handlers)

1 //because the inline model violates the principle of separation of the HTML and JavaScript code layers;2 //we can handle events in JavaScript, which is the scripting model;3     varinput = document.getelementsbytagname (' input ') [0];//get input object;4Input.onclick =function(){//anonymous function execution;5Alert (' Lee '); 6     }7     //PS: Through the anonymous function, the corresponding code can be triggered directly ;8     //functions can also be executed by assigning a value to the specified function name (the function name of the assignment is not followed by parentheses );9Input.onclick = box;//the anonymous function is assigned to the event handler function;TenInput.onclick =NULL;// Delete event handlers ;

Quad event handler function

1 //the types of events that JavaScript can handle are: mouse events/keyboard events/html events;2 JavaScript event handlers and their use list3 when the element affected by the event handler occurs4 onabort Image When image loading is interrupted;5onblur window/frame/all Form objects when the focus moves away from the object;6onchange input box/selection box/text field when the value of an element is changed and the focus is lost;7 onclick link/button/form object/image etc when the user clicks on an object;8OnDblClick Link/button/The form object when the user double-clicks the object;9 Ondragdrop window when the user drags an object into the browser window;Ten onError window/frame/ all form objects when a syntax error occurs in the script;  One onfocus Window/frame/ all form objects when the mouse is clicked or the mouse is moved to focus on the window or frame;  A onkeydown Document/image/link/form when the key is pressed; - onkeypress Document/image/connection/form when the key is pressed and released; - onkeyup Document/image/link/form when the button is released; the onload body/frameset/ image document or image after loading;  -OnUnload the body/frameset document or frameset after unloading; - onmouseout Link when the icon is removed from the link; - onmouseover Link When the mouse is moved to the link; + onmove window when the browser window is moving; - onreset Form Reset button click the Reset button of the form; + onresize window when changing the browser window size; A onselect form elements When a form object is selected; at onsubmit form when sending a form to the server; - //PS: For each event, it has its own trigger range and mode, event processing will be invalidated;

1. Mouse events, all elements of the page can be triggered

1(1). Click: triggers when the user clicks the mouse button or presses the ENTER key;2Input.onclick=function(){3Alert (' Lee ');4     };5 6(2). DblClick: Triggered when the user double-clicks the mouse button;7Input.ondblclick =function(){8Alert (' Lee ');9     }Ten  One(3). MouseDown: Triggered when the user presses the mouse while not bouncing; AInput.onmousedown =function(){ -Alert (' Lee '); -     } the  -(4) MouseUp: Triggered when the user releases the mouse button; -Input.onmouseup =function(){ -Alert (' Lee '); +     } -  +(5). MouseOver: Triggered when the mouse moves over an element; AInput.onmouseover =function(){ atAlert (' Lee '); -     } -  -(6). Mouseout: Triggered when the mouse moves over an element; -Input.onmouseout =function(){ -Alert (' Lee '); in     } -  to(7). MouseMove: Triggered when the mouse pointer moves over an element; +Input.onmousemove =function(){ -Alert (' Lee '); the}

2. Keyboard events

1(1). KeyDown: When the user presses any key on the keyboard to trigger, if press and hold, the trigger will be repeated;2onkeydown =function(){3Alert (' Lee ');4     }5 6(2). KeyPress: When the user presses the character key on the keyboard to trigger, if hold down, it will be triggered repeatedly;7onkeypress =function(){8Alert (' Lee ');9     }Ten  One(3). KeyUp: When the user releases the key trigger on the keyboard; Aonkeyup =function(){ -Alert (' Lee '); -}

3.HTML Events

1(1). Load: When the page is fully loaded (includingall images/javascript file/ CSS files and other external resources ), will trigger the Load event above the window;2Window.onload =function(){3Alert (' Lee ');4     }5 6 //The  Load event can also be triggered above the image , whether it is an image element in the DOM or an image element in HTML;7 //The  onload event handler can therefore be specified in HTML for any image;89     //PS: The new image element does not have to be downloaded after it is added to the document, as long as the SRC attribute is set to start downloading; Ten  One //the <script> element also triggers the Load event so that the developer determines whether the dynamically loaded JavaScript file is loaded; A //Unlike an image, a javascript file is downloaded only after you set the SRC attribute of the <script> element and add the element to the document; 

 1  (2  2    The Unload event  occurs whenever a user switches from one page to another:   3  //   The most common use of this event is to clear the reference to avoid a memory leak;   4  window.onunload =  () { 5  alert (' Lee '  6 } 

1 (3). Select: Triggers when the user selects a text box (input or textarea) that changes and loses focus; 2     function () {3         alert (' Lee '); 4     }

1 (4). Change: Triggers when the content of the text box (input or textarea) changes and loses focus; 2     function () {3         alert (' Lee '); 4     }

1 (5). Focus: Triggers on the window and related elements when the page or element has the focus; the event does not bubble; 2     function () {3         alert (' Lee '); 4     }

1 (6). blur: Triggers on window and related elements when the page or element loses focus; The event does not bubble; 2     function () {3         alert (' Lee '); 4     }

1 (7). Submit: Triggers on the <form> element when the user clicks the Submit button ; 2     function () {3         alert (' Lee '); 4     }

(8). Reset: Triggers on the <form> element when the user clicks the reset button ;     function () {        alert (' Lee ');    }

 1  (9 2   This event is triggered on the window (Windows);  maximizing or minimizing the browser window also triggers the Resize event;   3   ie/ Safari/chrome and opera will constantly trigger resize events when the browser changes;  4   Firefox only triggers the Resize event when the user stops resizing the window;  5  window.onresize =  () { 6  alert (' Lee '  7 } 

Scroll: When the user scrolls the element of the scrollbar to make the trigger;     function () {        alert (' Lee ');    }

Getting Started with javascript--events (24)