Event object in Javascript

Event is an important event in Javascript. It represents the event status and is responsible for event processing. Its Attributes and methods can help us complete many operations that interact with users, the following is a brief summary of this object. I hope to learn it with you.

I. main attributes and methods of event objects
　　
1. type: the type of the event, which is a string without the "on" prefix in the HTML Tag attribute. For example, "click" indicates the click event.

2. srcelement: The Event source, which is the element of the event. For example, <A> </a> A is the source of the event, that is, the srcelement of the event. (Target is not used in IE)

3. Button: Declares the mouse key pressed, which is an integer. 0 indicates no buttons, 1 indicates the left mouse button, 2 indicates the right mouse, and 4 indicates the middle mouse key. If you press Multiple mouse keys, add these values together, so 3 indicates that the left and right keys are pressed simultaneously.

4. clientx/clienty: refers to the horizontal and vertical coordinates of the mouse when an event occurs. The return value is an integer. Their values are generated relative to the upper left corner of the inclusive window.

5. offsetx/offsety: the position of the mouse pointer relative to the source element. You can determine which pixel of the image object to click.

6. altkey, ctrlkey, and shiftkey: as the name suggests, these attributes indicate whether ALT, Ctrl, or shift keys are simultaneously held when a mouse event occurs, and a Boolean value is returned.

7. keycode: return the code of the key and the Unicode characters of the keypress event when the keydown and keyup events occur. For example, event. keycode = 13 indicates that the Enter key is pressed;

8. fromelement and toelement refer to the document elements that the Mouseover event has moved, and the former refer to the document elements that the mouse moves to in the mouseout event.

9. cancelbubble: A boolean attribute. When it is set to true, the Stop event is further flushed to an element of the inclusion level, which is used to detect whether the event control of the upper layer element is accepted. True indicates that the event is not controlled by the upper element, and false indicates that the event is allowed by the upper element.

10. returnvalue: A boolean attribute. When it is set to false, it can prevent the browser from executing the default event action, which is equivalent to <a href = "#" onclick = "processmethod (); Return false; "/>.

11. attachevent () and detachevent () Methods: Methods for registering multiple event handler functions for developing DOM object event types. They have two parameters. The first is the event type, the second is the event processing function. When the attachevent () event is executed, this keyword points to the window object, rather than the element where the event occurs.

Ii. Description of the IE event object

The event object is a global attribute.
In IE, you cannot pass the event object as a parameter to the event handler. You can only use window. event or event to reference the event object. In IE, event is an attribute of window, that is, event is a global variable, which provides the event details.

Iii. Concepts of event bubbles

Event bubbles in IE: Events in IE can bubble up to the upper level a little along the tolerant level. That is to say, the lower Dom node defines the event handler function, if an event handler function of the same event type as that of the lower-layer node is added to the upper-layer node, the upper-layer event handler function is also executed. For example, the <div> label contains <A>. If both labels have The onclick event processing function, in this case, The onclick event processing function of the <A> label is executed first, and then the <div> event processing function is executed. If you do not want to execute the onclick event processing function of the Upper-layer <div> after the <A> event processing function is executed, set cancelbubble to false.

4. W3C Dom standard event
Unlike ie, the event object in W3C Dom is not an attribute under the window global object. In other words, event is not a global variable. Generally, in the DOM Level 2 standard, event is the attribute of the Document Object where an event occurs. The event contains two sub-interfaces: uievent and mutationevent. These sub-interfaces implement all the methods and attributes of the event, and the mouseevent interface is a sub-interface of the uievent, therefore, all methods and attributes of uievent and event are implemented. Next, let's take a look at the main attributes and methods of event, uievent, and mouseevent.
1. Event
Type: event type, similar to IE, but with no "on" prefix. For example, if you click an event, it is only "click ".
Target: the node where the event occurs.
Currenttarget: the node where an event is being processed. It may be the node pointed to by the target attribute, or it may point to the parent node of the target node due to capture or blister.
Eventphase: Specifies the stage of event propagation. Is a number.
Timestamp: the time when the event occurred.
Bubbles: indicates whether the event is blister.
Cancelable: Specifies whether the event can use the preventdefault () method to cancel the default action.
Preventdefault () method: cancels the default action of an event;
Stoppropagation () method: Stop event propagation.
2. uievent
View: Window object in which an event occurs.
Detail: provides additional information about events. Click events, mousedown events, and mouseup events indicate the number of clicks.
3. mouseevent
Button: A number indicating the status of the mouse key in the mousedown, mouseup, and click events. It is similar to the button attribute in IE, but the number indicates a different meaning, and 0 indicates the left button, 1 indicates the intermediate key, and 2 indicates the right-click Key.
Altkey, ctrlkey, shiftkey, and metakey: The same as IE, but IE does not have the last one.
Clientx and clienty: they have the same meaning as IE, but in the DOM standard, the two attribute values do not consider the scrolling of the document, that is, no matter where the document is rolled, as long as the event occurs in the upper left corner of the window, both clientx and clienty are 0. Therefore, in IE, to get the coordinates of the event relative to the position starting with the document, add document. body. scrollleft and document. body. scrolltop.
Screenx and screeny: the position of the mouse pointer relative to the upper left corner of the monitor. If you want to open a new window, these two attributes are very important.
Relatedtarget: similar to fromelement and toelement in IE, other events have no significance except for Mouseover and mouseout.