JavaScript学习(4)事件响应
1对象与事件
事件是指浏览器中发生的事,比如单击某个按钮,鼠标指针移动,或者是从服务家在某个页面等.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
<HEAD>
<TITLE> 事件演示 </TITLE>
<META NAME="Generator" CONTENT="EditPlus">
<META NAME="Author" CONTENT="">
<META NAME="Keywords" CONTENT="">
<META NAME="Description" CONTENT="">
</HEAD>
<BODY bgcolor = "yellow" onLoad = "alert('你好, 正在加载你的文档...');">
<form>
<input type = "button" value = "请单击,看看会发生什么" onClick = 'alert("你刚刚单击了按钮!");'>
</BODY>
</HTML>
2.定义事件处理
定义事件处理的具体方法是:首先定义一个函数,然后把该函数制定事件处理程序.事件处理程序被保存为document对象的属性.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
<HEAD>
<TITLE> 检测用户输入 </TITLE>
<META NAME="Generator" CONTENT="EditPlus">
<META NAME="Author" CONTENT="">
<META NAME="Keywords" CONTENT="">
<META NAME="Description" CONTENT="">
</HEAD>
<script>
function checklen(f)
{
if(f.username.value.length < 3)
{
alert("用户名太短(用户名不少于3个字符)!");
f.pwd.select();
return false;
}
return true;
}
</script>
<BODY>
<b>
<form name = "info" action = "mailto:[email protected]" method = "post" ><p>
<font size = "+1"><p>
请输入用户名:
<input type = "text" name = "username" size = "50"><p>
请输入密码:
<input type = "password" name = "pwd" size = "50"><p>
<input type = "submit" value = "提交" onclick = "return(checklen(this.form));">
<input type = "reset" value = "重输">
</form>
</BODY>
</HTML>
3.事件类型
3.1鼠标事件
click事件.当用户单击鼠标时,产生onClick事件.通常在下列基本对象中产生:buton(按钮),checkbox(复选框),radio(单选按钮),reset button(重置按钮),submit button(提交按钮).
dbClick事件.用户双击鼠标时触发.
mousedown事件.用户按任意一个鼠标键时触发.
mouseout事件.鼠标指针在某个元素上,且用户正要将其移除某个元素的边界时触发.
mouseover事件.鼠标指针移出某一个元素,并移到另一个元素上时触发.
mouseup事件.用户松开任意一个鼠标按键时触发.
mousemove事件.鼠标指针在某个元素上时持续发生
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
<HEAD>
<TITLE> 鼠标事件的应用 </TITLE>
<META NAME="Generator" CONTENT="EditPlus">
<META NAME="Author" CONTENT="">
<META NAME="Keywords" CONTENT="">
<META NAME="Description" CONTENT="">
</HEAD>
<script>
function handleEvent(oEvent)
{
var oTextbox = document.getElementById("txt1");
oTextbox.value += "/n" + oEvent.type;
}
</script>
<BODY>
<div style = "width:600px; height:50px;background:blue"
onmouseover = "handleEvent(event)"
onmouseout = "handleEvent(event)"
onmousedown = "handleEvent(event)"
onmouseup = "handleEvent(event)"
id = "div1">
</div>
<p><textarea id = "txt1" rows = "10" cols = "50"></textarea></p>
</BODY>
</HTML>
3.2鼠标事件属性
坐标属性
type属性
target属性
shiftKey属性
altKey属性
ctrlKey属性
button属性
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
<HEAD>
<TITLE> mouse </TITLE>
<META NAME="Generator" CONTENT="EditPlus">
<META NAME="Author" CONTENT="">
<META NAME="Keywords" CONTENT="">
<META NAME="Description" CONTENT="">
</HEAD>
<script>
function handleEvent(oEvent)
{
var oTextbox = document.getElementById("txt1");
oTextbox.value += "/n" + oEvent.type;
oTextbox.value += "/n" + "target is" + (" + oEvent.target||oEvent.srcElement +").id;
oTextbox.value += "/n at(" + oEvent.clientX +"," + oEvent.clientY + ") in the client";
oTextbox.value += "/n at(" + oEvent.screenX +"," + oEvent.screenY + ") in the client";
oTextbox.value += "/n botton down is " + oEvent.button;
}
</script>
<BODY>
<div style = "width:600px; height:50px; background:blue"
onmouseover = "handleEvent(event)"
onmouseout = "handleEvent(event)"
onmousedown = "handleEvent(event)"
onmouseup = "handleEvent(event)"
id = "div1">
</div>
<p><textarea id = "txt1" rows = "10" cols = "50"></textarea></p>
</BODY>
</HTML>
3.3鼠标事件执行顺序
mousedown
mouseup
click
mousedown
mouseup
click
dbclick
3.4键盘事件
keydown用户在键盘上按下某个按键时,则会触发该事件.用户一直按着不放,则会不断触发.
keyup在用户释放某个键盘按键时触发.
keypress在用户按下某个键盘键,并产生一个字符的时候触发;若一直按着不放,则会持续触发.
3.5键盘事件属性
keyCode属性
charCode属性
srcElement属性
shiftKey属性
altKey属性
ctrlKey属性
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
<HEAD>
<TITLE> 键盘事件属性 </TITLE>
<META NAME="Generator" CONTENT="EditPlus">
<META NAME="Author" CONTENT="">
<META NAME="Keywords" CONTENT="">
<META NAME="Description" CONTENT="">
</HEAD>
<script>
function handleEvent(oEvent)
{
var oTextbox = document.getElementById("txt1");
oTextbox.value += "/n" + oEvent.type;
oTextbox.value += "/n target is" + (oEvent.target||oEvent.srcElement).id;
oTextbox.value += "/n keycode is" + oEvent.keyCode;
oTextbox.value += "/n charcode is" + oEvent.charCode;
var arrKeys = [];
if(oEvent.shiftKey)
{
arrKeys.push("shift");
}
if(oEvent.altKey)
{
arrKeys.push("alt");
}
if(oEvent.ctrlKey)
{
arrKeys.push("ctrl");
}
oTextbox.value += "/n keys down are:" + arrKeys;
}
</script>
<BODY>
<div style = "width:600px; height:50px; background:blue"
onmouseover = "handleEvent(event)"
onmouseout = "handleEvent(event)"
onmousedown = "handleEvent(event)"
onmouseup = "handleEvent(evnet)"
id = "div1">
</div>
<p><textarea id = "txt1" rows = "10" cols = "50"></textarea></p>
</BODY>
</HTML>
3.6HTML事件
load和unload事件.页面装载完成后,则在window对象上触发load事件;unload事件则是在页面完成卸载之后触发.
abort事件.用户停止下载过程时触发.
error事件.JavaScript脚本程序出错时,在indow对象上触发.
change事件.文本框失去焦点时并且在它获取焦点后内容发生改变时触发;某个<select>元素的值发生改变时触发.
submit事件.单击重置按钮时,在表单上触发.
reset事件.单击重置按钮时,在表单上触发.
resize事件.窗口或者框架的大小发生改变时触发.
scroll事件.用户在任何滚动条的元素上卷动它时触发.
focus事件.任何元素或者窗口本身获取焦点时触发.
onchange事件.当利用text或texturea元素输入字符值改变时发生该事件,同时在select表格项中一个选项状态改变后也会引发该事件.
3.7IE的event属性
event.button:按下的鼠标键.对于鼠标左键,这个属性值为1;二对于鼠标右键,通常为2.
event.clientX:事件发生位置的x轴坐标.
event.clientY:事件发生位置的Y轴坐标.
event.altkey:该标志标识事件发生时是否按下了ctrl键.
event.shiftkey:标识事件发生时是否按下了shift键.
event.keyCode:所按键的键码(用Unicode表示).
evnet.srcElement:元素出现的对象.
4.综合应用
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
<HEAD>
<TITLE> onchange事件 </TITLE>
<META NAME="Generator" CONTENT="EditPlus">
<META NAME="Author" CONTENT="">
<META NAME="Keywords" CONTENT="">
<META NAME="Description" CONTENT="">
</HEAD>
<script>
function Usechange(s)
{
otext.value = s;
document.all.select1.options[0].selected = true;
}
</script>
<BODY>
<select name = select1
onchange = "Usechange(this.options[this.options.selectedIndex].value)">
<option value = "">请选择
<option value = "1">Item 1
<option value = "2">Item 2
<option value = "3">Item 3
</select>
<textarea id = otext></textarea>
</BODY>
</HTML>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
<HEAD>
<TITLE> mouseout事件 </TITLE>
<META NAME="Generator" CONTENT="EditPlus">
<META NAME="Author" CONTENT="">
<META NAME="Keywords" CONTENT="">
<META NAME="Description" CONTENT="">
</HEAD>
<script>
function result()
{
f.d.value = f.n.value * 2;
}
function square()
{
f.s.value = f.n.value * f.n.value;
}
function handleEvent()
{
result();
square();
}
</script>
<BODY>
<form name = "f">
请输入n<input type = "text" name = "n" onmouseout = 'handleEvent();'><p>
n的2倍<input type = "text" name = "d" ><p>
n的平方<input type = "text" name = "s" ><p>
</BODY>
</HTML>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
<HEAD>
<TITLE> 链接提示 </TITLE>
<META NAME="Generator" CONTENT="EditPlus">
<META NAME="Author" CONTENT="">
<META NAME="Keywords" CONTENT="">
<META NAME="Description" CONTENT="">
</HEAD>
<script>
</script>
<BODY>
<h1>链接提示</h1>
<p>请将鼠标指针移动到链接上,并留意状态栏的提示.</p>
<li>
<a href = "product.html" id = "product" onmousemove = "alert('感谢订购')">订购产品</a>
<li>
<a href = "email.html" id = "email" onmousemove = "alert('请发送电子邮件')">电子邮件</a>
<li>
<a href = "complaint.html" id = "complaint" onmousemove = "alert('感谢您提供意见')">投诉部</a>
<li>
<a href = "ad.html" id = "ad" onmousemove = "alert('我们的产品是经过ISO9002认证')">广告部</a>
</BODY>
</HTML>