JS basics-event object event and js event

JS basics-event object event and js event

Why is an event an object? First, let's take a look at event processing.

I. event handling

JS provides event objects in event processing functions to help process mouse and keyboard events. You can also modify some event capture and bubble stream functions.

Event processing is divided into three parts: object. event processing function = Function

Document. onclick = function () {alert (this. value); // this indicates the object closest to it in this scope .}

In event processing, document is an object, click is an event processing type, and onclick is an event processing function. Function () is an anonymous function used for execution after triggering.

So what is an event object? When we trigger the click Event of the document, an event object is generated, which contains information about the event, including the elements that cause the event, the type of the event, and other information related to the specific event. This object is passed by the browser through the function when the event is executed.

Example:

Document. onclick = function () {alert (arguments. length); // the browser will pass a parameter alert (arguments [0]) by default; // [object MouseEvent]. If it is keydown, it will be [object KeyboardEvent]}

We can see that in event processing, the browser has passed a parameter by default. In normal and anonymous functions, event objects are not transmitted.

Receive event objects:

You can directly accept event objects in W3C, such:

Input. onclick = function (evt) {// receives the event object, and the name does not have to be event alert (evt); // MouseEvent, the mouse event object IE does not support };

However, in IE, direct reception is not supported, but is received through window. event.

2. Get mouse and keyboard event information

1. mouse events

It is mainly used to obtain the attributes of related events through the event object after the mouse event is executed, such as left-click or right-click. When pressing a key, whether to hold down the specified key values, such as ctrl, shift, or other commonly used keys, or the location of the mouse click and other related information.

Use clientX/Y to obtain the horizontal and vertical coordinates of the visible area clicked by the mouse. screenX/Y can obtain the horizontal and vertical coordinates of the entire screen.

A small example of modifying a key:

First, let's take a look at how the event object modifies the key:

Window. onload = function () {document. onclick = function (evt) {var e = evt | window. event; <span style = "font-family: SimSun;"> // cross-browser compatible event object </span> alert (getKey (evt ));};} function getKey (evt) {var e = evt | window. event; var keys = []; <span style = "font-family: SimSun;"> // create an array, used to store the pressed key value </span> if (e. shiftKey) keys. push ('shift '); if (e. ctrlKey) keys. push ('ctrl '); if (e. altKey) keys. push ('alt'); // click + alt and 360 Shortcut keys conflict return keys ;}

Is there a general impression on the functions of event objects? Let's take a look At Keyboard Events.

2. Keyboard Events

It is mainly used to obtain the key code or character encoding of each key value. Mainly occurs in keydown and keypress events.

Keycode: It is case-insensitive and corresponds to the key-value positions on the keyboard. Used for keydown and keyup events

Charcode: character encoding. It is case-sensitive and returns an ASCII code. Only keypress events are supported.

Iii. event stream

Event streams can be bubble or captured.

1. Bubble: triggered one by one from the inside out.

2. Capture: triggered one by one from the external

The event stream describes the order in which events are received from the page. When several elements with events are stacked together, they are stacked within your click range, not only the currently clicked elements will trigger the event, but all the elements you click on will trigger the event. If we want to trigger only one event, we need to cancel the bubble or capture. Modern browsers use the bubble type by default, so you only need to cancel the bubble type.

How to cancel?

Function stopPro (evt) {var e = evt | window. event; window. event? E. cancelBubble = true: e. stopPropagation (); <span style = "font-family: SimSun;" >/// compatible with W3C and IE </span>}

IV. this transfer in event objects

These are some of the foundations of event objects. In addition, you must note that in modern event binding, when an anonymous function uses call to impersonate an object, when passing parameters, the first parameter is passed to the event object to be impersonate by default, and is passed to the actual parameter only from the second parameter. What does it mean? Let's look at a small example:

1. Event binding function

Function addEvent (obj, type, fn) {if (typeof obj. addEventListener! = 'Undefined') {// W3Cobj. addEventListener (type, fn, false);} else if (typeof obj. attachEvent! = 'Undefined') {// IEobj. attachEvent ('on' + type, function () {fn. call (123 <span style = "font-family: SimSun;">, 456,789 </span>); <span style = "font-family: SimSun; ">/// use object impersonating to solve this transfer problem </span> });}}

2. Call

 

Window. onload = function () {addEvent (document, 'click', fn);} function fn (a, B) {alert (this); // 123, by default, the first parameter is used to pass the object to be impersonate, which is the parameter assigned to the function from the second parameter in 123 alert (a); // call, which is 456 alert (B ); <span style = "font-family: SimSun;"> // 789 </span>}

Conclusion: The event object is an object that is passed to the event processing by the browser when an event is triggered. Through this object, we can obtain some related information for processing at the corresponding time, so that we can further process the following operations.

Question about a js event

This is the difference between the old version of IE and other browsers.
// Enter the function whichKey (evnt) {if (document. all) {// in earlier IE versions, evnt is empty // so you must use the global event object x = event. button; if (x = 1) alert ("You clicked the left button"); if (x = 2) alert ("You right click ");} else {// non-IE browser will upload the event object. You can use evnt x = evnt. button; if (x = 1) alert ("You clicked the left button"); if (x = 3) alert ("You right click "); return false ;}}

The onclick event cannot obtain the js event source object. There is not much wealth. I hope to help you to see it and give some suggestions,

Because onclick directly calls check instead of attachEvent or addEventLicenser, in onclick, this is the event source object, you can pass this in, check (this)