в 10:00, 26 мая 2010

2010-05-26T10:00:30Z

Admin: 1 версия

2010-05-26T07:20:41Z

1 версия

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

==Add event handler to form==



<source lang="html4strict">

<html>
<head>
<title>W3C DOM Event Propagation</title>
<script type="text/javascript">
function init() {
document.forms[0].addEventListener("click", formBubbleEvent, false);
}
function formBubbleEvent(evt) {
alert("FORM only on BUBBLE.");
}
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>

</source>

==addEventListener or attachEvent==



<source lang="html4strict">

<html>
<head>
<title>Options</title>
<script type="text/javascript">
function openwin(e) {
if (typeof window.open != "undefined") {
var opened = window.open("http://www.google.ru","","width=240,height=480");
if (typeof e.preventDefault != "undefined") {
e.preventDefault();
e.stopPropagation();
}
e.cancelBubble = true;
return false;
} else {
return true;
}
}
</script>
</head>
<body>
<a href="#" id="my">Go?</a>
<script type = "text/javascript">
var mslink = document.getElementById("my");
if (window.addEventListener) {
mslink.addEventListener("click",openwin,false);
} else {
mslink.attachEvent("onclick",openwin);
}
</script>
</body>
</html>

</source>

==Add event listener to anchor link==



<source lang="html4strict">

<html>
<head>
<title>Onclick</title>
<script type="text/javascript">
function handleclick() {
document.write("Clicked");
return false;
}
</script>
</head>
<body>
<p><a id="link1" href="#">Click Here</a></p>
<script type = "text/javascript" >
var link1 = document.getElementById("link1");
if (typeof window.addEventListener != "undefined") {
link1.addEventListener("click",handleclick,false);
} else {
link1.attachEvent("onclick",handleclick);
}
</script>
</body>
</html>

</source>

==An Example of Changing Event Handlers==



<source lang="html4strict">

<html>
<head>
<script language="JavaScript"> var choice = "A"
function optionA() {
alert("optionA" );
}

function optionB() {
alert("optionB" );
}

</script>
</head>
<body>

<form name="form1">
<input type="button" name="button1" onClick="optionA()">
</form>
<script language="JavaScript">
if (choice != "A") {
document.form1.button1.onclick=optionB
}
</script>
</body>
</html>

</source>

==Bubble up events (Firefox)==



<source lang="html4strict">

<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>

==Calling a Function from an Event Handler==



<source lang="html4strict">

<html>
<head>
<script type="text/javascript">
function showMsg(msg) {
document.write("The button sent: " + msg);
}
</script>
</head>
<body>
<form>
<input type="button" value="Click Me"
onclick="showMsg("The button has been clicked!")">
</form>
</body>
</html>

</source>

==Capturing events==



<source lang="html4strict">

<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>

==Emulating Events==



<source lang="html4strict">

<HTML>
<HEAD>
<TITLE>Simulating Events</TITLE>
<SCRIPT></SCRIPT>
</HEAD>
<BODY>
<FORM NAME="test">
<INPUT TYPE="BUTTON" NAME="button1" VALUE="Button 1"
ONCLICK="button1Clicked()">
<INPUT TYPE="BUTTON" NAME="button2" VALUE="Button 2"
ONCLICK="button2Clicked()">
</FORM>
</BODY>
</HTML>

</source>

==Event Bubbling Demonstration==



<source lang="html4strict">

<html onclick="alert("Event is now at the HTML element.")">
<head>
<title>Event Bubbles</title>
<script type="text/javascript">
function init() {
window.onclick = winEvent
document.onclick = docEvent;
document.body.onclick = docBodEvent;
}
function winEvent() {
alert("window object level.");
}
function docEvent() {
alert("document object level.");
}
function docBodEvent() {
alert("BODY element.");
}
</script>
</head>
<body onload="init()">
<form onclick="alert("FORM")">
<input type="button" value="Button "main1"" name="main1" onclick="alert("Button: " + this.name)" />
</form>
</body>
</html>

</source>

==Event Bubbling (Firefox)==



<source lang="html4strict">

<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 filer: number Only, upper case==



<source lang="html4strict">



function numberOnly(evt) {
evt = (evt) ? evt : ((window.event) ? event : null);
if (evt) {
var elem = (evt.target) ? evt.target : ((evt.srcElement) ? evt.srcElement : null);
if (elem) {
var charCode = (evt.charCode) ? evt.charCode :
((evt.which) ? evt.which : evt.keyCode);
if ((charCode < 32 ) ||
(charCode > 44 && charCode < 47) ||
(charCode > 47 && charCode < 58)) {
return true;
} else {
return false;
}
}
}
}
----------
function upperOnly() {
var charCode = event.keyCode;
if (charCode > 96 && charCode < 123) {
event.keyCode = charCode - 32;
}
}

</source>

==Event Handlers and this==



<source lang="html4strict">

<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>

==Event type occured==



<source lang="html4strict">

