JavaScript DHTML/Event/Event Properties

Материал из Web эксперт
Перейти к: навигация, поиск

"cancelBubble" Example

 
    
<html>
<head>
<script language="JavaScript">
function function1() {
    if (window.event.shiftKey){
        window.event.cancelBubble = true;
    }
    alert(window.event.cancelBubble);
}
</script></head>
<body>
<button onclick="function1();">
Click here while pressing the Shift key
</button>
</body>
</html>



"contentOverflow" Example

 
    
<html>
<body>
<script language="JavaScript">
function function1() {
    alert("contentOverflow: "+ event.contentOverflow);
}
</script>
<body  bottommargin=100 onLoad="function1()">
</body>
</html>



Event from Element

 
    
<html>
<head>
<script>
    function function1() {
        alert(event.fromElement.innerText);
    }
</script>
</head>
<body><table border="1">
<table>
    <tr><td onmouseover="function1();">CELL 1</td></tr>
    <tr><td onmouseover="function1();">CELL 2</td></tr>
    <tr><td onmouseover="function1();">CELL 3</td></tr>
</table>
</body>
</html>



Event "layerX"

 
    
<html>
<body>
<script>
function function1(myEvent) { 
   document.getElementById("myX").innerHTML = myEvent.layerX;
   document.getElementById("myY").innerHTML = myEvent.layerY; 
} 
document.onmousemove = function1;
</script>
<p>
<b>Layer X Coordinate:</b> 
<span id="myX">0</span>
</p>
<p>
<b>Layer Y Coordinate:</b> 
<span id="myY">0</span>
</p>
<button onclick="alert(event.type);">Event Type</button>
</body>
</html>



Event "layerY"

 
    
<html>
<body>
<script>
function function1(myEvent) { 
   document.getElementById("myX").innerHTML = myEvent.layerX;
   document.getElementById("myY").innerHTML = myEvent.layerY; 
} 
document.onmousemove = function1;
</script>
<p>
<b>Layer X Coordinate:</b> 
<span id="myX">0</span>
</p>
<p>
<b>Layer Y Coordinate:</b> 
<span id="myY">0</span>
</p>
<button onclick="alert(event.type);">Event Type</button>
</body>
</html>



Event nextPage

 
    
<html>
<head>
<script language="JavaScript">
function function1() {
    var m = event.nextPage;
    alert(m);
}
</script>
</head>
<body bottommargin="150">
    <input type="Button" id="myB" value="Click here" onClick="function1();">
</body>
</html>



Event offsetY and offsetY

 
    
<script language="JavaScript">
function function1() {
    myX.innerHTML = window.event.offsetX;
    myY.innerHTML = window.event.offsetY;
    mySX.innerHTML = window.event.screenX;
    mySY.innerHTML = window.event.screenY;
    mySH.innerHTML = myDiv.scrollHeight;
    mySW.innerHTML = myDiv.scrollWidth; 
}
function function1() {
    mySL.innerHTML = myDiv.scrollLeft;
    myST.innerHTML = myDiv.scrollTop; 
} 
</script>
<p>
   <b>X Coordinate:</b> 
   <span id="myX">0</span>
</p>
<p>
   <b>Y Coordinate:</b> 
   <span id="myY">0</span>
</p>
<p>
   <b>Screen X:</b> 
   <span id="mySX">0</span>
</p>
<p>
   <b>Screen Y:</b> 
   <span id="mySY">0</span>
</p>
<p>
   <b>Scroll Height:</b> 
   <span id="mySH">0</span>
</p>
<p>
   <b>Scroll Width:</b> 
   <span id="mySW">0</span>
</p>
<p>
   <b>Scroll Left:</b> 
   <span id="mySL">0</span>
</p>
<p>
   <b>Scroll Top:</b> 
   <span id="myST">0</span>
</p>
<div id="myDiv" 
     onmousemove="function1();" 
     onscroll="function1();" 
     style="border:solid; width:200; height:50; overflow:scroll;">
   <img src="http://www.wbex.ru/style/logo.png">
</div>



Event pageY and pageX

 
    
<html>
<body>
<script>
function function1(myEvent) { 
   document.getElementById("myX").innerHTML = myEvent.pageX;
   document.getElementById("myY").innerHTML = myEvent.pageY; 
} 
document.onmousemove = function1;
</script>
<p>
    <b>Page X Coordinate:</b> 
    <span id="myX">0</span>
