JavaScript Learning 11: Getting Started with events __java

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

Events are typically used to interact with browsers and user actions, and usually we divide the event models in JavaScript into three types: inline, scripting, and DOM2.

Inline Model

is one of the most traditional ways to handle events. In this 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. Here's an example of an inline model:

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

Scripting Model

Because the inline model violates the principle of separation of HTML and JavaScript code, we try to do event processing in JavaScript to solve this problem, 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 Execution
         alert (' Lianjianwei ');
  </span>

DOM2 Model

In all modern browsers--except for the IE9 version, implements the DOM2 standard event model, which stipulates that every event triggered by a DOM element goes through three stages: first, the capture phase, the event handler call phase of the target object itself, and the bubbling phase.

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

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

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 scope and mode, and event handling will fail if the trigger scope and mode are exceeded.

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.

An HTML event triggers a corresponding event when a page or tag element on a page changes, such as a load event, triggered on the window when the page is fully loaded, or triggered on a frameset when the frameset is loaded. Similarly, there are unload, select, change, and so on.

Look at a few simple code examples as follows:

<span style= "FONT-SIZE:18PX;" >//event handler Function Example
//1 mouse event
input.onmousedown=function () {
         alert (' You don't put the mouse down. ');
}
2 keyboard Event
onkeydown=function () {
         alert (' You are moving the keyboard. ');
}
3 HTML Event
window,onscroll=function () {
         alert (' You are 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 what we are looking at the event, of course, these are the basic concept of events, about event objects and event binding things , we let's.