JavaScript DHTML/Event/Hyper Link Event

Материал из Web эксперт
Перейти к: навигация, поиск

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>



Using the Event Object with Navigator and Internet Explorer

<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>
Источник — «http://wbex.ru/index.php?title=JavaScript_DHTML/Event/Hyper_Link_Event&oldid=2127»