ppt-事件例子
onChange事例:
<HTML><HEAD>
<SCRIPT LANGUAGE="JavaScript">
function checkNum(num) {
if (num == "") {
alert("请输入一个数字值");
return false;
}
if (isNaN (num)){
alert("请输入一个数字值");
return false;
}
else alert("谢谢！");
//onChange事件要把光标移到外面去(在文本框中)
}
</SCRIPT>
</HEAD>
<BODY bgColor = white>
<FORM>
请输入一个数字：
<INPUT type ="text" name ="text1" onChange="checkNum(this.form.text1.value)">
</FORM>
</BODY></HTML>
单选按钮事件示例:
<HTML><HEAD><TITLE>选项按钮对象的事件</TITLE>
<SCRIPT LANGUAGE="JavaScript">
function offButton(){
var the_box = window.document.form_1.radio_1;
if (the_box.checked == true){
window.document.form_1.radio_2.checked = false;//关灯时要把开灯的单选按钮不选中
document.bgColor='black'; alert("请把灯打开！"); }
}
function onButton()
{ var the_box = window.document.form_1.radio_2;
if (the_box.checked == true)
{ window.document.form_1.radio_1.checked = false;
document.bgColor='white'; alert("谢谢！"); }
}
</SCRIPT>
</HEAD><BODY BGCOLOR="#FFFFFF" TEXT="red">
<form name="form_1">
<input type="radio" name ="radio_1" onClick="offButton();">关灯
<input type="radio" name ="radio_2" onClick="onButton();" checked>开灯
</form>
</BODY></HTML>
复选框事件示例:
<HTML><HEAD><TITLE>复选框对象的事件</TITLE>
<SCRIPT LANGUAGE="JavaScript">
function switchLight()
{
var the_box = window.document.form_2.check_1;//从window到document到form一级一级来的
var the_switch = "";
if (the_box.checked == false)
{ alert("请把灯打开！"); document.bgColor='black'; }
else
{ alert("谢谢！"); document.bgColor='white'; }
}
</SCRIPT>
</HEAD>
<BODY BGCOLOR="#FFFFFF">
<form name="form_2">
<input type="checkbox" name ="check_1" onClick="switchLight();">电灯开关
</form>
</BODY>
</HTML>
命令按钮事件示例:
HTML>
<HEAD>
<TITLE>按钮对象的事件</TITLE>图10.3a：示例3的输出结果
<SCRIPT LANGUAGE="JavaScript">
function writeIt(value)
{
myfm.second_text.value=value;
}
</SCRIPT>
</HEAD>
<BODY BGCOLOR="#FFFFFF">
<Form name="myfm"><input type="text" name="first_text">
<INPUT TYPE="button" value="复制" onClick="writeIt(myfm.first_text.value);">
<input type="text" name="second_text">
</FORM>
</BODY>
</HTML>
组合框事件：
<HTML><HEAD><TITLE>组合框对象的事件</TITLE>
<SCRIPT LANGUAGE="JavaScript">
function show(txt)
{
alert("选中的是" + txt);
//show(the_form.choose_category.options[selectedIndex].text
}
</SCRIPT>
</HEAD>
<BODY BGCOLOR="#FFFFFF" TEXT="pink">
<form name="the_form">
<select name="choose_category"
onChange="show(the_form.choose_category.options[selectedIndex].text);">
<option selected>狗</option>
<option>鱼</option>
<option>鸟</option>
</select>
</form>
</BODY>
</HTML>
onClick事件：
<HTML><HEAD>
<SCRIPT LANGUAGE="JavaScript">
function compute(fm) {
if (confirm("确定吗?")) {
fm.result.value = (eval(fm.expr.value));//计算表达式的值，并将结果显示在另外一个文本框
} else {
aler("请重试");
}
}
</SCRIPT>
</HEAD>
<BODY>
<FORM>请输入表达式：
<input type="text" name="expr" /><br />
<input type="button" value="计算" onclick="compute(this.form)" /><br />
结果：
<input type="text" name="result" />
</FORM>
</BODY></HTML>
Onblur与Onfocus事件：
<HTML>
<BODY BGCOLOR="lavender">
<FORM>
<INPUT type = text name = text1
onblur="(document.bgColor='aqua')"
onfocus="(document.bgColor='dimgray')">
</FORM>
</BODY>
</HTML>
Onmousedown与Onmouseup事件：
<HTML>
<BODY BGCOLOR="lavender">
<FORM>
<INPUT type = button name =text1 value="改变颜色"
onmousedown="(document.bgColor='aqua')"
onmouseup="(document.bgColor='limegreen')"
</FORM>
</BODY>
</HTML>
onLord事件：
<HTML>
<HEAD>
<TITLE>您好</TITLE>
<SCRIPT LANGUAGE="JavaScript">
function hello()
{
alert("您好");
}
</SCRIPT>
</HEAD>
<BODY onLoad="hello()">
</BODY>
</HTML>
onMouseOver事件：
<html><head>
<script language="javascript">
var num =0;
function showLink(num) {
if (num == 1) {
//document.forms[0].elements[0].value表示文档中第一个form表单的第一个input元素的value值 ,这就是典型的DOM操作
document.forms[0].elements[0].value = '你选择了百度'
} //
if (num==2){
document.forms[0].elements[0].value = "您选择了163";
}
if (num==3){
document.forms[0].elements[0].value = "您选择了sina";
}
}
</script>
</head>
<body>
<form>
<input type=text size=60>
</form>
<a href="#" onMouseOver="showLink(1)">baidu</a><br>
<a href="#" onMouseOver="showLink(2)">163</a><br>
<a href="#" onMouseOver="showLink(3)">sina</a><br>
</body>
</html>
文本域事件：
<HTML>
<HEAD>
<TITLE>文本域对象的事件</TITLE>
<SCRIPT LANGUAGE="JavaScript">
function writeIt(value) {
alert(value);
}
</SCRIPT>
</HEAD>
<BODY BGCOLOR="#FFFFFF">
<Form name="myfm">
<input type="text" name="first_text"
onFocus="writeIt('焦点');" onBlur="writeIt('模糊');"
onChange="writeIt('修改');">
<TEXTAREA NAME="txt_area " ROWS="10" COLS="10"></TEXTAREA>
</FORM>
</BODY>
</HTML>