Introduction to JavaScript event objects, javascript event objects

Introduction to JavaScript event objects, javascript event objects

An important aspect of JavaScript events is that they have some relatively consistent characteristics and can provide powerful functions for development;
The most convenient and powerful is the event objects, which can help you deal with mouse events and keyboard percussion;
You can also modify the capture/bubble stream functions of general events;

Event object

// A standard feature of the event processing function is that the event object accessed in some ways contains context information about the current event. // event processing consists of three parts: the object. event processing function = function; document. onclick = function () {alert ('Lee ');} // PS: The preceding program explains: click indicates an event type, and click; // onclick: indicates the attributes of an event processing function or bound object (or event listener); // document: indicates a bound object, used to trigger an element area; // function (): an anonymous function is an executed function that is used for triggering and execution. // In addition to using an anonymous function as the executed function, you can also set it to an independent function. document. onclick = box; // directly assign a value to the function name without parentheses. function box () {alert ('lil ');} // this keyword and context // In the object-oriented chapter, we understand that in an object, because of the scope, this represents the object closest to it; var input = document. getElementsByTagName ('input') [0]; input. onclick = function () {alert (this. value); // HTMLInputElement, this indicates the input object ;}

// When an event is triggered, an event object is generated, which contains all event-related information; // includes the elements that cause the event, the type of the event, and other information related to the specific event; // The event object, which is generally called the event object, this object is passed by the browser through the function as a parameter; // first, we must verify whether the parameter is passed in the execution function and whether hidden parameters can be obtained; function box () {// common null Parameter function; alert (arguments. length); // 0; no passed parameter is obtained;} input. onclick = function () {// The execution function bound to the event; alert (arguments. length); // 1; get a hidden parameter;} // PS: Through the above two sets of functions, we found that a hidden parameter can be obtained through the execution function bound to the event; // note that the browser will automatically assign a parameter, which is actually an event object; input. onclick = function () {alert (arguments [0]); // MouseEvent, mouse event object;} // the above method is troublesome, so the simple method is, you can directly obtain it by receiving parameters. input. onclick = function (evt) {// receives the event object, alert (evt); // MouseEvent, mouse event object;} // directly receives the event object, which is W3C's practice, IE does not support it. IE defines an event object directly in window. you can obtain the event. input. onclick = function (evt) {var e = evt | window. event; alert (e); // cross-browser compatibility to obtain event objects ;}

// You can obtain the mouse button information and screen coordinates through the event object;

2 mouse event
// Mouse events are the most common events on the Web. After all, the mouse is the most important device for locating;

1. mouse button

// The click event is triggered only when the primary mouse button is clicked (usually the left mouse button). Therefore, it is not necessary to check the button information; // but for mousedown and mouseup events, a button attribute exists in the event object, indicating that the button is pressed or released; non-IE (W3C) 0 indicates the master mouse button (usually the left mouse button); 1 indicates the middle mouse button (the scroll wheel button ); 2 indicates the next mouse button (usually the right mouse button); in IE, "button attribute 1" indicates the next mouse button (usually the left mouse button); 2 "indicates the next mouse button (usually the right mouse button ); 4 indicates that the middle mouse button is pressed; // compatible with the mouse button; function getButton (evt) {var e = evt | window. event; if (evt) {// Chrome supports W3C and IE standards; return e. button; // determine the order;} else I F (window. event) {switch (e. button) {case 1: return 0; case 4: return 1; case 2: return 2 ;}} document. onmouseup = function (evt) {if (getButton (evt) = 0) {alert ('left mouse button pressed! ');} Else if (getButton (evt) = 1) {alert ('key pressed');} else if (getButton (evt) = 2) {alert ('Right-click! ');}}

2. visible area and screen coordinates

// The event object provides two sets of attributes for obtaining browser coordinates: // One is the coordinate of the visible area of the page, and the other is the screen coordinate; the coordinate attribute describes the X coordinate of the clientX visible area, the distance from the left border, the Y coordinate of the clientY visible area, the distance from the upper border, and the X coordinate of the screenX screen area, and the distance from the left screen; screenY Y coordinates of the screen area, distance from the screen; X coordinates of the pageX page, distance from the Left Border of the page; Y coordinates of the pageY page, distance from the border of the whole page; // determines the cursor position. document. onclick = function (evt) {var e = evt | window. event; alert (e. clientX + ',' + e. clientY); alert (e. screenX + ',' + e. screenY); alert (e. pageX + ',' + e. pageY);} // PS: If the page does not scroll, the values of pageX and pageY are equal to those of clientX and clientY; // page coordinates on the event object are not supported under IE8, but can be calculated using the client zone coordinates and scrolling information; // This time will be used in document.body(the scrollTop and scrollLeft attributes in mixed mode or document.doc umentElement (standard mode; // pageX and pageY compatible functions; var div = document. getElementById ('mydiv '); addEventListener (div, 'click', function (evt) {var evt = event | window. event; var pageX = evt. pageX, pageY = evt. pageY; if (pageX === undefined) {pageX = evt. clientX + (docuemnt. body. scrollLeft | document.doc umentElement. scrollLeft);} if (pageY = undefined) {pageY = evt. clientY + (document. body. scrollTop | document.doc umentElement. srollTop) ;}alert (pageX + pageY );});