</p>
<p>
    <b>Page Y Coordinate:</b> 
    <span id="myY">0</span>
</p>
</body>
</html>



Event "propertyName"

 
    
<html>
<body>
<script language="JavaScript">
    function function1(){
        alert(event.propertyName);
    }
</script>
<button onclick="this.style.color="white"; this.style.backgroundColor="red";" 
        onpropertychange="function1();">propertyName
</button>
</body>
</html>



Event qualifier

 
    
<html>
<body>
<script language="JavaScript">
    function function1() {
        var m = window.event.qualifier; 
        alert(m);
    }
</script>
<a datasrc="#myData" datafld="column1" dataformatas="html" target="_blank">
data link
</a>
<object classid="clsid:333C7BC4-460F-11D0-BC04-0080C7055A83" id="myData">
    <param name="DataURL" value="myfile.csv">
    <param name="UseHeader" value="True">
    <param name="TextQualifier" value=""">
</object>
<input type="button" value="Get qualifier" onclick="function1();">
</body>
</html>



Event repeat

 
    
<html>
<body>
<script language="JavaScript">
function keyStatus() {
    x = event.repeat; 
    if (x == true) {
        alert("A key has been hold down");
    }
}
</script>
<a id="myL" 
   href="http://www.wbex.ru/" 
   target="_blank" 
   onKeyDown="keyStatus();">wbex.ru Network
</a>
</body>
</html>



Event return Value

 
    
<html>
<body>
<script language="JavaScript">
    function function1() {
        event.returnValue = false;
    }
</script>
<a href="http://www.wbex.ru" 
   target="_blank" 
   onClick="function1();">wbex.ru Home page</a>



Event saveType

 
    
<html xmlns:yourNs><head>
<style>
@media all { IE\:homePage {behavior:url(http://www.wbex.ru)}} 
</style>
<script language="JavaScript">
function goHomePage(){
    wbex.navigateHomePage();
    event.returnValue=false; 
}
function function1() {
    var m = event.saveType; 
    alert(m);
}
</script>
</head>
<body>
<yourNs:homepage id="wbex"/>
<public:attach event="oncontentsave" onevent="cbCopy()" for = myA/>
<a id="secL" href="" onClick="goHomePage();">Navigate to your home page</a>
<input type="button" value="Content type" onclick="function1();">
</body>
</html>



Event screenX

 
    
<html>
<body>
<script language="JavaScript">
function function2() {
    myX.innerHTML = window.event.offsetX;
    myY.innerHTML = window.event.offsetY;
    mySX.innerHTML = window.event.screenX;
    mySY.innerHTML = window.event.screenY;
    mySH.innerHTML = myDiv.scrollHeight;
    mySW.innerHTML = myDiv.scrollWidth; 
}
function function1() {
    mySL.innerHTML = myDiv.scrollLeft;
    myST.innerHTML = myDiv.scrollTop; 
} 
</script>
<p>
   <b>X Coordinate:</b> 
   <span id="myX">0</span>
</p>
<p>
   <b>Y Coordinate:</b> 
   <span id="myY">0</span>
</p>
<p>
   <b>Screen X:</b> 
   <span id="mySX">0</span>
</p>
<p>
   <b>Screen Y:</b> 
   <span id="mySY">0</span>
</p>
<p>
   <b>Scroll Height:</b> 
   <span id="mySH">0</span>
</p>
<p>
   <b>Scroll Width:</b> 
   <span id="mySW">0</span>
</p>
<p>
   <b>Scroll Left:</b> 
   <span id="mySL">0</span>
</p>
<p>
   <b>Scroll Top:</b> 
   <span id="myST">0</span>
</p>
<div id="myDiv" 
     onmousemove="function2();" 
     onscroll="function1();" 
     style="border:solid; width:200; height:50; overflow:scroll;">
   <img src="http://www.wbex.ru/style/logo.png">
</div>
</body>
</html>



Event screenY, screenX

 
    
<html>
<body>
<script language="JavaScript">
function function2() {
    myX.innerHTML = window.event.offsetX;
    myY.innerHTML = window.event.offsetY;
    mySX.innerHTML = window.event.screenX;
    mySY.innerHTML = window.event.screenY;
    mySH.innerHTML = myDiv.scrollHeight;
    mySW.innerHTML = myDiv.scrollWidth; 
}
function function1() {
    mySL.innerHTML = myDiv.scrollLeft;
    myST.innerHTML = myDiv.scrollTop; 
} 
</script>
<p>
   <b>X Coordinate:</b> 
   <span id="myX">0</span>
</p>
<p>
   <b>Y Coordinate:</b> 
   <span id="myY">0</span>
</p>
<p>
   <b>Screen X:</b> 
   <span id="mySX">0</span>
</p>
<p>
   <b>Screen Y:</b> 
   <span id="mySY">0</span>
</p>
<p>
   <b>Scroll Height:</b> 
   <span id="mySH">0</span>
</p>
<p>
   <b>Scroll Width:</b> 
   <span id="mySW">0</span>
</p>
<p>
   <b>Scroll Left:</b> 
   <span id="mySL">0</span>
</p>
<p>
   <b>Scroll Top:</b> 
   <span id="myST">0</span>
</p>
<div id="myDiv" 
     onmousemove="function2();" 
     onscroll="function1();" 
     style="border:solid; width:200; height:50; overflow:scroll;">
   <img src="http://www.wbex.ru/style/logo.png">
</div>
</body>
</html>



Event source element

 
    
<html>
<body>
<script language="JavaScript">
    function function1() {
        alert(window.event.srcElement.id);
    }
</script>
<body id="myBody" onclick="function1();">
<button id="myButton1" onclick="function1();">Button One</button>
<button id="myButton2" onclick="function1();">Button Two</button>
</body>
</body>
</html>



Event "srcUrn" Example

 
    
<html>
<body>
<style>
@media all {IE\:homePage {behavior:url(#default#homepage)}} 
</style>
<script language="JavaScript">
function goHomePage(){
    HP.navigateHomePage();
    event.returnValue=false; 
} 
</script>
<script language="JavaScript" for="myA" event="onmouseout">
var m = event.srcUrn;
alert("The value of property srcUrn is: "+m);
</script>
<yourNs:homepage id="HP"/>
<a id="myA" href="" onClick="goHomePage();">Navigate to your home page</a>
</body>
</html>



Event "target" Example

 
    
<html>
<body>
<script>
function function1(myEvent) { 
   document.getElementById("myX").innerHTML = myEvent.layerX;
   document.getElementById("myY").innerHTML = myEvent.layerY; 
} 
document.onmousemove = function1;
</script>
<p>
<b>Layer X Coordinate:</b> 
<span id="myX">0</span>
</p>
<p>
<b>Layer Y Coordinate:</b> 
<span id="myY">0</span>
</p>
<button onclick="alert(event.type);">Event Type</button>
</body>
</html>



Event to Element

 
    
<html>
<head>
<script>
    function alertMe() {
        alert(event.toElement.innerText);
    }
</script>
</head>
<body>
<table border="1">
<tr><td onmouseover="alertMe();">CELL 1</td></tr>
<tr><td onmouseover="alertMe();">CELL 2</td></tr>
<tr><td onmouseover="alertMe();">CELL 3</td></tr>
</table>
</body>
</html>



Event type

 
    
<html>
<head>
<script language="JavaScript">
    function function1(){
        var m = window.event.type; 
        alert(m)
    }
</script></head>
<body>
<input type="button" value="type = "button"" onClick="function1();">
</body>
</html>



Event y and x Property

 
    
<html>
<body>
<script language="JavaScript">
function function1() {
    myX.innerHTML = window.event.x;
    myY.innerHTML = window.event.y; 
} 
</script>
<p>
   <b>X Coordinate:</b> 
   <span id="myX">0</span>
</p>
<p>
   <b>Y Coordinate:</b> 
   <span id="myY">0</span>
</p>
<div id="myDiv" onmousemove="function1();" style="border:solid; width:500; height:200;">
www.wbex.ru
</div>
</body>
</html>



Get event Phase: CAPTURING,BUBBLING

  

<html> 
<head> 
<title>W3C DOM Event Propagation</title> 
<script type="text/javascript"> 

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>
Источник — «http://wbex.ru/index.php?title=JavaScript_DHTML/Event/Event_Properties&oldid=2123»