JavaScript Tutorial/Event/Event Parameter

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

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>


Pass key event as the function parameter

<html>
    <head>
        <title>Key Events Example</title>
        <script type="text/javascript">
            function handleEvent(oEvent) {
                var oTextbox = document.getElementById("txt1");
                oTextbox.value += "\n>" + oEvent.type;
            }
        </script>
    </head>
    <body>
        <P>Type some characters into the first textbox.</p>
        <P><textarea id="txtInput" rows="15" cols="50"
            onkeydown="handleEvent(event)"
            onkeyup="handleEvent(event)"
            onkeypress="handleEvent(event)"></textarea></p>
        <P><textarea id="txt1" rows="15" cols="50"></textarea></p>
    </body>
</html>


Use mouse event as the function parameter

<html>
<head>
<title>Mouse Events Example</title>
<script type="text/javascript">
    function handleEvent(oEvent) {
        var oTextbox = document.getElementById("txt1");
        oTextbox.value += "\n" + oEvent.type;

    }
</script>
</head>
<body>
<P>Use your mouse to click and double click the red square.</p>
<div style="width: 100px; height: 100px; background-color: red"
     onclick="handleEvent(event)"
     id="div1"></div>
<P><textarea id="txt1" rows="15" cols="50"></textarea></p>
</body>
</html>


X/Y Marks the Spot for a popup window (IE)

<html>
<head>
<title>X/Y Marks the Spot</title>
<script type="text/javascript">
function mouseDown() {
  var locString = "X = " + window.event.screenX + " Y = " + window.event.screenY;
  document.write(locString);
}
document.onmousedown=mouseDown;
</script>
</head>
<body>
</body>
</html>
Источник — «http://wbex.ru/index.php?title=JavaScript_Tutorial/Event/Event_Parameter&oldid=8765»