3. Modify the key

// Sometimes, we need to use some keys on the keyboard together with the mouse to trigger some special events; // these keys are: shift/Ctrl/Alt and Meat (Windows keys in Windows and Cmd keys in Apple); // they are often used to modify mouse events and behaviors, so they are called modification keys; modifying the key attribute indicates that shiftKey determines whether the Shift key is pressed; ctrlKey determines whether the ctrlKey is pressed; altKey determines whether the alt key is pressed; metaKey determines whether the windows key is pressed, not supported by IE; // determines the key function; function getKey (evt) {var e = evt | window. event; var keys = []; if (e. shiftKey) keys. push ('shift '); // determines whether the shift key is pressed at the same time; if (e. ctrlKey) keys. push ('ctrl '); if (e. altKey) keys. push ('alt'); return keys;} document. onclick = function (evt) {alert (getKey (evt); // get an array, which may contain the value of shift/ctrl/alt ;}

Trigger events

The user will trigger a keyboard event when using the keyboard;
"DOM2-level events" originally specified Keyboard Events and then deleted the corresponding content;
Finally, the original keyboard event was used, but IE9 was the first to support "DOM3"-level keyboard events;

1. Key code

// When a keydown or keyup event occurs, the keyCode attribute of the event object contains a code that corresponds to a specific key on the keyboard. // a pair of alphanumeric character sets, the value of the keyCode attribute is the same as that of lowercase letters or numbers in the ASCII code. uppercase/lowercase letters do not affect the value. document. onkeydown = function (evt) {alert (evt. keyCode );}

2. character encoding

// Firefox/Chrome/Safari event objects support a charCode attribute. // This attribute only contains values when a keypress event occurs, this value is the ASII encoding of the character represented by the key that is pressed; (it also contains keys other than numbers and letters ); // at this time, the keyCode is usually equal to 0 or may also be equal to the encoding of the key; // IE and Opear are the ASCII encoding of the characters stored in the keyCode; function getCharCode (evt) {var e = evt | window. event; if (typeof e. charCode = 'number') {return e. charCode;} else {return e. keyCode;} document. onkeypress = function (evt) {alert (getCharCode (evt);} // PS: String. fromCharCode () converts ASCII encoding to actual characters;

4 W3C and IE
// In standard DOM events, the event object contains the attributes and methods related to the specific events created for it;

// The types of triggered events are different, and the available attributes and methods are different;

Attributes and methods of event objects in W3C
Attribute/method type read/write description
Bubbles Boolean read-only indicates whether the event is bubbling;
Cancelable Boolean read-only indicates whether the default event behavior can be canceled;
CurrentTarget Element read-only the Element whose event handler is currently processing the event;
Detail Integer read-only event-related details (generally used for the scroll wheel value );
EventPhase Integer read-only calls the stage of the event handler: 1 indicates the capture stage, 2 indicates the processing target, and 3 indicates the bubble stage;
PreventDefault () Function: the default behavior of the read-only cancellation event. If the value of cancelable is true, you can use this method;
StopPropagation () Function read-only cancels the further capture or bubbling of the event. If the value of bubbles is true, you can use this method;
Target Element: the target of the read-only event;
Type String: the type of the read-only event triggered;
View AbstractView read-only abstract view associated with the event; equivalent to the window object where the event occurs;

Properties of the event object in IE
Read/write descriptions of attribute types
The default value of cancelBubble Boolean for reading and writing is false, but setting it to true can cancel event bubbling;
The default value of returnValue Boolean for reading and writing is true, but setting its value to false can cancel the default action of the event;
Target of the srcElement Element read-only event;
Type String read-only event type triggered;

// Compatible with the target and srcElement functions. function getTarget (evt) {var e = evt | window. event; return e.tar get | e. srcElement; // compatible with the event Target DOM object;} document. onclick = function (evt) {var target = getTarget (evt); alert (target );}

5. event stream

An event stream is the sequence in which events are received from the page. When several elements with events are stacked together, click an element;
Not only the currently clicked elements will trigger the event, but all elements stacked in the click range will trigger the event;
Event streams can be bubble or captured;

1. Event bubbling
Is triggered one by one from the inside out;

2. Event capture
Is triggered one by one from the outside to the inside;

// Modern browsers are bubble-type, while the capture mode is the default situation for early Netscape. // The current browser must use the DOM2-level event binding mechanism to manually define the event stream mode; document. onclick = function () {alert ('I am document');} document.doc umentElement. 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');} // PS: Click input to bubble up to document;

// Prevents event bubbling compatible function stopPro (evt) {var e = evt | window. event; // If cancelBubble exists, it is IE browser. setting its value to true can prevent event bubbling; // otherwise, the stopPropagation (); window is executed in W3C. event? E. cancelBubble = true: e. stopPropagation ();}