http://wbex.ru/index.php?action=history&feed=atom&title=JavaScript_Tutorial%2FEvent%2FEvent_Object
JavaScript Tutorial/Event/Event Object - История изменений
2026-04-05T02:57:25Z
История изменений этой страницы в вики
MediaWiki 1.30.0
http://wbex.ru/index.php?title=JavaScript_Tutorial/Event/Event_Object&diff=8771&oldid=prev
Admin: 1 версия
2010-05-26T08:24:33Z
<p>1 версия</p>
<table class="diff diff-contentalign-left" data-mw="interface">
<tr style="vertical-align: top;" lang="ru">
<td colspan="1" style="background-color: white; color:black; text-align: center;">← Предыдущая</td>
<td colspan="1" style="background-color: white; color:black; text-align: center;">Версия 08:24, 26 мая 2010</td>
</tr><tr><td colspan="2" style="text-align: center;" lang="ru"><div class="mw-diff-empty">(нет различий)</div>
</td></tr></table>
Admin
http://wbex.ru/index.php?title=JavaScript_Tutorial/Event/Event_Object&diff=8770&oldid=prev
в 18:52, 25 мая 2010
2010-05-25T18:52:56Z
<p></p>
<p><b>Новая страница</b></p><div>== Add event handler to form==<br />
<br />
<br />
<br />
<br />
<!-- start source code --><br />
<br />
<source lang="javascript"><br />
<html> <br />
<head> <br />
<title>W3C DOM Event Propagation</title> <br />
<script type="text/javascript"> <br />
function init() { <br />
document.forms[0].addEventListener("click", formBubbleEvent, false); <br />
} <br />
function formBubbleEvent(evt) { <br />
alert("FORM only on BUBBLE."); <br />
} <br />
function getPhase(evt) { <br />
switch (evt.eventPhase) { <br />
case 1: <br />
return "CAPTURING"; <br />
break; <br />
case 2: <br />
return "AT TARGET"; <br />
break; <br />
case 3: <br />
return "BUBBLING"; <br />
break; <br />
default: <br />
return ""; <br />
} <br />
} <br />
</script> <br />
</head> <br />
<body onload="init()"> <br />
<form> <br />
<input type="button" value="Button "main1"" name="main1" onclick="alert("button (" + getPhase(event) + ").")" /> <br />
</form> <br />
</body> <br />
</html></source><br />
<br />
<br />
<br />
== Event==<br />
<br />
<p>The Event object represents an event.</p><br />
<p>Properties of the Event Object is listed in the following table.</p><br />
Property<br />
Description<br />
data<br />
Array of URL"s for dragged and dropped objects<br />
height<br />
Height of window<br />
layerX<br />
Horizontal cursor position within layer<br />
layerY<br />
Vertical cursor position within layer<br />
modifiers<br />
Bit mask representing modifier keys<br />
pageX<br />
Horizontal cursor position within Web page<br />
pageY<br />
Vertical cursor position within Web page<br />
screenX<br />
Horizontal cursor position within computer screen<br />
screenY<br />
Vertical cursor position within computer screen<br />
target<br />
Object for captured events<br />
type<br />
Type of event<br />
which<br />
The mouse button that is pressed<br />
width<br />
Width of window<br />
<p>In addition to the Event properties, events exist that get handled.</p><br />
<p>The available events are shown in the following Table.</p><br />
Events<br />
Description<br />
ABORT<br />
Loading of Web page interrupted by user.<br />
BLUR<br />
Focus is removed from the object.<br />
CHANGE<br />
Contents or setting for document object changed.<br />
CLICK<br />
Mouse button is clicked once.<br />
DBLCLICK<br />
Mouse button is clicked twice.<br />
DRAGDROP<br />
Object is dragged and dropped.<br />
ERROR<br />
Error occurred during loading.<br />
FOCUS<br />
Focus is applied to an object.<br />
KEYDOWN<br />
A key is pressed down.<br />
KEYPRESS<br />
A key is pressed.<br />
KEYUP<br />
A key is let up after being pressed down.<br />
LOAD<br />
Load document within a browser.<br />
MOUSEDOWN<br />
The mouse button is pressed down.<br />
MOUSEMOVE<br />
The mouse cursor is moved.<br />
MOUSEOUT<br />
The mouse cursor is moved away from a specific object.<br />
MOUSEOVER<br />
The mouse cursor is moved over a specific object.<br />
MOUSEUP<br />
The pressed mouse button is let up.<br />
MOVE<br />
Object is moved on the screen.<br />
RESET<br />
Reset button is pressed.<br />
RESIZE<br />
Window or frame has been resized.<br />
SELECT<br />
Document object is selected.<br />
SUBMIT<br />
Submit button is pressed.<br />
UNLOAD<br />
Document is unloaded from browser.<br />
<br />
== Event.ABORT==<br />
<br />
<p>The ABORT property is used by images and refers to the event in which a transfer is interrupted or aborted by a user.</p><br />
<br />
<br />
<br />
<!-- start source code --><br />
<br />
<source lang="javascript"><br />
<html><br />
<head><br />
<title>Example of Event.ABORT</title><br />
</head><br />
<body><br />
<script language = "JavaScript"><br />
<!--<br />
function handleAbort(evnt){<br />
alert("An ABORT event has occurred.");<br />
return true;<br />
}<br />
document.onabort = handleAbort;<br />
--><br />
</script><br />
</body><br />
</html></source><br />
<br />
<br />
<br />
== Event.CHANGE==<br />
<br />
<p>The CHANGE property is used by any text-related and select-box form elements to indicate a change in the element settings.</p><br />
<br />
<br />
<br />
<!-- start source code --><br />
<br />
<source lang="javascript"><br />
<html><br />
<head><br />
<title>Example of Event.CHANGE</title><br />
</head><br />
<body><br />
<script language="JavaScript"><br />
<!--<br />
function handleChange(evnt){<br />
alert("The text in TextBox1 has been changed");<br />
return true;<br />
}<br />
document.onchange = handleChange;<br />
--><br />
</script><br />
This triggers an alert box to open<br />
up informing you that the text in box 1 has been changed.<br />
<br><br><br />
<form name="form1"><br />
TextBox1:<br />
<input type="text" size="20" name="text1" onChange=""><br />
<br><br><br />
TextBox2:<br />
<input type="text" size="20" name="text2"><br />
</form><br />
</body><br />
</html></source><br />
<br />
<br />
<br />
== event.data==<br />
<br />
<p>The data property references an array of strings for events of objects that have been dragged and dropped.</p><br />
<p>Each string in the array contains a URL representing the dropped object.</p><br />
<br />
<br />
<br />
<!-- start source code --><br />
<br />
<source lang="javascript"><br />
<html><br />
<head><br />
<title>Example of the event.data property</title><br />
</head><br />
<body><br />
<script language="JavaScript"><br />
<!--<br />
function handleDragDrop(evnt){<br />
tmp = new Array();<br />
tmp = evnt.data;<br />
alert("The URL for the dragdrop object is: " + tmp);<br />
return true;<br />
}<br />
window.ondblclick = handleDragDrop;<br />
--><br />
</script><br />
<br><br><br />
Drag and drop an object to the browser.<br />
</body><br />
</html></source><br />
<br />
<br />
<br />
== event.height==<br />
<br />
<p>The height property controls the height of a window or frame during the RESIZE event.</p><br />
<br />
<br />
<br />
<!-- start source code --><br />
<br />
<source lang="javascript"><br />
<html><br />
<head><br />
<title>Example of the event.height property</title><br />
</head><br />
<body><br />
<script language = JavaScript><br />
<!--<br />
function handle(evnt){<br />
alert("A RESIZE event has occurred. The new height of the window is: " + evnt.height);<br />
return true;<br />
}<br />
window.onresize = handle;<br />
--><br />
</script><br />
<form name="form1"><br />
Drag the browser border to trigger the resize event<br />
</form><br />
</body><br />
</html></source><br />
<br />
<br />
<br />
== event.layerX==<br />
<br />
<p>The layerX property controls the horizontal (x-coordinate) positioning within the layer.</p><br />
<br />
<br />
<br />
<!-- start source code --><br />
<br />
<source lang="javascript"><br />
<html><br />
<head><br />
<title>Using the layerX property for the event object</title><br />
</head><br />
<body><br />
<script language="JavaScript"><br />
<!--<br />
function changeSize(){<br />
window.resizeTo(300,400);<br />
}<br />
function handle(evnt){<br />
alert("The new width (X value) after the resize is: " + evnt.layerX);<br />
return true;<br />
}<br />
window.onresize = handle;<br />
--><br />
</script><br />
Drag the browser border to trigger the resize event<br />
</body><br />
</html></source><br />
<br />
<br />
<br />
== event.layerY==<br />
<br />
<p>The layerY property controls the vertical (y-coordinate) positioning within the layer.</p><br />
<p>When a window or frame is resized, the new value for the vertical coordinate is stored in the layerY property.</p><br />
<br />
<br />
<br />
<!-- start source code --><br />
<br />
<source lang="javascript"><br />
<html><br />
<head><br />
<title>Using the layerY property for the event object</title><br />
</head><br />
<body><br />
<script language="JavaScript"><br />
<!--<br />
function handle(evnt){<br />
alert("The new height (Y value) of the window object after the resize is: " + evnt.layerY);<br />
return true;<br />
}<br />
window.onresize = handle;<br />
--><br />
</script><br />
Resize the browser to see the result.<br />
</body><br />
</html></source><br />
<br />
<br />
<br />
== event.pageX==<br />
<br />
<p>The pageX property controls the horizontal (x-coordinate) positioning within a Web page.</p><br />
<br />
<br />
<br />
<!-- start source code --><br />
<br />
<source lang="javascript"><br />
<html><br />
<head><br />
<title>Example of the event.pageX property</title><br />
</head><br />
<body><br />
<script language = "JavaScript"><br />
<!--<br />
window.captureEvents(Event.CLICK);<br />
function handle(evnt){<br />
alert("The X coordinate of where the click event occurred is: " + evnt.pageX);<br />
return true;<br />
}<br />
window.onclick = handle;<br />
--><br />
</script><br />
<form><br />
Click in the web browser.<br />
</form><br />
</body><br />
</html></source><br />
<br />
<br />
<br />
== event.pageY==<br />
<br />
<p>The pageY property of the Event object controls the vertical (y-coordinate) positioning.</p><br />
<br />
<br />
<br />
<!-- start source code --><br />
<br />
<source lang="javascript"><br />
<html><br />
<head><br />
<title>Example of the event.pageY property</title><br />
</head><br />
<body><br />
<script language = "JavaScript"><br />
<!--<br />
function handle(evnt){<br />
alert("The Y coordinate of where the click event occurred is: " + evnt.pageY);<br />
return true;<br />
}<br />
window.onclick = handle;<br />
--><br />
</script><br />
Click in the web browser.<br />
</body><br />
</html></source><br />
<br />
<br />
<br />
== event.screenX==<br />
<br />
<p>The screenX property controls the horizontal (x-coordinate) positioning within the computer screen.</p><br />
<br />
<br />
<br />
<!-- start source code --><br />
<br />
<source lang="javascript"><br />
<html><br />
<head><br />
<title>Example of the event.screenX property</title><br />
</head><br />
<body><br />
<script language = "JavaScript"><br />
<!--<br />
function handle(evnt){<br />
alert("The X coordinate relative to the computer screen of where the click occurred is: " + evnt.screenX);<br />
return true;<br />
}<br />
window.onclick = handle;<br />
--><br />
</script><br />
Click in the web browser.<br />
</body><br />
</html></source><br />
<br />
<br />
<br />
== event.screenY==<br />
<br />
<p>The screenY property controls the vertical (y-coordinate) positioning within the computer screen.</p><br />
<br />
<br />
<br />
<!-- start source code --><br />
<br />
<source lang="javascript"><br />
<html><br />
<head><br />
<title>Example of the event.screenY property</title><br />
</head><br />
<body><br />
<script language = "JavaScript"><br />
<!--<br />
function handle(evnt){<br />
alert("The Y coordinate relative to the computer screen of where the click occurred is: " + evnt.screenY);<br />
return true;<br />
}<br />
window.onclick = handle;<br />
--><br />
</script><br />
Click in the web browser.<br />
</body><br />
</html></source><br />
<br />
<br />
<br />
== event.target==<br />
<br />
<p>The target property refers to the object on which the event takes place.</p><br />
<br />
<br />
<br />
<!-- start source code --><br />
<br />
<source lang="javascript"><br />
<html><br />
<head><br />
<title>Using the target property of the event object</title><br />
</head><br />
<body><br />
<script language = "JavaScript"><br />
<!--<br />
function whichButton(evnt){<br />
window.captureEvents(evnt.CLICK);<br />
alert("The button you pressed was:" + evnt.target.value);<br />
}<br />
--><br />
</script><br />
<form name="form1"><br />
Choose a button and click on it.<br />
<br><br><br />
<input type="button" value="Button1" name="Button1" onClick = whichButton(event)><br />
<input type="button" value="Button2" name="Button2" onClick = whichButton(event)><br />
<input type="button" value="Button3" name="Button3" onClick = whichButton(event)><br />
</form><br />
</body><br />
</html></source><br />
<br />
<br />
<br />
== event.type==<br />
<br />
<p>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.</p><br />
<br />
<br />
<br />
<!-- start source code --><br />
<br />
<source lang="javascript"><br />
<html><br />
<head><br />
<title>Using the type property for the event object</title><br />
</head><br />
<body><br />
<script language="Javascript"><br />
<!--<br />
function handle(evnt){<br />
if(evnt.type == "click"){<br />
document.form1.msg.value += "The click event occurred.\n"<br />
}<br />
if(evnt.type == "mousedown"){<br />
document.form1.msg.value += "The mousedown event occurred.\n"<br />
}<br />
if(evnt.type == "keypress"){<br />
document.form1.msg.value += "The keypress event occurred.\n"<br />
}<br />
return true;<br />
}<br />
document.onkeypress = handle;<br />
document.onclick = handle;<br />
document.onmousedown = handle;<br />
--><br />
</script><br />
<form name="form1"><br />
This page demonstrates a few different events. <br />
Upon events occurring, a message will be displayed in the textarea indicating which event occurred.<br />
<br><br><br><br />
<ul><br />
<li><input type="Button" value="Click Me"></li><br />
<br><br><br />
<li><br />
Dummy text area.<br />
<input type="text" size="20"><br />
<br><br />
Click mouse in text field.<br />
<br><br><br />
</li><br />
<br><br><br />
<b>Message output:</b><br />
<textarea name="msg" rows="10" cols="60"></textarea><br />
<br><br><br />
<input type="reset" value="Clear"><br />
</form><br />
</body><br />
</html></source><br />
<br />
<br />
<br />
== event.which==<br />
<br />
<p>The which property refers to which key or mouse button was pressed or clicked.</p><br />
<p>The value returned for mouse events is a numeric value 1, 2, or 3, representing the left, middle, and right mouse buttons, respectively.</p><br />
<p>The value returned for keyboard events is a character representation for the key that was pressed.</p><br />
<br />
<br />
<br />
<!-- start source code --><br />
<br />
<source lang="javascript"><br />
<html><br />
<head><br />
<title>Using the which property of the event object</title><br />
</head><br />
<body><br />
<form><br />
This example uses the which property of the event object to determine<br />
which mouse button is pressed.<br />
<br><br><br />
<input type="radio" onClick = "alert("Mouse button Number " + event.which + "was pressed.")"><br />
</form><br />
</body><br />
</html></source><br />
<br />
<br />
<br />
== event.width==<br />
<br />
<p>The width property refers to the width of a window or frame.</p><br />
<p>It is set during the RESIZE event to the new width of window or frame being resized.</p><br />
<br />
<br />
<br />
<!-- start source code --><br />
<br />
<source lang="javascript"><br />
<html><br />
<head><br />
<title>Example of the event.width property</title><br />
</head><br />
<body><br />
<script language = JavaScript><br />
<!--<br />
function handle(evnt){<br />
alert("An RESIZE event has occurred. The new width of the window is: " + evnt.height);<br />
return true;<br />
}<br />
window.onresize = handle;<br />
--><br />
</script><br />
Resize browser to see the result<br />
</body><br />
</html></source></div>