<html>
<head>
<script type="text/javascript">
function whichType(event){
alert(event.type)
}
</script>
</head>
<body onmousedown="whichType(event)">
<p>Click on the document. </p>
</body>
</html>

</source>

==Get Positioned Event Coordinate==



<source lang="html4strict">



function getPositionedEventCoords(evt) {
var elem = (evt.target) ? evt.target : evt.srcElement;
var coords = {left:0, top:0};
if (evt.layerX) {
var borders = {left:parseInt(getElementStyle("progressBar",
"borderLeftWidth", "border-left-width")),
top:parseInt(getElementStyle("progressBar",
"borderTopWidth", "border-top-width"))};
coords.left = evt.layerX - borders.left;
coords.top = evt.layerY - borders.top;
} else if (evt.offsetX) {
coords.left = evt.offsetX;
coords.top = evt.offsetY;
}
evt.cancelBubble = true;
return coords;
}

</source>

==Inline DOM Event Registration==



<source lang="html4strict">

<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>

==JavaScript Event Handlers==



<source lang="html4strict">

<html>
<head>
<script language="JavaScript">

</script>
</head>
<body>
<a href="http://www.wbex.ru"
name="linker"
onMouseOver="return updateStatusBar()"
onMouseOut="return updateStatusBarOut()">www.wbex.ru</a>
</p>
<form method="POST">
<input type=button name="ViewHat" value="View Hat" onClick=displayHat()></p>
</form>

<hr>
<form action="JavaScript:alert("order")"
method="POST"
name="MainForm"
onSubmit="return confirmOrder()">
<h2>Customer Information</h2>
<pre> First Name:
<input type=text size=20 maxlength=20 name="FirstName" onFocus="selectContents(this)">
Last Name:
<input type=text size=20 maxlength=20 name="LastName" onFocus="selectContents(this)">
Title:
<input type=text size=30 maxlength=30 name="Title" onFocus="selectContents(this)">
Company:
<input type=text size=30 maxlength=30 name="Company" onFocus="selectContents(this)">
Street Address:
<input type=text size=30 maxlength=30 name="StreetAddr" onFocus="selectContents(this)">
City:
<input type=text size=30 maxlength=30 name="City" onFocus="selectContents(this)">State:
<input type=text size=3 maxlength=2 name="State" onFocus="selectContents(this)" onChange="convertToUppercase(this)">
Zip Code:
<input type=text size=30 maxlength=10 name="ZipCode" onFocus="selectContents(this)">
Telephone:
<input type=text size=12 maxlength=12 name="Phone" onFocus="selectContents(this)">
FAX:
<input type=text size=12 maxlength=12 name="FAX" onFocus="selectContents(this)">
Email:
<input size=30 maxlength=50 name="Email" onFocus="selectContents(this)">
URL:
<input type=text size=30 maxlength=100 name="URL" onFocus="selectContents(this)"></pre>
<hr>

<blockquote>
<p><textarea name="worthyBox" rows=3 cols=49 onFocus="selectContents(this)">
</textarea></blockquote></p>

<p><input type=submit value="Order" onClick="confirmOrder("Submit object")">
<input type=reset value="Clear Form" onClick="alert("Clearing!")"></p>
</form>

<a href="JavaScript:displayHat()"><img src="http://www.wbex.ru/style/logo.png" align=bottom border=0 width=50 height=50>
</a>

</body>
</html>

</source>

==Preventing Bubble and Capture==



<source lang="html4strict">

<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>

==Setting Event Handlers from within JavaScript==



<source lang="html4strict">

<HTML>
<HEAD>
<TITLE>Setting event handlers from within JavaScript</TITLE>
<SCRIPT LANGUAGE="JavaScript"></SCRIPT>
</HEAD>
<BODY>
<FORM NAME="test">
<INPUT TYPE="BUTTON" NAME="clickMe" VALUE="Click Me!">
<P><INPUT TYPE="TEXT" NAME="result" SIZE="20"></P>
</FORM>
<SCRIPT LANGUAGE="JavaScript"></SCRIPT>
</BODY>
</HTML>

</source>

==W3C Event Capture and Bubble==



<source lang="html4strict">

<html>
<head>
<title>W3C DOM Event Propagation</title>
<script type="text/javascript">
function init() {
window.onclick = winEvent;
document.onclick = docEvent;
document.body.onclick = docBodEvent;
document.addEventListener("click", docEvent, true);
document.forms[0].addEventListener("click", formCaptureEvent, true);
document.forms[0].addEventListener("click", formBubbleEvent, false);
}
function winEvent(evt) {
alert("window object level (" + getPhase(evt) + ").");
}
function docEvent(evt) {
alert("Document level (" + getPhase(evt) + ").");
}
function docBodEvent(evt) {
alert("BODY level (" + getPhase(evt) + ").");
}
function formCaptureEvent(evt) {
alert("FORM only on CAPTURE.");
}
function formBubbleEvent(evt) {
alert("FORM only on BUBBLE.");
}
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>

</source>

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

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

в 10:00, 26 мая 2010

Admin: 1 версия