JavaScript DHTML/Document/Event
Содержание
Add event handler listener to document
<source lang="html4strict">
<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>
</source>
Attach an Event to element
<source lang="html4strict">
<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>
</source>
Detach Event
<source lang="html4strict">
<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>
</source>
Fire an Event
<source lang="html4strict">
<html> <body> <button onmouseover="this.fireEvent("onclick")"
onclick="alert("Hello");">
Fire onclick event </button> </body> </html>
</source>
Release Capture
<source lang="html4strict">
<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>
X Coordinate: 0
Y Coordinate: 0
<button onclick="function1()">Set capture</button> </body> </html>
</source>
Set Capture
<source lang="html4strict">
<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>
X Coordinate: 0
Y Coordinate: 0
Click inside the box to disable mouse capture outside the box
<button onclick="function1()">Set capture</button> </body> </html>
</source>
