Home > Developer > JavaScript
This series of articles aims to abstract common, cross-Browser Scripting methods.
This article adds a cross-browser Method to the script library to obtain event objects, focusing on the principles of event objects in JavaScript. we hope to share our meager knowledge to show you how to perform "addition operations" instead of memorizing "1 + 1 = 2 ".
II. Implementation resultsThe two functions added this time are used to obtain the event object. The event object contains a lot of information, such as the coordinates of the mouse, to implement the desired function.
Instance 1 can capture the mouse key code and keyboard key code on the screen:
Example 2: rewrite the right-click menu:
Iii. Introduction to event objects
The event source and event object are equivalent to the sender and eventargs parameters of the event functions in C.
The event source is the element that generates the event, and the event object carries the Event-related information. the event object is created only when an event occurs and can only be accessed in the event. after the event-related processing function is executed, the event object is destroyed.
The event object carries a lot of useful information, such as screen coordinates, key code, and whether to bubble. unfortunately, the DOM event model supported by Firefox is not exactly the same as the event model of IE, and the method for obtaining event objects is also different. in IE, use window. the event uses the current event object, while the DOM specifies that the event object should be passed to the event handler as a unique parameter.
IV. Implementation CodeWe need to add two new methods to the scripthelper class:
/* Example of getting event objects: <Div onclick = "Var oevent = scripthelper. getevent (); "> </div> Note: it can only be used in events. for example, in onclick. cannot be used in custom methods. */scripthelper. prototype. getevent = function () {If (window. event) {return window. event;} else {return this. getevent. caller. arguments [0] ;}}/* example of canceling a bubble event: <Div onclick = "Var oevent = scripthelper. cancelbubble (); "> </div> Note: it can only be used in events. for example, in onclick. cannot be used in custom methods. */scripthelper. prototype. cancelbubble = function () {If (window. event) {window. event. cancelbubble = true;} else {return this. cancelbubble. caller. arguments [0]. cancelbubble = true ;}}
The two methods are very simple. getevent is used to obtain the event object. cancelbubble is similar to getevent, but not to return the event object, but to cancel the event object bubble event.
Some people may think that getevent and cancelbubble have repeated code. They think that they can call getevent in cancelbubble to obtain the event object, and then cancel the bubble event. however, you cannot do this. Both events can only be used in event processing functions. cancelbubble is a custom method and cannot use getevent in the custom method. the reason is that in a DOM Event, the event object is the unique parameter of the event. for Firefox, we use caller. arguments [0] to capture event objects. Caller indicates the caller of this method and must be an event. the following describes the event parameters.
5. Application Instance 1 capture the mouse key code and keyboard key code on the screen instance code:<! Doctype HTML public "-// W3C // dtd xhtml 1.0 transitional // en" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <HTML xmlns = "http://www.w3.org/1999/xhtml"> Instance description:Scripthelper is used in this instance. the getevent method obtains the event object, and obtains the keyboard code and mouse key code in the event object. note that the instance uses scripthelper. addeventlistener adds getkeycode and getmousebuttoncode to the event. in this case, the getkeycode function is equivalent to the onkeydown event. Therefore, scripthelper is called in the getkeycode function. getevent is equivalent to calling in the onkeydown event.
However, note that this cannot be written:
<body onkeydown="getKeyCode();">Because the above Code is equivalent:
body.onkeydown = function(){ getKeyCode();}Instance 2 rewrite the instance code by right-clicking the menu:<! Doctype HTML public "-// W3C // dtd xhtml 1.0 transitional // en" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <HTML xmlns = "http://www.w3.org/1999/xhtml"> Instance description:There are a lot of code for this instance. The principle is to right-click the event object, and if so, our right-click menu will pop up.
6. Tips
In ie, the event object is an attribute of the window object. The event handler function must access the event object as follows:
obj.onclick=function() { var oEvent = window.event; }
In the DOM standard, the event object must be passed to the event handler as a unique parameter:
obj.onclick=function() { var oEvent = arguments[0]; }
Besides using argument [0] to access this parameter, we can also specify the parameter name. The above code is equivalent:
obj.onclick=function(oEvent) { }
Currently, dom-compatible browsers include Firefox, Safari, opera, and IE7.
Common event object dataIn IE and Dom, the data contained in the event object is not exactly the same. however, I think only the complete data is worth using. below are some event object data that can be used in IE and Dom. assume that oevent is an event object.
1. Obtain the time type
var eventType = oEvent.type
2. Obtain the keyboard key code:
It must be used in keydown and keyup events.
var eventKeyCode = oEvent.keyCode
3. Check whether the shift, ALT, and CTRL keys are pressed:
var isShift = oEvent.shiftKey; var isAlt = oEvent.altKey; var isCtrl = oEvent.ctrlKey;
The return value is a Boolean value.
4. Get the coordinates of the mouse pointer
var x = oEvent.clientX; var y = oEvent.clientY;
8. Summary
There are many complex and brilliant script effects on the Internet, but complex effects cannot be separated from basic events and event objects. once you understand the principle, I believe that everyone's creativity can develop many excellent general script controls. for example, there are a lot of special effects in the following url: http://www.scriptlover.com/controls/context/, thanks to "Infatuated customer" in the second article in this series provided the above URL.
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
