Easy Learning JavaScript 27: The event model of DOM programming learning

Before we introduce the event model, let's look at what the event is and what is the events object.

An introduction to the event

JavaScript events are a series of actions caused by users who visit Web pages, giving us the ability to create dynamic pages. Events are capable of being

The behavior that JavaScript detects.

Each element in a Web page can produce certain events that trigger JavaScript functions. Say, for example. We are able to use

When a button is clicked, an onclick event is generated to trigger a function. Events are defined in an HTML page, and events are usually used in conjunction with a function when an event

The function does not run when it occurs, and events are typically used to interact with the browser and user actions.

Examples of events we use frequently: mouse clicks, page or image loading, hovering over a hotspot on a page, selecting input in a form

box to confirm the form. Keyboard keys and so on.

Two Event objects

The event object represents the state of the incident, such as the element in which the event occurred, the state of the keyboard key, the position of the mouse, and the state of the mouse button.

Thing

is usually used in conjunction with a function, the function will not be run before the event occurs!

When an event is triggered, an event object is generated. This object includes all information related to the event. Include the element that caused the event. Event

and other information related to a particular event. Event objects We are generally referred to as event objects. This object is the browser through the function of this pair

As if it were passed over as a number of parameters. So we can verify that:

<! DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 transitional//en" "Http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd ">
We get through the above two sets of functions. The run function that is bound by the event is able to get a hidden parameter, indicating that the browser will voluntarily assign a
The number of parameters, which is the event object. We are able to accept the event object directly, and the Internet Explorer and IE are used in different ways: the
The event object is passed directly as a parameter, and IE needs to be obtained using WINDOW.EVEVT talent.
Let's do it. Compatible:
Window.onload=function () {    //Get Input Object    var input=document.getelementsbytagname ("input") [0];     anonymous function run     input.onclick=function (event) {            var event=event| | window.event;            alert (event);//Output: Object MouseEvent represents mouse event object    };}
Now that we have the event object, we are able to manipulate the properties and methods of some event objects:
Standard event Property
Standard Event Method

Because of the DOM2-level standard event model, IE9 Previous versions of the browser are not supported. The IE9 has been fully supported. We're no longer browser compatible.
Properties and methods.
We will be compatible depending on the situation when it is actually used.
Three-event model
(1) Inline model
The inline model is one of the most traditional ways to handle events. In an inline model, an event handler is a property of an HTML tag. Used at
The event is specified by the manager. Although the inline is used more early, it is mixed with HTML and is not separated from HTML, and the number of code written is very small, and
Not useful.
Here is a sample demonstration of an inline model:
<!--to run the event handler function as a property in HTML JS code--><input type= "button" value= "Pushbutton" onclick= "alert (' I am JS code! '); "/>
Another application of the inline model, this also realizes the JS code and HTML must be separated. But it still belongs to the inline model. JS function written in JS file
In
<! DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 transitional//en" "Http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd ">
(2) Script model
Because the inline model violates the principle of separating the HTML from the JavaScript code hierarchy, in order to solve the problem. We're trying to do it in JavaScript.
Event handling. This results in a script model. The scale is as follows:
<! DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 transitional//en" "Http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd ">
The onclick event can be run through an anonymous function, which can trigger the corresponding code directly. There is also a way to achieve that is by specifying
Function name assignment to run the function, note that the function name of the assignment is not enclosed in parentheses.
And the difference between the above is the JS code section:
Window.onload=function () {    //Get Input Object    var input=document.getelementsbytagname ("input") [0];     Run     input.onclick=box;function box () {                 alert ("I am JS code!") by assigning the function name specified by the value      };}
(3) DOM2 level model
Before we introduce the DOM2 model, we first understand what the event flow is.
The event flow is a descriptive narrative of the order in which events are received from the page, and when several elements with events cascade together, then you click on one of the meta
Of Not only the elements that are currently clicked will trigger the event, but all elements that cascade within the range you click will start the event. The event stream consists of two modes
Type: bubbling and capturing.
The following illustration shows the flow of events very well:
Event bubbling is triggered from inside to outside. Event capture. is triggered from the outside to the inside.
Modern browsers are bubbling models by default. We
You can manually define the event flow pattern by using the event binding mechanism of the DOM2 level model.
In all modern browsers, the DOM2 standard event model is implemented, in addition to the version number prior to IE9. This event model stipulates that each
The events that are triggered by DOM elements go through three stages: the capture phase, the event handler invocation phase of the target object itself, and the bubbling phase.
Bubbling stage: When a type of event occurs on a document element. They propagate upward on the document tree, which is the same type of event that invokes the parent element
Processing functions.
Capture phase: The capture phase is like a reverse bubbling phase.
The capture handler that first calls the Window object, and then the capture of the Document object
followed by the body object, and then the DOM tree down. And so on Capture event handler until the parent element of the event target element is called
Order. The manual capture event handler is not called on the target element object itself.
In the DOM2-level standard event model. The method of binding an event to a DOM element is the AddEventListener () method, which requires passing three
Parameters, the first parameter is a string. Represents the type of event. such as "click"; the second parameter is a function. Represents an event handler that browses
The function passes an event object, the third parameter is a Boolean value, and a Boolean value of FALSE indicates that the function will register
is a bubbling event handler (usually set to false), assuming a value of true, indicating that the function will be marked as a capture event handler. It is worth noting that
Yes, multiple handler functions of the same event type can be registered for the same object by calling the AddEventListener () method multiple times. When something happens on the object
, all of the event type's registration handlers are called in the order in which they are registered.
Analyze the triggering process for events in two different situations:
1 when the target element does not have a parent element or a target element that does not have a register with the same type of event that triggers the target element, the first of the event model
And the third stage is of no practical significance, that is, no matter what happens.
2 when the target element has a parent element and the parent element of the target element is registered with the same type of event that triggers the target element. The first and third of the event model
The stage begins to function.
Let's look at a very easy example here:
<! DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 transitional//en" "Http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd ">
The AddEventListener () method above IE9 is not compatible with previous versions of the browser, and there are many problems when binding. Ie
Capture is not supported, only bubbles are supported; IE join events cannot mask repeated functions. The this in IE points to a window object instead of a DOM object. possible
For the low version of IE browser is not compatible. But IE9 fully supports event binding functions in the list.
For how to do compatibility. Or in the detail of the actual item
Flexible application in the eye.



 
Easy Learning JavaScript 27: The event model of DOM programming learning