Introduction to JavaScript events_javascript skills

JavaScript events are a series of operations caused by users accessing a web page;
For example: the user clicks; when the user performs certain operations, a series of codes are executed;

1 Event Introduction

Events are generally used to interact between browsers and user operations; they first appeared in IE and Netscape Navigator as a means of sharing server-side computational load;
The DOM2 level specification began to try to standardize DOM events in a logical way;
IE9/Firefox/Opera/Safari and Chrome have all implemented the core part of the "DOM2-level events" module;
Browsers before IE8 still use their proprietary event model;
JavaScript has three event models: inline model/script model and DOM2 model;

2 Inline model (HTML event handler)

This model is the most traditional and simple way to handle events;
In the inline model, the event handler is an attribute of the HTML tag, used to handle specified events;
Although inline was used more in the early days, it was mixed with HTML and was not separated from HTML;

Use the event handler function as an attribute in HTML to execute JS code;
3bab753f214b68b09196fee06514dc6a Pay attention to single and double quotation marks;
Use event handling functions as attributes in HTML to execute JS functions;
1adc44c64a3bf2a3991103a98dc87f15 Execute JS function;
PS: The function must not be placed inside window.onload, otherwise it will not be visible;

Three script models (DOM level 0 event handler)

// 由于内联模型违反了HTML和JavaScript代码层次分离的原则;
// 我们可以在JavaScript中处理事件,这种处理方式就是脚本模型;
  var input = document.getElementsByTagName('input')[0];     // 得到input对象;
  input.onclick = function(){                  // 匿名函数执行;
    alert('Lee');              
  }
  // PS:通过匿名函数,可以直接触发对应的代码;
  //  也可以通过指定的函数名赋值的方式来执行函数(赋值的函数名不要跟括号);
  input.onclick = box;                      // 把匿名函数赋值给事件处理函数;
  input.onclick = null;                     // 删除事件处理程序;

Four event processing functions

//The event types that JavaScript can handle are: mouse events/keyboard events/HTML events;
JavaScript event handling functions and their usage list
Event handler function Affected elements When occurs
onabort image When image loading is interrupted;
onblur window/frame/all form objects when focus moves away from the object;
onchange input box/select 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 the object;
ondragdrop window When the user drags and drops an object into the browser window;
onError window/frame/all form objects when a syntax error occurs in the script;
onfocus window/frame/all form objects When the mouse is clicked or the mouse movement is focused on the window or frame;
onkeydown document/image/link/form when the key is pressed;
onkeypress document/image/connection/form When the key is pressed and then released;
onkeyup document/image/link/form when the key is released;
onload body/frameset/image after the document or image is loaded;
onunload body/frameset After the document or frameset is unloaded;
onmouseout link When the icon removes the link;
onmouseover link When the mouse moves to the link;
onmove window When the browser window moves;
onreset form reset button Click the reset button of the form;
onresize window When changing the size of the browser window;
onselect form element When selecting a form object;
onsubmit form When sending the form to the server;
// PS: For each event, it has its own trigger range and method, and event processing will be invalid;

1. Mouse events can be triggered by all elements on the page

(1).click: Triggered 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: Triggered when the user presses the mouse but has not yet bounced it up;
​ input.onmousedown = function(){
alert('Lee');
}

(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;
​ input.onmouseover = function(){
alert('Lee');
}

(6).mouseout: Triggered when the mouse moves out of an element;
​ input.onmouseout = function(){
alert('Lee');
}

(7).mousemove: Triggered when the mouse pointer moves on the element;
​ input.onmousemove = function(){
alert('Lee');
}

2. Keyboard events

(1).keydown: Triggered when the user presses any key on the keyboard. If pressed and held down, it will be triggered repeatedly;
onkeydown = function(){
alert('Lee');
}

(2).keypress: Triggered when the user presses a character key on the keyboard. If pressed and held down, it will be triggered repeatedly;
onkeypress = function(){
alert('Lee');
}

(3).keyup: Triggered when the user releases a key on the keyboard;
onkeyup = function(){
alert('Lee');
}

3.HTML events

(1).load: When the page is completely loaded (including all images/JavaScript files/CSS files and other external resources), the load event on the window will be triggered;
window.onload = function(){
alert('Lee');
}

// The load event can also be triggered on images, whether it is an image element in DOM or an image element in HTML;
// So you can specify an onload event handler for any image in HTML;
9578b5a373e8fdf0cb027d895dcadda2
// PS: New image elements do not necessarily start downloading after they are added to the document. As long as the src attribute is set, the download will start;

// The 3f1c4e4b6b16bbbd69b2ee476dc4f83a element will also trigger the load event so that developers can determine whether the dynamically loaded JavaScript file has been loaded;
// Unlike images, downloading of JavaScript files will only start after the src attribute of the 3f1c4e4b6b16bbbd69b2ee476dc4f83a element is set and the element is added to the document;

(2).unload: Triggered when the document is completely unloaded;
// As long as the user switches from one page to another, the unload event will occur;
// The most common use of this event is to clear references to avoid memory leaks;
​​ Window.onunload = function(){
alert('Lee');
}
(3).select: Triggered when the user selects a text box (input or textarea) whose content changes and loses focus;
​​ input.onselect = function(){
alert('Lee');
}
(4).change: Triggered when the content of the text box (input or textarea) changes and loses focus;
​​ input.onchange = function(){
alert('Lee');
}
(5).focus: Triggered on window and related elements when the page or element gains focus; this event will not bubble;
​​ input.onfocus = function(){
alert('Lee');
}
(6).blur: Triggered on window and related elements when the page or element loses focus; this event will not bubble;
​​ input.onblur = function(){
alert('Lee');
}
(7).submit: Triggered on the ff9c23ada1bcecdd1a0fb5d5a0f18437 element when the user clicks the submit button;
Form.onsubmit = function(){
alert('Lee');
}

(8).reset: Triggered on the ff9c23ada1bcecdd1a0fb5d5a0f18437 element when the user clicks the reset button;
Form.onreset = function(){
alert('Lee');
}

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

// This event is triggered on the window (window); maximizing or minimizing the browser window will also trigger the resize event;
// IE/Safari/Chrome and Opera will continuously trigger the resize event when the browser changes;
// Firefox will only trigger the resize event when the user stops resizing the window;
​ window.onresize = function(){
alert('Lee');
}

(10).scroll: Triggered when the user scrolls the scroll bar element;
​ window.onscroll = function(){
alert('Lee');
}