JS Event Object

Event Object

One of the standard features of event handlers is that the event object that is accessed in some way contains the top of the current event

The following information.

Event handling consists of three parts: an object. The event handler function = function. For example, click anywhere in the document.

Document.onclick = function () {

Alert (' Lee ');

};

PS: The noun explanation of the above procedure: Click Represents an event type and clicks. The onclick represents an event handling

The properties of a function or bound object (or an event listener, listener). Document represents a bound object that is used to

Triggers an element area. function () Anonymous functions are functions that are executed and executed after triggering.

In addition to using anonymous functions as functions that are executed, you can also set them as separate functions.

Document.onclick = box; Direct assignment of function names, without parentheses

function box () {

Alert (' Lee ');

}

This keyword and context

In the object-oriented chapter we learned that in an object, because of the scope of the relationship, this represents the nearest

Object.

var input = document.getelementsbytagname (' input ') [0];

Input.onclick = function () {

alert (this.value); Htmlinputelement,this represents the input object

};

Event object, which is commonly referred to as the event object, which is used by the browser to use this object as a parameter

The number passed over. So first, we have to verify that the arguments are not passed in the execution function, and whether you can

to the hidden parameters.

function box () {//Common NULL parameter functions

alert (arguments.length); 0, did not get any parameters passed

}

Input.onclick = function () {//Execute function for event binding

alert (arguments.length); 1, get a hidden parameter

};

Through the above two sets of functions, we find that the execution function through event binding can get a hidden parameter.

Note that the browser automatically assigns a parameter, which is actually the event object.

Input.onclick = function () {

Alert (arguments[0]); MouseEvent, mouse Event object

};

Above this kind of practice is more tired, then the relatively simple approach is, directly by receiving parameters to get.

Input.onclick = function (evt) {//Accept event object, name not necessarily event

alert (EVT); MouseEvent, mouse Event object

};

Directly receive the event object, is the practice of the Internet, IE does not support, IE itself defines an event object, straight

Then get it in window.event.

Input.onclick = function (evt) {

var e = evt | | window.event; Achieve cross-browser compatibility Get event object

Alert (e);

};

Mouse events

Mouse events are the most common type of event on the Web, after all, the mouse is still the most important positioning device. Then through

The event object can be retrieved to the mouse button information and screen coordinates obtained etc.

1. mouse button

The Click event is triggered only when the primary mouse button is clicked (normally the left mouse click), so the Detect button

Information is not necessary. However, for MouseDown and MouseUp events, there is a

A Button property that represents the press or release buttons

PS: In most cases, we only use the primary and secondary three click Key, IE gives the other key combinations one

Can not be used on. So, we just need to do these three kinds of compatibility can.

function Getbutton (evt) {//cross-browser right-click the corresponding

var e = evt | | window.event;

if (evt) {//chrome browser supports web and IE

return E.button; Be aware of the order of Judgment

} else if (window.event) {

Switch (E.button) {

Case 1:

return 0;

Case 4:

return 1;

Case 2:

return 2;

}

}

}

