JavaScript DHTML/Event/Hyper Link Event
Содержание
Handling onClick or Links
<HTML>
<HEAD>
<TITLE>Handling onClick for links</TITLE>
<SCRIPT LANGUAGE="JavaScript">
<!--
function confirmLink() {
alert("This is the wbex Home Page.")
return confirm("Are you sure you want to load this document?")
}
//-->
</SCRIPT>
</HEAD>
<BODY>
<H1>Handling onClick for links</H1>
<P><A HREF="http://www.wbex.ru" ONCLICK="return confirmLink()">
Asks you to confirm your selection of this link.</A></P>
</BODY>
</HTML>
Handling onMouseOut or Links
<HTML>
<HEAD>
<TITLE>Handling onMouseOut for links</TITLE>
<SCRIPT LANGUAGE="JavaScript">
<!--
function advertiseLink() {
alert("www.wbex.ru")
if(confirm("www.wbex.ru?")) {
window.location="http://www.wbex.ru"
}
}
//-->
</SCRIPT>
</HEAD>
<BODY>
<H1>Handling onMouseOut for links</H1>
<P><A HREF="somewhere" ONMOUSEOUT="advertiseLink()">Tells you why you
should connect to this link.</A></P>
</BODY>
</HTML>
Using Functions as Event Handlers
<HTML>
<HEAD>
<TITLE>Using functions as event handlers</TITLE>
<SCRIPT LANGUAGE="JavaScript">
<!--
function confirmLink() {
alert("www.wbex.ru")
if(confirm("www.wbex.ru?")) {
window.location="http://www.wbex.ru"
}
}
//-->
</SCRIPT>
</HEAD>
<BODY>
<H1>Using functions as event handlers</H1>
<P><A HREF="somewhere" onClick="return false" onMouseOver="confirmLink()">Confirms
whether you want to connect via this link.</A></P>
</BODY>
</HTML>
Using onClick and onDblClick Event Handlers
<HTML>
<HEAD>
<TITLE>onClick and onDblClick Event Handlers</TITLE>
<SCRIPT LANGUAGE="JavaScript">
var msg = "";
function showClick() {
msg = "The element has been clicked. ";
status = msg;
}
function showDblClick() {
msg = "The element has been double-clicked.";
status = msg;
return false;
}
</SCRIPT>
</HEAD>
<BODY>
<H1>onClick and onDblClick Event Handlers</H1>
<HR>
<A HREF="#" onClick="showClick();return false"
onDblClick="return showDblClick()">
A sample link.</A>
</BODY>
</HTML>
Using onMouseOver and onMouseOut Event Handlers
/*
JavaScript Bible, Fourth Edition
by Danny Goodman
John Wiley & Sons CopyRight 2001
*/
<HTML>
<HEAD>
<TITLE>onMouseOver and onMouseOut Event Handlers</TITLE>
<SCRIPT LANGUAGE="JavaScript">
function setStatus(msg) {
status = msg
return true
}
// destination of all link HREFs
function emulate() {
alert("Not going there in this demo.")
}
</SCRIPT>
</HEAD>
<BODY>
<H1>onMouseOver and onMouseOut Event Handlers
</H1>
<HR>
<H1>Pledge of Allegiance</H1>
<HR>
I pledge <A HREF="javascript:emulate()" onMouseOver="return setStatus("View
dictionary definition")" onMouseOut="return setStatus("")">allegiance</A> to the
<A HREF="javascript:emulate()" onMouseOver="return setStatus("Learn about the
U.S. flag (http://lcweb.loc.gov)")" onMouseOut="return setStatus("")">flag</A>
of the <A HREF="javascript:emulate()" onMouseOver="return setStatus("View info
about the U.S. government")" onMouseOut="return setStatus("")">United States of
America</A>, and to the Republic for which it stands, one nation <A
HREF="javascript:emulate()" onMouseOver="return setStatus("Read about the
history of this phrase in the Pledge")" onMouseOut="return setStatus("")">under
God</A>, indivisible, with liberty and justice for all.
</BODY>
</HTML>
Using the const Keyword
<HTML>
<HEAD>
<TITLE>const(ant)</TITLE>
<SCRIPT LANGUAGE="JavaScript">
const FREEZING_F = 32
var cities = ["A", "B", "C", "B", "D"];
var tempsF = [33, 12, 20, 40, 75];
function showData() {
var tableData = "";
for (var i = 0; i < cities.length; i++) {
tableData += "<TR><TD>" + cities[i] + "</TD><TD "
tableData += (tempsF[i] < FREEZING_F) ? "CLASS="cold"" : ""
tableData += ">" + tempsF[i] + "</TR>"
}
document.getElementById("display").innerHTML = tableData
}
</SCRIPT>
</HEAD>
<BODY onLoad="showData()">
<H1>The const keyword</H1>
<HR>
<TABLE ID="temps">
<TR><TH>City<TH>Temperature</TR>
<TBODY ID="display">
</TBODY>
</TABLE>
</BODY>
</HTML>
<HTML>
<HEAD>
<TITLE>Using the event Object</TITLE>
<SCRIPT><!--
function clickHandler(eventObject) {
alert(eventObject.screenX+","+ eventObject.screenY)
}
//--></SCRIPT>
</HEAD>
<BODY>
<H1>Using the event Object</H1>
<A HREF="javascript:void(0)" onClick="clickHandler(event)">Click this link.</A>
</BODY>
</HTML>