JS Basics-Event Object events

Why would an event be an object? Check out the event handling first

First, event handling

JS provides event objects in the event handler to help handle mouse and keyboard events. You can also modify the functions of the capture and bubbling stream of some events.

Event handling is divided into three parts: an object. event handler function = function

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

In the above event handling, document is the object, click is the event handler type, and the onclick is the event handler function. function () is anonymous, which is used to trigger post execution.

So what is an event object? When we trigger the Click event of the document, an event object is generated that contains information about the event, including the element that caused the event, the type of event, and other information related to the particular event. This object is passed through a function when the event is executed.

Small example:

Document.onclick=function () {alert (arguments.length);//The browser will default to pass a parameter alert (arguments[0]);//[object MouseEvent], If KeyDown, then [object KeyboardEvent]}

As you can see, in event handling, the browser has passed a parameter by default. And inin normal and anonymous functions, the event object is not passed。

The event object receives:

The event object can be directly accepted in the audience, such as:

Input.onclick = function (evt) {//Accept event object, name not necessarily event    alert (evt);//mouseevent, mouse event object ie not supported};

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

second, get mouse and keyboard event information

1. Mouse events

The main thing is that after the mouse event is executed, some properties of the related event are obtained through the event object, such as the left or right button. When pressing the key, whether to hold down the specified key value such as ctrl,shift and other common keys, or the location of the mouse click and other related information.

By clientx/y to get the horizontal ordinate in the viewable area of the mouse click, screenx/y can get the horizontal ordinate in the whole screen.

A small example of a modifier key:

First, let's look at some of the event object's methods for modifying keys:

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;" >//creates an array to hold 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 it now a general impression of the function of the event object? Take a look at the keyboard event

2. Keyboard events

Gets the key or character encoding that is pressed for each key value when it is used primarily for keystrokes. Mainly in the KeyDown and KeyPress events.

KeyCode: Case insensitive, corresponding to the key value position one by one on the keyboard. For KeyDown and KeyUp events

CharCode: Character encoding, case-sensitive, in fact, the ASCII code is returned. Only KeyPress events are supported

iii. flow of events

  The event flow consists of two modes: bubbling and capturing .

1, bubbling: from the inside out one by one trigger.

2. Capture: Trigger from outside

   Event Flow Span style= "FONT-SIZE:12PT; Color:rgb (51,51,51); Font-style:normal; Font-variant:normal "> is a description of the order in which events are accepted from the page, when several elements with events cascade together

How do I cancel?

function Stoppro (evt) {var e = evt | | window.event;window.event? e.cancelbubble = True:e.stoppropagation (); <span St Yle= "Font-family:simsun;" >//compatible and Ie</span>}

iv. This delivery problem in the event object

  above are some of the basics of event objects, and note that in modern event bindings, when an anonymous function passes a call to impersonate an object, the first parameter is passed by default to the event object to impersonate, and the parameter that is actually passed is started from the second argument. What do you mean? See 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 impersonation to resolve this pass problem </span>});}}

2. Call

Window.onload=function () {    addevent (document, ' click ', fn);} function fn (A, b) {    alert (this),//123, the default first parameter is to pass the object to impersonate, 123    alert (a),//call in the parameter from the second argument to the function, 456     alert (b); <span style= "Font-family:simsun;" >//789</span>}

Summary: When an event object is triggered by an event, the browser passes to an object that handles the event, and through this object, we can get some relevant information about the corresponding time processing so that we may further process the next operation.

JS Basics-Event Object events