Document. = function (evt) {//Call

if (Getbutton (evt) = = 0) {

Alert (' Press the left button! ‘);

} else if (Getbutton (evt) = = 1) {

Alert (' Press the middle button! ‘);

} else if (Getbutton (evt) = = 2) {

Alert (' Press the right button! ‘ );

}

};

2. Visual area and screen coordinates

The event object provides two sets of properties for the browser coordinates, one for the left side of the page's visual area, and the other for the screen

Coordinate.

Document.onclick = function (evt) {

var e = evt | | window.event;

Alert (E.clientx + ', ' + e.clienty);

Alert (E.screenx + ', ' + E.screeny);

};

3. Modifier keys

Sometimes, we need to use some keys on the keyboard to match the mouse to trigger some special events. These keys are:

Shfit, Ctrl, Alt, and meat (Windows keys in Windows, CMD in Mac), they are often used

To modify mouse events and behavior, so called modifier keys

function GetKey (evt) {

var e = evt | | window.event;

var keys = [];

if (E.shiftkey) keys.push (' shift '); Adding elements to an array

if (E.ctrlkey) keys.push (' Ctrl ');

if (E.altkey) Keys.push (' Alt ');

return keys;

}

Document.onclick = function (evt) {

Alert (GetKey (EVT));

};

Keyboard events

The keyboard event is triggered when the user is using the keyboard. "DOM2-level events" initially defined keyboard events, and the results were deleted

In addition to the corresponding content. The initial keyboard event is still used, but IE9 has pioneered support for the "DOM3" level keyboard

Event.

1. Key code

When the KeyDown and KeyUp events occur, a code is included in the KeyCode property of the event object, with the key

Corresponds to a specific key on the disk. For the numeric alphabetic character set, the value of the KeyCode property corresponds to the lowercase letter in the ASCII code

Or numbers are encoded the same. The capitalization of the letters does not affect.

Document.onkeydown = function (evt) {

alert (Evt.keycode); Press any key to get the corresponding keycode

};

Different browsers in the KeyDown and KeyUp events, there are special situations:

In Firefox and Opera, the semicolon key is keycode with a value of 59, which is the encoding of the semicolon in ASCII, while IE

And Safari returns 186, which is the key code for keys in the keyboard.

PS: Some other special cases are not replenished here because the browser version is too old and the market share is too low.

2. Character encoding

The event objects for Firefox, Chrome, and Safari all support a CharCode property, which is only

The KeyPress event contains the value, and the value is the ASCII encoding of the character represented by the pressed key. At this time

The keycode is usually equal to 0 or it may be equal to the key code. IE and Opera are saved in KeyCode

The ASCII encoding of the character.

function Getcharcode (evt) {

var e = evt | | window.event;

if (typeof E.charcode = = ' number ') {

return e.charcode;

} else {

return e.keycode;

}

}

PS: You can use String.fromCharCode () to convert ASCII encoding to actual characters.

The differences between KeyCode and CharCode are as follows: For example, when you press the "a" key (which is the lowercase letter),

In Firefox, you'll get

Keydown:keycode is CharCode is 0

Keyup:keycode is CharCode is 0

Keypress:keycode is 0 charcode is 97

In IE, you will get

Keydown:keycode is charcode is undefined

Keyup:keycode is charcode is undefined

Keypress:keycode is charcode is undefined

When you hold down the SHIFT key, you get

Keydown:keycode is CharCode is 0

Keyup:keycode is CharCode is 0

In IE, you will get

Keydown:keycode is charcode undefined

Keyup:keycode is charcode undefined

KeyPress: No charcode value is obtained, because pressing shift does not enter any characters and does not

Will trigger KeyPress transactions

PS: In the KeyDown transaction, the transaction contains the physical code of the key pressed by the keycode– user.

In KeyPress, KeyCode contains the character encoding, the ASCII code of the implied character. This situation is useful for

All browsers – In addition to Firefox, its keycode return value in KeyPress transactions is 0.

Internet and IE

In a standard DOM event, the event object contains properties and methods related to the specific event that created it. Trigger

Different types of events, the available properties and methods are not the same.

Here, we only look at properties or methods that are compatible with all browsers. First of all, let's look at the

Target and Srcelement in IE, both of which represent the object of the event.

function Gettarget (evt) {

var e = evt | | window.event;

return E.target | | E.srcelement; Compatible Get event target DOM object

}

Document.onclick = function (evt) {

var target = Gettarget (EVT);

alert (target);

};

Event Flow

The event flow is a description of the order in which events are accepted from the page, and when several elements with events cascade together,

Then you click on one of the elements, not only the currently clicked element will trigger the event, but cascade in your click Range

Events are triggered by all elements of the The event flow consists of two modes: bubbling and capturing.

Event bubbling is triggered from inside to outside. Event captures are triggered from the outside to the inside. So the modern browser

The default is the bubbling model, while the capture mode is the early Netscape default. And now the browser is going to

Use the event-binding mechanism of the DOM2-level model to manually define the event flow pattern

Document.onclick = function () {

Alert (' I am document ');

};

Document.documentElement.onclick = function () {

Alert (' I am html ');

};

Document.body.onclick = function () {

Alert (' I am body ');

};

document.getElementById (' box '). onclick = function () {

Alert (' I am div ');

};

document.getElementsByTagName (' input ') [0].onclick = function () {

Alert (' I am input ');

};

In the process of blocking bubbles, the different methods used by the Internet and IE, we have to do a little bit of compatibility.

function Stoppro (evt) {

var e = evt | | window.event;

Window.event? e.cancelbubble = True:e.stoppropagation ();

}

JS Event Object