JavaScript Learning 11: Getting Started with events

JavaScript events are a series of actions caused by users accessing Web pages, such as clicking the mouse, tapping the keyboard, and so on. When a user performs a similar operation, it triggers the execution of a series of code as a response to the user's actions, which is called an event.

Events are typically used for browser and user interaction, and we usually divide the event model in JavaScript into three types: inline model, script model, and DOM2 model.

Inline Model

is one of the most traditional ways to handle events. In this model, the event handler is a property of the HTML tag that handles the specified event. Although the inline is used more in the early days, it is mixed with HTML and is not separated from HTML. Here is an example of an inline model:

<span style= "FONT-SIZE:18PX;" ><inputtype= "button" value= "Pushbutton" onclick= "alert (' Lianjiangwei ');"/></span>

Script Model

Because the inline model violates the principle of separating HTML from the JavaScript code hierarchy, to solve this problem, we try to do event handling in JavaScript, which results in a scripting model. Examples are as follows:

<span style= "FONT-SIZE:18PX;" >  var input=document.getelementsbytagname (' input ') [0];  Get input Object  input.onclick=function () {                             ///anonymous function Execute         alert (' Lianjianwei ');  }; </span>

DOM2 Model

In all modern browsers-in addition to the previous version of IE9, the DOM2 standard event model has been implemented, which stipulates that the events triggered by each DOM element go through three stages: first, capture phase, and the event handler invocation stage of the target object itself; third, bubbling stage.

Bubbling stage: When a type of event occurs on a document element, they propagate upward on the document tree, calling the same type of event handler for the parent element.

Capture phase: The capture phase appears to be a reverse bubbling phase. The capture handler for the Window object is called first, then the capture handler for the Document object, then the body object, then the DOM tree down, and so on, until the capture event handler for the parent element of the event target element is called. Registering the Capture event handler on the target element object itself is not called.

event handler function

The types of events that JavaScript can handle are: mouse events, keyboard events, HTML events.

For each event, it has its own trigger range and mode, and if the trigger range and mode are exceeded, the event processing will be invalidated.

For mouse events, all elements of the page can be triggered

Keyboard events are triggered when the user presses a key on the keyboard, divided into KeyDown, KeyPress, and KeyUp.

The HTML event triggers the corresponding event when the page or label element on the page changes, such as the Load event, when the page is fully loaded, on the window, or when the frameset has finished loading. Similar to unload, select, change and so on.

See a few simple code examples below:

<span style= "FONT-SIZE:18PX;" >//event handler Function Example//1 mouse event input.onmousedown=function () {         alert (' You pressed the mouse not put! ');} 2 keyboard Event Onkeydown=function () {         alert (' You're moving the keyboard! ');} 3 HTML Event window,onscroll=function () {         alert (' You're moving the scroll bar! ');} </span>

Summary :HTML is a static description of the Web page, and JavaScript is to add dynamic effect to the Web page, how to let the two interact, that is the event we are watching, of course, these are the basic concept of the event, We tell about event objects and event bindings.

Copyright NOTICE: This article for Bo Master original article, without Bo Master permission not reproduced.

JavaScript Learning 11: Getting Started with events