<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>js事件机制</title>
<!--
事件机制:(事件的监听机制)当某类事务的发生时会引起另一类事务的发生
单双击事件
鼠标事件
键盘事件
焦点事件
需要给合适的标签添加合适的事件
-->
<script type="text/javascript">
function testOnClick(){
alert("单机事件")
}
function testDblClick(){
alert("双击事件");
}
/*function testOnmouseMove(){
alert("鼠标移动");
}
function testOnmouseDown(){
alert("鼠标下移");
}*/
function testOnkeyUp(){
alert("键盘弹起");
}
function testOnkeyDown(){
alert("键盘按下");
}
function testOnfoucs(){
alert("获得焦点");
}
function testOnblur(){
alert("失去焦点");
}
function onChange(){
alert("测试改变");
}
</script>
<style type="text/css">
#showdiv{
border:solid 1px;
width: 300px;
height: 200px;
}
#div01{
border:solid 1px;
width: 300px;
height: 200px;
}
</style>
</head>
<body>
<input type="button" name="" value="单击事件" οnclick="testOnClick();" />
<input type="button" name="" value="双击事件" οndblclick="testDblClick();" />
<div id=showdiv οnmοusemοve="testOnmouseMove();">
鼠标移动
</div>
<br/>
<div id=div01 οnmοuseοut="testOnmouseDown();">
鼠标移出
</div>
键盘弹起:<input type="text" name="" value="" οnkeyup="testOnkeyUp();" />
键盘按下:<input type="text" name="" value="" οnkeydοwn="testOnkeyDown();" />
<br />
测试获得焦点<input type="text" name="" οnfοcus="testOnfoucs();" />
测试失去焦点<input type="text" name="" οnblur="testOnblur();"/>
<br />
American<select name="" οnchange="onChange();">
<option value="">北京</option>
<option value="">上海</option>
<option value="">广州</option>
</select>
<br /><br /><br /><br />
</body>
</html>
此外我们还需要注意,超链接标签的调用和事件的阻断机制
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>超链接标签调用函数*事件的阻断机制</title>
<!--
通过A标签去调用函数格式是确定的。
-->
<script type="text/javascript">
function test(){
alert("我被调用了");
//return true;//阻断失败
retrun false;//阻断成功
//阻断标签自带的功能
}
</script>
</head>
<body>
<h3>超链接标签调用函数*事件的阻断机制</h3>
<a href="http://www.baidu.com" οnclick=" return test();">百度</a>
<br /><br />
<a href="javascript:test()">测试调用函数</a>
</body>
</html>