JavaScript Tutorial/Event/Event Object — различия между версиями
Admin (обсуждение | вклад) м (1 версия) |
|
(нет различий)
| |
Текущая версия на 08:24, 26 мая 2010
Содержание
Add event handler to form
<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>
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.
<html>
<head>
<title>Example of Event.ABORT</title>
</head>
<body>
<script language = "JavaScript">
<!--
function handleAbort(evnt){
alert("An ABORT event has occurred.");
return true;
}
document.onabort = handleAbort;
-->
</script>
</body>
</html>
Event.CHANGE
The CHANGE property is used by any text-related and select-box form elements to indicate a change in the element settings.
<html>
<head>
<title>Example of Event.CHANGE</title>
</head>
<body>
<script language="JavaScript">
<!--
function handleChange(evnt){
alert("The text in TextBox1 has been changed");
return true;
}
document.onchange = handleChange;
-->
</script>
This triggers an alert box to open
up informing you that the text in box 1 has been changed.
<br><br>
<form name="form1">
TextBox1:
<input type="text" size="20" name="text1" onChange="">
<br><br>
TextBox2:
<input type="text" size="20" name="text2">
</form>
</body>
</html>
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.
<html>
<head>
<title>Example of the event.data property</title>
</head>
<body>
<script language="JavaScript">
<!--
function handleDragDrop(evnt){
tmp = new Array();
tmp = evnt.data;
alert("The URL for the dragdrop object is: " + tmp);
return true;
}
window.ondblclick = handleDragDrop;
-->
</script>
<br><br>
Drag and drop an object to the browser.
</body>
</html>
event.height
The height property controls the height of a window or frame during the RESIZE event.
<html>
<head>
<title>Example of the event.height property</title>
</head>
<body>
<script language = JavaScript>
<!--
function handle(evnt){
alert("A RESIZE event has occurred. The new height of the window is: " + evnt.height);
return true;
}
window.onresize = handle;
-->
</script>
<form name="form1">
Drag the browser border to trigger the resize event
</form>
</body>
</html>
event.layerX
The layerX property controls the horizontal (x-coordinate) positioning within the layer.
<html>
<head>
<title>Using the layerX property for the event object</title>
</head>
<body>
<script language="JavaScript">
<!--
function changeSize(){
window.resizeTo(300,400);
}
function handle(evnt){
alert("The new width (X value) after the resize is: " + evnt.layerX);
return true;
}
window.onresize = handle;
-->
</script>
Drag the browser border to trigger the resize event
</body>
</html>
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.
<html>
<head>
<title>Using the layerY property for the event object</title>
</head>
<body>
<script language="JavaScript">
<!--
function handle(evnt){
alert("The new height (Y value) of the window object after the resize is: " + evnt.layerY);
return true;
}
window.onresize = handle;
-->
</script>
Resize the browser to see the result.
</body>
</html>
event.pageX
The pageX property controls the horizontal (x-coordinate) positioning within a Web page.
<html>
<head>
<title>Example of the event.pageX property</title>
</head>
<body>
<script language = "JavaScript">
<!--
window.captureEvents(Event.CLICK);
function handle(evnt){
alert("The X coordinate of where the click event occurred is: " + evnt.pageX);
return true;
}
window.onclick = handle;
-->
</script>
<form>
Click in the web browser.
</form>
</body>
</html>
event.pageY
The pageY property of the Event object controls the vertical (y-coordinate) positioning.
<html>
<head>
<title>Example of the event.pageY property</title>
</head>
<body>
<script language = "JavaScript">
<!--
function handle(evnt){
alert("The Y coordinate of where the click event occurred is: " + evnt.pageY);
return true;
}
window.onclick = handle;
-->
</script>
Click in the web browser.
</body>
</html>
event.screenX
The screenX property controls the horizontal (x-coordinate) positioning within the computer screen.
<html>
<head>
<title>Example of the event.screenX property</title>
</head>
<body>
<script language = "JavaScript">
<!--
function handle(evnt){
alert("The X coordinate relative to the computer screen of where the click occurred is: " + evnt.screenX);
return true;
}
window.onclick = handle;
-->
</script>
Click in the web browser.
</body>
</html>
event.screenY
The screenY property controls the vertical (y-coordinate) positioning within the computer screen.
<html>
<head>
<title>Example of the event.screenY property</title>
</head>
<body>
<script language = "JavaScript">
<!--
function handle(evnt){
alert("The Y coordinate relative to the computer screen of where the click occurred is: " + evnt.screenY);
return true;
}
window.onclick = handle;
-->
</script>
Click in the web browser.
</body>
</html>
event.target
The target property refers to the object on which the event takes place.
<html>
<head>
<title>Using the target property of the event object</title>
</head>
<body>
<script language = "JavaScript">
<!--
function whichButton(evnt){
window.captureEvents(evnt.CLICK);
alert("The button you pressed was:" + evnt.target.value);
}
-->
</script>
<form name="form1">
Choose a button and click on it.
<br><br>
<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>
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.
<html>
<head>
<title>Using the type property for the event object</title>
</head>
<body>
<script language="Javascript">
<!--
function handle(evnt){
if(evnt.type == "click"){
document.form1.msg.value += "The click event occurred.\n"
}
if(evnt.type == "mousedown"){
document.form1.msg.value += "The mousedown event occurred.\n"
}
if(evnt.type == "keypress"){
document.form1.msg.value += "The keypress event occurred.\n"
}
return true;
}
document.onkeypress = handle;
document.onclick = handle;
document.onmousedown = handle;
-->
</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.
<br><br><br>
<ul>
<li><input type="Button" value="Click Me"></li>
<br><br>
<li>
Dummy text area.
<input type="text" size="20">
<br>
Click mouse in text field.
<br><br>
</li>
<br><br>
<b>Message output:</b>
<textarea name="msg" rows="10" cols="60"></textarea>
<br><br>
<input type="reset" value="Clear">
</form>
</body>
</html>
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.
<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.
<br><br>
<input type="radio" onClick = "alert("Mouse button Number " + event.which + "was pressed.")">
</form>
</body>
</html>
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.
<html>
<head>
<title>Example of the event.width property</title>
</head>
<body>
<script language = JavaScript>
<!--
function handle(evnt){
alert("An RESIZE event has occurred. The new width of the window is: " + evnt.height);
return true;
}
window.onresize = handle;
-->
</script>
Resize browser to see the result
</body>
</html>