http://wbex.ru/index.php?action=history&feed=atom&title=JavaScript_DHTML%2FEvent%2FEvent_Properties
JavaScript DHTML/Event/Event Properties - История изменений
2026-04-05T04:39:14Z
История изменений этой страницы в вики
MediaWiki 1.30.0
http://wbex.ru/index.php?title=JavaScript_DHTML/Event/Event_Properties&diff=2122&oldid=prev
в 10:00, 26 мая 2010
2010-05-26T10:00:30Z
<p></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;">Версия 10:00, 26 мая 2010</td>
</tr><tr><td colspan="2" style="text-align: center;" lang="ru"><div class="mw-diff-empty">(нет различий)</div>
</td></tr></table>
http://wbex.ru/index.php?title=JavaScript_DHTML/Event/Event_Properties&diff=2123&oldid=prev
Admin: 1 версия
2010-05-26T07:20:41Z
<p>1 версия</p>
<p><b>Новая страница</b></p><div>=="cancelBubble" Example==<br />
<br />
<br />
<br />
<br />
<br />
<!-- start source code --><br />
<br />
<source lang="html4strict"><br />
<br />
<br />
<html><br />
<head><br />
<script language="JavaScript"><br />
function function1() {<br />
if (window.event.shiftKey){<br />
window.event.cancelBubble = true;<br />
}<br />
alert(window.event.cancelBubble);<br />
}<br />
</script></head><br />
<body><br />
<button onclick="function1();"><br />
Click here while pressing the Shift key<br />
</button><br />
</body><br />
</html><br />
<br />
<br />
<br />
</source><br />
<br />
<br />
<br />
<br />
=="contentOverflow" Example==<br />
<br />
<br />
<br />
<br />
<br />
<!-- start source code --><br />
<br />
<source lang="html4strict"><br />
<br />
<br />
<html><br />
<body><br />
<script language="JavaScript"><br />
function function1() {<br />
alert("contentOverflow: "+ event.contentOverflow);<br />
}<br />
</script><br />
<body bottommargin=100 onLoad="function1()"><br />
</body><br />
</html><br />
<br />
<br />
<br />
</source><br />
<br />
<br />
<br />
<br />
==Event from Element==<br />
<br />
<br />
<br />
<br />
<br />
<!-- start source code --><br />
<br />
<source lang="html4strict"><br />
<br />
<br />
<html><br />
<head><br />
<script><br />
function function1() {<br />
alert(event.fromElement.innerText);<br />
}<br />
</script><br />
</head><br />
<body><table border="1"><br />
<table><br />
<tr><td onmouseover="function1();">CELL 1</td></tr><br />
<tr><td onmouseover="function1();">CELL 2</td></tr><br />
<tr><td onmouseover="function1();">CELL 3</td></tr><br />
</table><br />
</body><br />
</html><br />
<br />
<br />
<br />
</source><br />
<br />
<br />
<br />
<br />
==Event "layerX"==<br />
<br />
<br />
<br />
<br />
<br />
<!-- start source code --><br />
<br />
<source lang="html4strict"><br />
<br />
<br />
<html><br />
<body><br />
<script><br />
function function1(myEvent) { <br />
document.getElementById("myX").innerHTML = myEvent.layerX;<br />
document.getElementById("myY").innerHTML = myEvent.layerY; <br />
} <br />
document.onmousemove = function1;<br />
</script><br />
<p><br />
<b>Layer X Coordinate:</b> <br />
<span id="myX">0</span><br />
</p><br />
<p><br />
<b>Layer Y Coordinate:</b> <br />
<span id="myY">0</span><br />
</p><br />
<button onclick="alert(event.type);">Event Type</button><br />
</body><br />
</html><br />
<br />
<br />
<br />
</source><br />
<br />
<br />
<br />
<br />
==Event "layerY"==<br />
<br />
<br />
<br />
<br />
<br />
<!-- start source code --><br />
<br />
<source lang="html4strict"><br />
<br />
<br />
<html><br />
<body><br />
<script><br />
function function1(myEvent) { <br />
document.getElementById("myX").innerHTML = myEvent.layerX;<br />
document.getElementById("myY").innerHTML = myEvent.layerY; <br />
} <br />
document.onmousemove = function1;<br />
</script><br />
<p><br />
<b>Layer X Coordinate:</b> <br />
<span id="myX">0</span><br />
</p><br />
<p><br />
<b>Layer Y Coordinate:</b> <br />
<span id="myY">0</span><br />
</p><br />
<button onclick="alert(event.type);">Event Type</button><br />
</body><br />
</html><br />
<br />
<br />
<br />
</source><br />
<br />
<br />
<br />
<br />
==Event nextPage==<br />
<br />
<br />
<br />
<br />
<br />
<!-- start source code --><br />
<br />
<source lang="html4strict"><br />
<br />
<br />
<html><br />
<head><br />
<script language="JavaScript"><br />
function function1() {<br />
var m = event.nextPage;<br />
alert(m);<br />
}<br />
</script><br />
</head><br />
<body bottommargin="150"><br />
<input type="Button" id="myB" value="Click here" onClick="function1();"><br />
</body><br />
</html><br />
<br />
<br />
<br />
</source><br />
<br />
<br />
<br />
<br />
==Event offsetY and offsetY==<br />
<br />
<br />
<br />
<br />
<!-- start source code --><br />
<br />
<source lang="html4strict"><br />
<br />
<br />
<script language="JavaScript"><br />
function function1() {<br />
myX.innerHTML = window.event.offsetX;<br />
myY.innerHTML = window.event.offsetY;<br />
mySX.innerHTML = window.event.screenX;<br />
mySY.innerHTML = window.event.screenY;<br />
mySH.innerHTML = myDiv.scrollHeight;<br />
mySW.innerHTML = myDiv.scrollWidth; <br />
}<br />
function function1() {<br />
mySL.innerHTML = myDiv.scrollLeft;<br />
myST.innerHTML = myDiv.scrollTop; <br />
} <br />
</script><br />
<p><br />
<b>X Coordinate:</b> <br />
<span id="myX">0</span><br />
</p><br />
<p><br />
<b>Y Coordinate:</b> <br />
<span id="myY">0</span><br />
</p><br />
<p><br />
<b>Screen X:</b> <br />
<span id="mySX">0</span><br />
</p><br />
<p><br />
<b>Screen Y:</b> <br />
<span id="mySY">0</span><br />
</p><br />
<p><br />
<b>Scroll Height:</b> <br />
<span id="mySH">0</span><br />
</p><br />
<p><br />
<b>Scroll Width:</b> <br />
<span id="mySW">0</span><br />
</p><br />
<p><br />
<b>Scroll Left:</b> <br />
<span id="mySL">0</span><br />
</p><br />
<p><br />
<b>Scroll Top:</b> <br />
<span id="myST">0</span><br />
</p><br />
<div id="myDiv" <br />
onmousemove="function1();" <br />
onscroll="function1();" <br />
style="border:solid; width:200; height:50; overflow:scroll;"><br />
<img src="http://www.wbex.ru/style/logo.png"><br />
</div><br />
<br />
<br />
<br />
</source><br />
<br />
<br />
<br />
<br />
==Event pageY and pageX==<br />
<br />
<br />
<br />
<br />
<br />
<!-- start source code --><br />
<br />
<source lang="html4strict"><br />
<br />
<br />
<html><br />
<body><br />
<script><br />
function function1(myEvent) { <br />
document.getElementById("myX").innerHTML = myEvent.pageX;<br />
document.getElementById("myY").innerHTML = myEvent.pageY; <br />
} <br />
document.onmousemove = function1;<br />
</script><br />
<p><br />
<b>Page X Coordinate:</b> <br />
<span id="myX">0</span><br />
</p><br />
<p><br />
<b>Page Y Coordinate:</b> <br />
<span id="myY">0</span><br />
</p><br />
</body><br />
</html><br />
<br />
<br />
<br />
</source><br />
<br />
<br />
<br />
<br />
==Event "propertyName"==<br />
<br />
<br />
<br />
<br />
<br />
<!-- start source code --><br />
<br />
<source lang="html4strict"><br />
<br />
<br />
<html><br />
<body><br />
<script language="JavaScript"><br />
function function1(){<br />
alert(event.propertyName);<br />
}<br />
</script><br />
<button onclick="this.style.color="white"; this.style.backgroundColor="red";" <br />
onpropertychange="function1();">propertyName<br />
</button><br />
</body><br />
</html><br />
<br />
<br />
<br />
</source><br />
<br />
<br />
<br />
<br />
==Event qualifier==<br />
<br />
<br />
<br />
<br />
<br />
<!-- start source code --><br />
<br />
<source lang="html4strict"><br />
<br />
<br />
<html><br />
<body><br />
<script language="JavaScript"><br />
function function1() {<br />
var m = window.event.qualifier; <br />
alert(m);<br />
}<br />
</script><br />
<a datasrc="#myData" datafld="column1" dataformatas="html" target="_blank"><br />
data link<br />
</a><br />
<object classid="clsid:333C7BC4-460F-11D0-BC04-0080C7055A83" id="myData"><br />
<param name="DataURL" value="myfile.csv"><br />
<param name="UseHeader" value="True"><br />
<param name="TextQualifier" value="""><br />
</object><br />
<input type="button" value="Get qualifier" onclick="function1();"><br />
</body><br />
</html><br />
<br />
<br />
<br />
</source><br />
<br />
<br />
<br />
<br />
==Event repeat==<br />
<br />
<br />
<br />
<br />
<br />
<!-- start source code --><br />
<br />
<source lang="html4strict"><br />
<br />
<br />
<html><br />
<body><br />
<script language="JavaScript"><br />
function keyStatus() {<br />
x = event.repeat; <br />
if (x == true) {<br />
alert("A key has been hold down");<br />
}<br />
}<br />
</script><br />
<a id="myL" <br />
href="http://www.wbex.ru/" <br />
target="_blank" <br />
onKeyDown="keyStatus();">wbex.ru Network<br />
</a><br />
</body><br />
</html><br />
<br />
<br />
<br />
</source><br />
<br />
<br />
<br />
<br />
==Event return Value==<br />
<br />
<br />
<br />
<br />
<br />
<!-- start source code --><br />
<br />
<source lang="html4strict"><br />
<br />
<br />
<html><br />
<body><br />
<script language="JavaScript"><br />
function function1() {<br />
event.returnValue = false;<br />
}<br />
</script><br />
<a href="http://www.wbex.ru" <br />
target="_blank" <br />
onClick="function1();">wbex.ru Home page</a><br />
<br />
<br />
<br />
</source><br />
<br />
<br />
<br />
<br />
==Event saveType==<br />
<br />
<br />
<br />
<br />
<br />
<!-- start source code --><br />
<br />
<source lang="html4strict"><br />
<br />
<br />
<html xmlns:yourNs><head><br />
<style><br />
@media all { IE\:homePage {behavior:url(http://www.wbex.ru)}} <br />
</style><br />
<script language="JavaScript"><br />
function goHomePage(){<br />
wbex.navigateHomePage();<br />
event.returnValue=false; <br />
}<br />
function function1() {<br />
var m = event.saveType; <br />
alert(m);<br />
}<br />
</script><br />
</head><br />
<body><br />
<yourNs:homepage id="wbex"/><br />
<public:attach event="oncontentsave" onevent="cbCopy()" for = myA/><br />
<a id="secL" href="" onClick="goHomePage();">Navigate to your home page</a><br />
<input type="button" value="Content type" onclick="function1();"><br />
</body><br />
</html><br />
<br />
<br />
<br />
</source><br />
<br />
<br />
<br />
<br />
==Event screenX==<br />
<br />
<br />
<br />
<br />
<br />
<!-- start source code --><br />
<br />
<source lang="html4strict"><br />
<br />
<br />
<html><br />
<body><br />
<script language="JavaScript"><br />
function function2() {<br />
myX.innerHTML = window.event.offsetX;<br />
myY.innerHTML = window.event.offsetY;<br />
mySX.innerHTML = window.event.screenX;<br />
mySY.innerHTML = window.event.screenY;<br />
mySH.innerHTML = myDiv.scrollHeight;<br />
mySW.innerHTML = myDiv.scrollWidth; <br />
}<br />
function function1() {<br />
mySL.innerHTML = myDiv.scrollLeft;<br />
myST.innerHTML = myDiv.scrollTop; <br />
} <br />
</script><br />
<p><br />
<b>X Coordinate:</b> <br />
<span id="myX">0</span><br />
</p><br />
<p><br />
<b>Y Coordinate:</b> <br />
<span id="myY">0</span><br />
</p><br />
<p><br />
<b>Screen X:</b> <br />
<span id="mySX">0</span><br />
</p><br />
<p><br />
<b>Screen Y:</b> <br />
<span id="mySY">0</span><br />
</p><br />
<p><br />
<b>Scroll Height:</b> <br />
<span id="mySH">0</span><br />
</p><br />
<p><br />
<b>Scroll Width:</b> <br />
<span id="mySW">0</span><br />
</p><br />
<p><br />
<b>Scroll Left:</b> <br />
<span id="mySL">0</span><br />
</p><br />
<p><br />
<b>Scroll Top:</b> <br />
<span id="myST">0</span><br />
</p><br />
<div id="myDiv" <br />
onmousemove="function2();" <br />
onscroll="function1();" <br />
style="border:solid; width:200; height:50; overflow:scroll;"><br />
<img src="http://www.wbex.ru/style/logo.png"><br />
</div><br />
</body><br />
</html><br />
<br />
<br />
<br />
</source><br />
<br />
<br />
<br />
<br />
==Event screenY, screenX==<br />
<br />
<br />
<br />
<br />
<br />
<!-- start source code --><br />
<br />
<source lang="html4strict"><br />
<br />
<br />
<html><br />
<body><br />
<script language="JavaScript"><br />
function function2() {<br />
myX.innerHTML = window.event.offsetX;<br />
myY.innerHTML = window.event.offsetY;<br />
mySX.innerHTML = window.event.screenX;<br />
mySY.innerHTML = window.event.screenY;<br />
mySH.innerHTML = myDiv.scrollHeight;<br />
mySW.innerHTML = myDiv.scrollWidth; <br />
}<br />
function function1() {<br />
mySL.innerHTML = myDiv.scrollLeft;<br />
myST.innerHTML = myDiv.scrollTop; <br />
} <br />
</script><br />
<p><br />
<b>X Coordinate:</b> <br />
<span id="myX">0</span><br />
</p><br />
<p><br />
<b>Y Coordinate:</b> <br />
<span id="myY">0</span><br />
</p><br />
<p><br />
<b>Screen X:</b> <br />
<span id="mySX">0</span><br />
</p><br />
<p><br />
<b>Screen Y:</b> <br />
<span id="mySY">0</span><br />
</p><br />
<p><br />
<b>Scroll Height:</b> <br />
<span id="mySH">0</span><br />
</p><br />
<p><br />
<b>Scroll Width:</b> <br />
<span id="mySW">0</span><br />
</p><br />
<p><br />
<b>Scroll Left:</b> <br />
<span id="mySL">0</span><br />
</p><br />
<p><br />
<b>Scroll Top:</b> <br />
<span id="myST">0</span><br />
</p><br />
<div id="myDiv" <br />
onmousemove="function2();" <br />
onscroll="function1();" <br />
style="border:solid; width:200; height:50; overflow:scroll;"><br />
<img src="http://www.wbex.ru/style/logo.png"><br />
</div><br />
</body><br />
</html><br />
<br />
<br />
<br />
</source><br />
<br />
<br />
<br />
<br />
==Event source element ==<br />
<br />
<br />
<br />
<br />
<br />
<!-- start source code --><br />
<br />
<source lang="html4strict"><br />
<br />
<br />
<html><br />
<body><br />
<script language="JavaScript"><br />
function function1() {<br />
alert(window.event.srcElement.id);<br />
}<br />
</script><br />
<body id="myBody" onclick="function1();"><br />
<button id="myButton1" onclick="function1();">Button One</button><br />
<button id="myButton2" onclick="function1();">Button Two</button><br />
</body><br />
</body><br />
</html><br />
<br />
<br />
<br />
</source><br />
<br />
<br />
<br />
<br />
==Event "srcUrn" Example==<br />
<br />
<br />
<br />
<br />
<br />
<!-- start source code --><br />
<br />
<source lang="html4strict"><br />
<br />
<br />
<html><br />
<body><br />
<style><br />
@media all {IE\:homePage {behavior:url(#default#homepage)}} <br />
</style><br />
<script language="JavaScript"><br />
function goHomePage(){<br />
HP.navigateHomePage();<br />
event.returnValue=false; <br />
} <br />
</script><br />
<script language="JavaScript" for="myA" event="onmouseout"><br />
var m = event.srcUrn;<br />
alert("The value of property srcUrn is: "+m);<br />
</script><br />
<yourNs:homepage id="HP"/><br />
<a id="myA" href="" onClick="goHomePage();">Navigate to your home page</a><br />
</body><br />
</html><br />
<br />
<br />
<br />
</source><br />
<br />
<br />
<br />
<br />
==Event "target" Example==<br />
<br />
<br />
<br />
<br />
<br />
<!-- start source code --><br />
<br />
<source lang="html4strict"><br />
<br />
<br />
<html><br />
<body><br />
<script><br />
function function1(myEvent) { <br />
document.getElementById("myX").innerHTML = myEvent.layerX;<br />
document.getElementById("myY").innerHTML = myEvent.layerY; <br />
} <br />
document.onmousemove = function1;<br />
</script><br />
<p><br />
<b>Layer X Coordinate:</b> <br />
<span id="myX">0</span><br />
</p><br />
<p><br />
<b>Layer Y Coordinate:</b> <br />
<span id="myY">0</span><br />
</p><br />
<button onclick="alert(event.type);">Event Type</button><br />
</body><br />
</html><br />
<br />
<br />
<br />
</source><br />
<br />
<br />
<br />
<br />
==Event to Element==<br />
<br />
<br />
<br />
<br />
<br />
<!-- start source code --><br />
<br />
<source lang="html4strict"><br />
<br />
<br />
<html><br />
<head><br />
<script><br />
function alertMe() {<br />
alert(event.toElement.innerText);<br />
}<br />
</script><br />
</head><br />
<body><br />
<table border="1"><br />
<tr><td onmouseover="alertMe();">CELL 1</td></tr><br />
<tr><td onmouseover="alertMe();">CELL 2</td></tr><br />
<tr><td onmouseover="alertMe();">CELL 3</td></tr><br />
</table><br />
</body><br />
</html><br />
<br />
<br />
<br />
</source><br />
<br />
<br />
<br />
<br />
==Event type==<br />
<br />
<br />
<br />
<br />
<br />
<!-- start source code --><br />
<br />
<source lang="html4strict"><br />
<br />
<br />
<html><br />
<head><br />
<script language="JavaScript"><br />
function function1(){<br />
var m = window.event.type; <br />
alert(m)<br />
}<br />
</script></head><br />
<body><br />
<input type="button" value="type = "button"" onClick="function1();"><br />
</body><br />
</html><br />
<br />
<br />
<br />
</source><br />
<br />
<br />
<br />
<br />
==Event y and x Property==<br />
<br />
<br />
<br />
<br />
<br />
<!-- start source code --><br />
<br />
<source lang="html4strict"><br />
<br />
<br />
<html><br />
<body><br />
<script language="JavaScript"><br />
function function1() {<br />
myX.innerHTML = window.event.x;<br />
myY.innerHTML = window.event.y; <br />
} <br />
</script><br />
<p><br />
<b>X Coordinate:</b> <br />
<span id="myX">0</span><br />
</p><br />
<p><br />
<b>Y Coordinate:</b> <br />
<span id="myY">0</span><br />
</p><br />
<div id="myDiv" onmousemove="function1();" style="border:solid; width:500; height:200;"><br />
www.wbex.ru<br />
</div><br />
</body><br />
</html><br />
<br />
<br />
<br />
</source><br />
<br />
<br />
<br />
<br />
==Get event Phase: CAPTURING,BUBBLING==<br />
<br />
<br />
<br />
<br />
<br />
<!-- start source code --><br />
<br />
<source lang="html4strict"><br />
<br />
<br />
<html> <br />
<head> <br />
<title>W3C DOM Event Propagation</title> <br />
<script type="text/javascript"> <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> <br />
<br />
<br />
</source></div>
Admin