Home > Developer > JavaScript
Describe
An event represents the state of an incident, such as the element that triggered the object, the position and state of the mouse, the key pressed, and so on.
The event object is only valid during the events.
Some properties of an event are only meaningful for a particular event. For example, thefromelement and toelement properties are only meaningful for onmouseover and onmouseout events.
Example
The following example checks if the mouse is clicked on the link and, if the SHIFT key is pressed, cancels the linked jump.
<HTML>
<script language= "JScript" >
function Cancellink () {
if (Window.event.srcElement.tagName = = "A" && Window.event.shiftKey)
Window.event.returnValue = false;
}
</SCRIPT>
<body onclick= "Cancellink ()" >
<a href=http://google.cn>google</a>
</body>
The following example displays the current position of the mouse on the status bar.
<body onmousemove= "window.status = ' x= ' + window.event.x + ' y= ' + window.event.y ' >
Property:
Type ' button, Srcelement/target ' ClientX ' ClientY ' (OffsetX ' OffsetY,)/(Layerx,layery), Altkey ' ctrlkey, Shiftkey,keycode , Fromelement, Toelement, cancelbubble, returnvalue , attachevent (), DetachEvent ( ), AddEventListener (), RemoveEventListener (), ScreenX ' ScreenY ', PropertyName ' srcfilter ' x ' Y
1.type: Returns the event name without "on" as the prefix, for example, thetype returned by the OnClick event is the click
2.srcelement/target: The event source is the element in which the event occurred;
3.button: Declares the mouse button pressed, integer,1 left button, 2 for the right button, 4 for the middle key, if you press more than one key, the wine add up these values, so 3 on behalf of the key at the same time pressed; firefox 0 for the left, 1 for the middle key, 2 for right-click) Span lang= "en-US" > This property is only used for onmousedown ' onmouseup ' and onmousemove event. For other events, regardless of mouse state, return 0 (such as onclick).
4.clientx/clienty: When an event occurs, the mouse is positioned relative to the upper-left corner of the viewable document area of the browser window; dom standard, both attribute values do not account for the scrolling of the document, that is, wherever the document is scrolled, as long as the event occurs in the upper-left corner of the window, clientx and clienty are 0, so in ie, To get the coordinates of the event occurring relative to the position at the beginning of the document, add document.body.scrollleft and DOCUMENT.BODY.SCROLLTOP)
5.offsetx,offsety/layerx,layery: The position of the mouse relative to the upper-left corner of the source element when the event occurs; x,y/pagex,pagey: Retrieves an integer relative to the horizontal coordinates of the parent feature's mouse;
6.altkey,ctrlkey,shiftkey: Check the status of the Alt/ctrl/shift key. Returns a Boolean value;
7.keyCode: Returns the code of the key when the KeyDown KeyUp event occurred, and the Unicode character of the KeyPress event ;(Firefox2 does not support Event.keycode, can be replaced with Event.which )
8.fromelement,toelement: The former refers to a document element that is moved by the mouse in the MouseOver event, which refers to the document element that the mouse moves to in the Mouseout event;
Example: The following code shows a dialog box that shows "mouse arrived" when you move the mouse over the button
<SCRIPT>
function Testmouse (oobject) {
if (Oobject.contains (event.toelement)) {
Alert ("Mouse arrived");
}
}
</SCRIPT>
:
<button Id=obutton onmouseover= "Testmouse (This)" >mouse over this.</button>
9.cancelBubble: A Boolean property that sets it to true when the stop event is further bubbled to containment 10. level element;(e.cancelbubble = true; equivalent to E.stoppropagation ();)
<script language= "JScript" >
function Checkcancel () {
if (Window.event.shiftKey)
Window.event.cancelBubble = true;
}
function Showsrc () {
if (Window.event.srcElement.tagName = = "IMG")
alert (WINDOW.EVENT.SRCELEMENT.SRC);
}
</SCRIPT>
<body onclick= "showsrc ()" >
11.returnValue: A Boolean property, set to false when the browser can be organized to perform the default event action;(E.returnvalue = false; equivalent to e.preventdefault ();)
12.attachEvent (), DetachEvent ()/addeventlistener (), RemoveEventListener (): A method for registering multiple event handlers for the development of a DOM object event type, which has two parameters, The first one is the event type, and the second is the event handler function. At the time of the attachevent () event execution, thethis keyword points to the window object, not the element where the event occurred;
13.screenX,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 properties are important;
14.PropertyName
Sets or returns the name of the property that changed the element.Event.propertyname [= Sproperty]
Sproperty is a string that specifies or returns the name of the property that has changed in the event of the element that triggered the event.
You can do this by usingOnpropertychange event, get propertyname .
Example:
The following example uses onpropertychange events, A dialog box pops up showing the value of propertyname .
<script>
function Changeprop ()
{
Btnprop.value = "This is the New VALUE ";
}
Function Changecssprop ()
{
BtnStyleProp.style.backgroundColor = "Aqua";
}
</script>
<body>
<input Type=button id=btnprop onclick= "ChangeProp ()"
Value= "Click to change the VALUE property of this button"
onpropertychange= ' alert (event.propertyname+ "property Has changed value ")",
<input type=button id=btnstyleprop
onclick= "Changecssprop ()"
value= "click to Change the CSS backgroundcolor property of this button '
onpropertychange= ' alert (event.propertyname+ Changed value "),
</body>
srcfilter: Returns the filter that triggered the onfilterchange event.
16.x/y: Returns the x-coordinate of the mouse relative to the ancestor element with the Position property in the CSS property . If there is no ancestor element with the Position property in the CSS property, the BODY element is used as the reference object by default.
Returns the y-coordinate of the mouse relative to the ancestor element with the Position property in the CSS property . If there is no ancestor element with the Position property in the CSS property, the BODY element is used as the reference object by default.
If the mouse moves out of the window after the event is triggered, the value returned is -1
This is a read-only property. This means that you can only use it to get the current position of the mouse, but it cannot be used to change the position of the mouse.
Some notes:
An event represents the state of an incident, such as triggeringThe element of the event object, the position and state of the mouse, the key pressed, and so on;
The event object is only valid during the events.
In Firefox.Event andThe difference in IE,IE is a global variable, ready to use;Firefox to use parameters to guide the use of the runtime is a temporary variable.
InIn the Ie/opera isWindow.event, inIn Firefox isevent;In IE isWindow.event.srcElement, inIn Firefox isEvent.target,Both are available in opera.
The following two sentences have the same effect
var evt = (evt)? EVT: ((window.event ) ? Window.event:null);
var evt = evt | | window.event;//Firefox window.event null, ie event" is null
events in IE bubble
events in IE can be bubbled up to the upper layer along the containment level, i.e., the lower Span lang= The event handler function defined by the "en-US" >dom node, to the upper node if there is also an event handler for the same event type as the lower layer, then the event handler function for the upper layer will also execute. For example, the div tag contains a , if both tags have a onclick event handler, then executing div. If you do not want to perform an event handler for the upper div onclick after the event handler is finished, then cancelbubble is set to true.
Detailed parsing of JavaScript technology event object
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
