JavaScript Tutorial/Event/Event Object
Содержание
Add event handler to form
<source lang="javascript">
<html> <head> <title>W3C DOM Event Propagation</title> <script type="text/javascript"> function init() {
document.forms[0].addEventListener("click", formBubbleEvent, false);
} function formBubbleEvent(evt) {
alert("FORM only on BUBBLE.");
} function getPhase(evt) {
switch (evt.eventPhase) {
case 1:
return "CAPTURING";
break;
case 2:
return "AT TARGET";
break;
case 3:
return "BUBBLING";
break;
default:
return "";
}
} </script> </head> <body onload="init()"> <form> <input type="button" value="Button "main1"" name="main1" onclick="alert("button (" + getPhase(event) + ").")" /> </form> </body> </html></source>
Event
The Event object represents an event.
Properties of the Event Object is listed in the following table.
Property Description data Array of URL"s for dragged and dropped objects height Height of window layerX Horizontal cursor position within layer layerY Vertical cursor position within layer modifiers Bit mask representing modifier keys pageX Horizontal cursor position within Web page pageY Vertical cursor position within Web page screenX Horizontal cursor position within computer screen screenY Vertical cursor position within computer screen target Object for captured events type Type of event which The mouse button that is pressed width Width of window
In addition to the Event properties, events exist that get handled.
The available events are shown in the following Table.
Events Description ABORT Loading of Web page interrupted by user. BLUR Focus is removed from the object. CHANGE Contents or setting for document object changed. CLICK Mouse button is clicked once. DBLCLICK Mouse button is clicked twice. DRAGDROP Object is dragged and dropped. ERROR Error occurred during loading. FOCUS Focus is applied to an object. KEYDOWN A key is pressed down. KEYPRESS A key is pressed. KEYUP A key is let up after being pressed down. LOAD Load document within a browser. MOUSEDOWN The mouse button is pressed down. MOUSEMOVE The mouse cursor is moved. MOUSEOUT The mouse cursor is moved away from a specific object. MOUSEOVER The mouse cursor is moved over a specific object. MOUSEUP The pressed mouse button is let up. MOVE Object is moved on the screen. RESET Reset button is pressed. RESIZE Window or frame has been resized. SELECT Document object is selected. SUBMIT Submit button is pressed. UNLOAD Document is unloaded from browser.
Event.ABORT
The ABORT property is used by images and refers to the event in which a transfer is interrupted or aborted by a user.
<source lang="javascript">
<html>
<head> <title>Example of Event.ABORT</title> </head> <body> <script language = "JavaScript"> </script> </body> </html></source>
Event.CHANGE
The CHANGE property is used by any text-related and select-box form elements to indicate a change in the element settings.
<source lang="javascript">
<html>
<head> <title>Example of Event.CHANGE</title> </head> <body> <script language="JavaScript"> </script> This triggers an alert box to open up informing you that the text in box 1 has been changed.
<form name="form1"> TextBox1: <input type="text" size="20" name="text1" onChange="">
TextBox2: <input type="text" size="20" name="text2"> </form> </body> </html></source>
event.data
The data property references an array of strings for events of objects that have been dragged and dropped.
Each string in the array contains a URL representing the dropped object.
<source lang="javascript">
<html>
<head> <title>Example of the event.data property</title> </head> <body> <script language="JavaScript"> </script>
Drag and drop an object to the browser. </body> </html></source>
event.height
The height property controls the height of a window or frame during the RESIZE event.
<source lang="javascript">
<html>
<head>
<title>Example of the event.height property</title>
</head>
<body>
<script language = JavaScript>
</script>
<form name="form1">
Drag the browser border to trigger the resize event
</form>
</body>
</html></source>
event.layerX
The layerX property controls the horizontal (x-coordinate) positioning within the layer.
<source lang="javascript">
<html>
<head>
<title>Using the layerX property for the event object</title>
</head>
<body>
<script language="JavaScript">
</script>
Drag the browser border to trigger the resize event
</body>
</html></source>
event.layerY
The layerY property controls the vertical (y-coordinate) positioning within the layer.
When a window or frame is resized, the new value for the vertical coordinate is stored in the layerY property.
<source lang="javascript">
<html>
<head> <title>Using the layerY property for the event object</title> </head> <body> <script language="JavaScript"> </script> Resize the browser to see the result. </body> </html></source>
event.pageX
The pageX property controls the horizontal (x-coordinate) positioning within a Web page.
<source lang="javascript">
<html>
<head> <title>Example of the event.pageX property</title> </head> <body> <script language = "JavaScript"> </script> <form> Click in the web browser. </form> </body> </html></source>
event.pageY
The pageY property of the Event object controls the vertical (y-coordinate) positioning.
<source lang="javascript">
<html>
<head> <title>Example of the event.pageY property</title> </head> <body> <script language = "JavaScript"> </script> Click in the web browser. </body> </html></source>
event.screenX
The screenX property controls the horizontal (x-coordinate) positioning within the computer screen.
<source lang="javascript">
<html>
<head> <title>Example of the event.screenX property</title> </head> <body> <script language = "JavaScript"> </script> Click in the web browser. </body> </html></source>
event.screenY
The screenY property controls the vertical (y-coordinate) positioning within the computer screen.
<source lang="javascript">
<html>
<head> <title>Example of the event.screenY property</title> </head> <body> <script language = "JavaScript"> </script> Click in the web browser. </body> </html></source>
event.target
The target property refers to the object on which the event takes place.
<source lang="javascript">
<html>
<head> <title>Using the target property of the event object</title> </head> <body> <script language = "JavaScript"> </script> <form name="form1"> Choose a button and click on it.
<input type="button" value="Button1" name="Button1" onClick = whichButton(event)> <input type="button" value="Button2" name="Button2" onClick = whichButton(event)> <input type="button" value="Button3" name="Button3" onClick = whichButton(event)> </form> </body> </html></source>
event.type
The type property refers to the type of event that occurred. The value assigned to type is a string representing the name of the event.
<source lang="javascript">
<html>
<head> <title>Using the type property for the event object</title> </head> <body> <script language="Javascript"> </script> <form name="form1"> This page demonstrates a few different events. Upon events occurring, a message will be displayed in the textarea indicating which event occurred.
- <input type="Button" value="Click Me">
Click mouse in text field.
Message output: <textarea name="msg" rows="10" cols="60"></textarea>
<input type="reset" value="Clear"> </form> </body> </html></source>
event.which
The which property refers to which key or mouse button was pressed or clicked.
The value returned for mouse events is a numeric value 1, 2, or 3, representing the left, middle, and right mouse buttons, respectively.
The value returned for keyboard events is a character representation for the key that was pressed.
<source lang="javascript">
<html>
<head> <title>Using the which property of the event object</title> </head> <body> <form> This example uses the which property of the event object to determine which mouse button is pressed.
<input type="radio" onClick = "alert("Mouse button Number " + event.which + "was pressed.")"> </form> </body> </html></source>
event.width
The width property refers to the width of a window or frame.
It is set during the RESIZE event to the new width of window or frame being resized.
<source lang="javascript">
<html>
<head> <title>Example of the event.width property</title> </head> <body> <script language = JavaScript> </script> Resize browser to see the result </body></html></source>
