Admin: 1 версия

2010-05-26T08:24:33Z

1 версия

в 18:52, 25 мая 2010

2010-05-25T18:52:56Z

Новая страница

== Add event handler listener to document==



<source lang="javascript">
<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>

== Add event listener to elements in a form==



<source lang="javascript">
<html>
<head>
<title></title>
<script type="text/javascript">
function writeX(evnt) {
document.write("Capturing" + evnt.target + " " + evnt.currentTarget);
return true;
}
function setup(evnt) {
document.addEventListener("click",writeX,true);
document.forms[0].addEventListener("click",writeX,true);
document.forms[0].elements[0].addEventListener("click",writeX,true);
}
setup();
</script>
<body>
<form>
<input type="submit" value="Submit" /><br>
</form>
</body>
</html></source>

== Add event listener to form==



<source lang="javascript">
<html>
<head>
<title></title>
<script type="text/javascript">
function writeX(evnt) {
document.write("Capturing" + evnt.target + " " + evnt.currentTarget);
return true;
}
function setup(evnt) {
document.addEventListener("click",writeX,true);
document.forms[0].addEventListener("click",writeX,true);
document.forms[0].elements[0].addEventListener("click",writeX,true);
}
setup();
</script>
<body>
<form>
<input type="submit" value="Submit" /><br>
</form>
</body>
</html></source>

== Bubble up events (Firefox)==



<source lang="javascript">
<html>
<head>
<title></title>
<script type="text/javascript">
function writeX(evnt) {
document.write("Capturing" + evnt.target + " " + evnt.currentTarget);
return true;
}
function setup(evnt) {
document.addEventListener("click",writeX,false);
document.forms[0].addEventListener("click",writeX,false);
document.forms[0].elements[0].addEventListener("click",writeX,false);
}
setup();
</script>
<body>
<form>
<input type="submit" value="Submit" /><br>
</form>
</body>
</html></source>

== Capturing events==



<source lang="javascript">
<html>
<head>
<title></title>
<script type="text/javascript">
function writeX(evnt) {
document.write("Capturing" + evnt.target + " " + evnt.currentTarget);
return true;
}
function setup(evnt) {
document.addEventListener("click",writeX,true);
document.forms[0].addEventListener("click",writeX,true);
document.forms[0].elements[0].addEventListener("click",writeX,true);
}
setup();
</script>
<body>
<form>
<input type="submit" value="Submit" /><br>
</form>
</body>
</html></source>

== Event Bubbling (Firefox)==



<source lang="javascript">
<html>
<head>
<title>Event Bubbling</title>
<script type="text/javascript">
function mouseDown(nsEvent) {
var theEvent = nsEvent ? nsEvent : window.event;
var locString = "X = " + theEvent.screenX + " Y = " + theEvent.screenY;
var theSrc = theEvent.target ? theEvent.target : theEvent.srcElement;
document.write(locString + " " + theSrc);
}
document.onmousedown=function (evnt) {
var theEvnt = evnt? evnt : window.event;
document.write(theEvnt.type);
}

window.onload=function () {
document.getElementById("first").onmousedown=mouseDown;
document.getElementById("second").onmousedown=function () {
document.write("Second event handler");
}
}
</script>
</head>
<body>
<div id="first" style="padding: 20px; background-color: #ffff0; width: 150px">
<div id="second" style="background-color: #ff0000; width: 100px; height: 100px"></div>
</div>
</body>
</html></source>

== Event Handlers and this==



<source lang="javascript">
<html>
<head>
<title></title>
<script type="text/javascript">
window.onload=setObjects;
function setObjects() {
document.personData.firstName.onblur=testValue;
}
function testValue() {
document.write(this.value);
}
</script>
</head>
<body>
<form name="personData">
First Name: <input type="text" name="firstName" />
</form>
</body>
</html></source>

== Inline DOM Event Registration==



<source lang="javascript">
<html>
<head>
<title>Inline DOM Event Registration</title>
<script type="text/javascript">
function helloMsg() {
var helloString = "hello there";
document.write(helloString);
}
function helloTwice() {
var helloString = "hi again";
document.write(helloString);
}
window.onload=helloTwice;
</script>
</head>
<body onload="helloMsg();">
</body>
</html></source>

== Preventing Bubble and Capture==



<source lang="javascript">
<html>
<head>
<title>W3C DOM Event Propagation</title>
<script type="text/javascript">
function init() {
document.body.onclick = docBodEvent;
document.addEventListener("click", docEvent, true);
document.forms[0].addEventListener("click", formCaptureEvent, true);
document.forms[0].addEventListener("click", formBubbleEvent, false);
}
function docBodEvent(evt) {
if (evt.target.type == "button") {
alert("BODY");
}
}
function formCaptureEvent(evt) {
if (evt.target.type == "button") {
alert("This alert triggered by FORM only on CAPTURE.");
if (document.forms[0].stopAllProp.checked) {
evt.stopPropagation();
}
}
}
function formBubbleEvent(evt) {
if (evt.target.type == "button") {
alert("This alert triggered by FORM only on BUBBLE.");
if (document.forms[0].stopDuringBubble.checked) {
evt.preventBubble();
}
}
}
</script>
</head>
<body onload="init()">
<form>
<input type="checkbox" name="stopAllProp" />Stop all propagation at FORM
<input type="checkbox" name="stopDuringBubble" />Prevent bubbling past FORM
<input type="button" value="Button "main1"" name="main1" onclick="alert("button")" />
</form>
</body>
</html></source>

== Register mouse down event(IE)==



<source lang="javascript">
<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></source>

← Предыдущая	Версия 08:24, 26 мая 2010
(нет различий)

JavaScript Tutorial/Event/Event Handler - История изменений

Admin: 1 версия

в 18:52, 25 мая 2010