JavaScript Learning 12: Event Object

An important aspect of JavaScript events is that they have some relatively consistent characteristics that can provide more powerful capabilities for our development. The most convenient and powerful is the event object, they can help you deal with the mouse and keyboard aspects of a lot of things, in addition, we can also modify the general event of the capture or bubbling stream function.

In the previous blog we have a basic understanding of the event, at the end of which we mentioned the event handler function. One of the standard features of event handlers is that the event object accessed in some way contains contextual information about the current event. Event handling consists of three parts: an object. The event handler function = function.

So what is the event object? Where is it?

When an event is triggered, an event object is generated that contains all the information related to the event. Includes the element that caused the event, the type of the event, and other information related to the specific event.

Event object, which we generally call an event object, is a browser that passes the object as a parameter through a function. So first, we have to verify that there are no arguments passed in the execution function, and that the hidden arguments can be obtained.

<span style= "FONT-SIZE:18PX;" >function box () {alert (arguments.length);} Window.box ();          The normal null parameter function, the return value is 0, did not get any passed parameter document.onclick=box;  Event binding function, with a return value of 1, to get a hidden parameter </span>

Through the comparison of the above two sets of functions, it is found that the execution function through event binding can get a hidden parameter, which means that the browser will automatically assign a parameter, which is actually the event object. We can lose this object and see what it is.

<span style= "FONT-SIZE:18PX;" >document.onclick=function () {alert (arguments[0]);  The print is MouseEvent, which is the mouse event object}</span>

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 we can get the mouse button information and screen coordinates through the event object and so on.

<span style= "FONT-SIZE:18PX;" >//Cross-browser left-right-click Response function Getbutton (evt) {var e = evt| | Window.event;if (evt) {return e.button;} else if (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 (' you press the left button! ');} else if (Getbutton (evt) ==1) {alert (' You pressed the middle button! ');} else if (Getbutton (evt) ==2) {alert (' You pressed the right button! ');}};/ /Get the visual area and screen area coordinates document.onclick=function (evt) {var e=evt| | Window.event;alert (e.clientx+ ', ' +e.clienty+ ', ' +e.screenx+ ', ' +e.screeny '); </span>

Keyboard Events

The keyboard event is triggered when the user is using the keyboard. DOM2-level events initially defined keyboard events, the results were deleted, and eventually the initial keyboard events were used, but IE9 has started to support DOM3-level keyboard events.

1 Key Code

When the KeyDown and KeyUp events occur, the KeyCode property of the event object contains a code that corresponds to a specific key on the keyboard.

<span style= "FONT-SIZE:18PX;" >document.onkeydown=function (evt) {alert (evt.keycode);}; </span>

2 character encoding

The event objects for Firefox, Chrome, and Safari all support a CharCode property that contains the value only when the KeyPress event occurs, and that the value is the ASCII encoding of the character represented by the pressed key. At this point the keycode is usually equal to 0 or possibly the key code.

<span style= "FONT-SIZE:18PX;" >function Getcharcode (evt) {var e=evt| | Window.event;if (typeof e.charcode== ' number ') {return e.charcode;} Else{return E.keycode;}} </span>

Event Flow

Finally, we need to add a point of knowledge, that is the flow of events. I also mentioned this in my last blog post, but I didn't know it very well at the time. 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 all the elements stacked in your click range will trigger the event. The event flow consists of two modes: bubbling and capturing.

Event bubbling is triggered from the inside out, and the event captures are triggered one after the other from the outside, and the following figure illustrates this image:

Summary: For the study of the event, but also in the process of further deepening, the understanding of the event object, let me understand the event more comprehensive, but also for my flexible use of events laid the foundation.

Copyright NOTICE: This article for Bo Master original article, without Bo Master permission not reproduced.

JavaScript Learning 12: Event Object