JavaScript DHTML/Document/Event
Содержание
Add event handler listener to document
<html>
<head>
<title>W3C DOM Event Propagation</title>
<script type="text/javascript">
function init() {
document.addEventListener("click", docEvent, true);
}
function docEvent(evt) {
alert("Document level.");
}
</script>
</head>
<body onload="init()">
</body>
</html>
Attach an Event to element
<html>
<body>
<button id="myButton">Button</button>
<button onclick="function3();">Apply an event handler "Button"</button>
<button onclick="function2();">Detach</button>
<script language="JavaScript">
function function3() {
document.all.myButton.attachEvent("onclick", function1)
}
function function1() {
document.bgColor = "red";
}
function function2() {
document.bgColor = "white";
document.all.myButton.detachEvent("onclick", function1);
}
</script>
</body>
</html>
Detach Event
<html>
<body>
<button id="myButton">Button</button>
<button onclick="function3();">Apply an event handler "Button"</button>
<button onclick="function2();">Detach</button>
<script language="JavaScript">
function function3() {
document.all.myButton.attachEvent("onclick", function1)
}
function function1() {
document.bgColor = "red";
}
function function2() {
document.bgColor = "white";
document.all.myButton.detachEvent("onclick", function1);
}
</script>
</body>
</html>
Fire an Event
<html>
<body>
<button onmouseover="this.fireEvent("onclick")"
onclick="alert("Hello");">
Fire onclick event
</button>
</body>
</html>
Release Capture
<html>
<body>
<script language="JavaScript">
function function3() {
myX.innerHTML = window.event.offsetX;
myY.innerHTML = window.event.offsetY;
}
function function1() {
myDiv.setCapture();
}
function function2() {
myDiv.releaseCapture();
}
</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="function3();"
onclick="function2();"
style="border:solid; width:500; height:200;">
Click inside the box to disable mouse capture outside the box</div>
<button onclick="function1()">Set capture</button>
</body>
</html>
Set Capture
<html>
<body>
<script language="JavaScript">
function function3() {
myX.innerHTML = window.event.offsetX;
myY.innerHTML = window.event.offsetY;
}
function function1() {
myDiv.setCapture();
}
function function2() {
myDiv.releaseCapture();
}
</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="function3();"
onclick="function2();"
style="border:solid; width:500;height:200;">
Click inside the box to disable mouse capture outside the box
</div>
<button onclick="function1()">Set capture</button>
</body>
</html>