Introduction to JavaScript events_javascript skills-JS Tutorial-php.cn

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;
Pay attention to single and double quotation marks;
Use event handling functions as attributes in HTML to execute JS functions;
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;                     // 删除事件处理程序;

Copy after login

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;

// 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