JavaScript Event Entry Knowledge _javascript tips

JavaScript events are a series of operations caused by users accessing Web pages;
For example: User clicks, when the user performs certain actions, then executes a series of code;

Introduction to an Event

Events are typically used to interact with browsers and user actions, and were first seen in IE and Netscape Navigator as a means of sharing server-side load;
The DOM2-level specification begins to try to standardize DOM events in a logical way;
Ie9/firefox/opera/safari and Chrome have all implemented the core of the "DOM2-level Event" module;
The browser still uses its proprietary event model before IE8;
JavaScript has three kinds of event models: Inline model/scripting model and DOM2 model;

two-inline model (HTML event handler)

This model is the most traditional and simple method of dealing with events;
In an inline model, the event handler function is an attribute of an HTML tag that handles the specified event;
Although inline is used more early, it is mixed with HTML and is not separated from HTML;

In HTML, the event handler function is executed as a property in the JS code;
<input type= "button" value= "buttons" onclick= "alert (' Lee ');"/> Note single double quotes;
In HTML, the event handler function is executed as the attribute of the JS function.
<input type= "button" value= buttons "onclick=" box (); "/> Execute JS function;
PS: Functions must not be placed inside the window.onload, so that it is not visible;

Three-script model (DOM0-level event handlers)

Because the inline model violates the principle of hierarchical separation of HTML and JavaScript code;
We can handle events in JavaScript, which is the scripting model;
  var input = document.getelementsbytagname (' input ') [0];     Get input object;
  Input.onclick = function () {                  //anonymous functions execution;
    Alert (' Lee ');              
  }
  PS: Through the anonymous function, you can directly trigger the corresponding code;  You can also perform a function by assigning a value to a specified function name (the function name assigned does not follow parentheses);
  Input.onclick = box;                      Assigning the anonymous function to the event handler function;
  Input.onclick = null;                     Deletes an event handler;

Four event handler function

The types of events that JavaScript can handle are mouse events/keyboard events/html events;
JavaScript event handler function and its use list
When an element affected by an event-handling function occurs
Onabort image when the image load is interrupted;
onblur window/frame/All Form objects when the focus moves away from the object;
onchange input box/selection box/text field when changing the value of an element and losing focus;
OnClick link/button/form object/image, etc. when the user clicks the object;
OnDblClick link/button/form object when the user double-clicks on the object;
Ondragdrop window when the user drags an object to the browser window;
OnError window/frame/All Form objects when syntax errors occur in the script;
onfocus window/frame/All form objects when the mouse is clicked or the mouse is moved to focus on the window or frame;
onkeydown Documents/images/links/forms when keystrokes are pressed;
onkeypress Document/image/connection/form when the key is pressed and released;
onkeyup Documents/images/links/forms when keys are released;
OnLoad body/Frame Set/image document or image after loading;
OnUnload the principal/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 on the form;
onresize window when changing browser window size;
Onselect form elements When a form object is selected;
OnSubmit form when sending a form to the server;
PS: For each event, it has its own trigger scope and mode, event processing will fail;

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

(1). Click: triggers when the user clicks the mouse button or presses the ENTER key;
Input.onclick = function () {
Alert (' Lee ');
};

(2). DblClick: Triggered when the user double-clicks the mouse button;
Input.ondblclick = function () {
Alert (' Lee ');
}

(3). MouseDown: When the user presses the mouse has not bounced when the trigger;
Input.onmousedown = function () {
Alert (' Lee ');
}

(4) MouseUp: Trigger when the user releases the mouse button;
Input.onmouseup = function () {
Alert (' Lee ');
}

(5). MouseOver: Triggered when the mouse is moved over an element;
Input.onmouseover = function () {
Alert (' Lee ');
}

(6). Mouseout: Triggered when the mouse is moved above an element;
Input.onmouseout = function () {
Alert (' Lee ');
}

(7). MouseMove: Triggered when the mouse pointer moves over the element;
Input.onmousemove = function () {
Alert (' Lee ');
}

2. Keyboard events

(1). KeyDown: When the user presses any key on the keyboard trigger, if press and hold, will repeat the trigger;
onkeydown = function () {
Alert (' Lee ');
}

(2). KeyPress: When the user presses the word on the keyboard keys trigger, if press and hold, will repeatedly trigger;
onkeypress = function () {
Alert (' Lee ');
}

(3). KeyUp: When the user releases the key trigger on the keyboard;
onkeyup = function () {
Alert (' Lee ');
}

3.HTML Event

(1). Load: When the page is fully loaded (including external resources such as all images/javascript file/css files), the Load event on window is triggered;
Window.onload = function () {
Alert (' Lee ');
}

The Load event can also be triggered on the image, whether it is an image element in the DOM or an image element in HTML;
Therefore, you can specify the OnLoad event handler for any image in HTML;

PS: The new image element does not have to start downloading after adding to the document, as long as the SRC attribute is set to start downloading;

The <script> element also triggers the load event so that developers can determine whether the dynamically loaded JavaScript file is loaded;
Unlike images, JavaScript files are not downloaded until the src attribute of the <script> element is set and the element is added to the document;

(2). Unload: Triggered when the document is completely uninstalled;
Unload events occur as long as the user switches from one page to another;
The most common use of this event is to clear the reference to avoid memory leaks;
Window.onunload = function () {
Alert (' Lee ');
}
(3). Select: When the user selects the text box (input or textarea) content changes and loses focus after the trigger;
Input.onselect = function () {
Alert (' Lee ');
}
(4). Change: When the text box (input or textarea) content changes and lose focus after the trigger;
Input.onchange = function () {
Alert (' Lee ');
}
(5). Focus: When a page or element is focused, it fires on window and related elements;
Input.onfocus = function () {
Alert (' Lee ');
}
(6). blur: Triggers on window and related elements when the page or element loses focus; This event does not bubble;
Input.onblur = function () {
Alert (' Lee ');
}
(7). Submit: When the user clicks on the Submit button to trigger on the <form> element;
Form.onsubmit = function () {
Alert (' Lee ');
}

(8). Reset: When the user clicks on the Reset button to trigger on the <form> element;
Form.onreset = function () {
Alert (' Lee ');
}

(9). Resize: When the browser window is adjusted to a new height or width, the resize event is triggered;

This event is triggered on Windows (window), and the resize event is triggered by maximizing or minimizing the browser window;
Ie/safari/chrome and Opera constantly trigger resize events as browsers change;
Firefox only triggers the Resize event when the user stops resizing the window;
Window.onresize = function () {
Alert (' Lee ');
}

(a). Scroll: When the user scrolls the elements of the scroll bar to trigger;
Window.onscroll = function () {
Alert (' Lee ');
}