js基本事件
2017-06-12 本文已影响0人
Raofree
单击事件：
onclick:单击事件
ondbclick:双击事件
鼠标事件：
onmousemove:鼠标移动事件
onmouseout:鼠标移出事件
onmouseover:鼠标悬停事件
键盘事件：
onkeyup:键盘弹起事件
onkeydown:键盘下压事件
焦点事件：
onfocus():获取焦点事件
onblur():失去焦点事件
页面加载事件：
onload():页面加载事件。主要用来进行页面资源加载，body标签上使用
注意：
onchange()事件的前置条件是失去焦点事件，因此更适合添加于下拉框。
这一事例说明：在js中需要给合适的标签添加合适的事件
a标签的另外功能---调用函数：
<a href="javascript:函数名()">对外提供的调用方式</a>
事件的阻断机制：
当a标签中同时存在资源链接与事件时，先执行监听事件，后执行资源跳转。
给事件添加返回值false可阻断资源跳转。
代码示例：
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
#mouse1{
border:solid;1px
background-color: palegreen;
width: 300px;
height: 300px;
}
#mouse2{
border:solid;1px
background-color: paleturquoise;
width: 300px;
height: 300px;
}
div{
margin: 20px;
}
input[type=button]{
margin-left: 45px;
}
</style>
<script type="text/javascript">
function oneclick(){
alert("单机事件");
}
function dbclick(){
alert("双击事件");
}
function onMouseMove(){
alert("鼠标移动事件");
}
function onMouseOut(){
alert("鼠标移出事件");
}
function onMouseOver(){
alert("鼠标悬停事件");
}
function onKeyUp(){
alert("键盘弹起事件");
}
function onKeyDown(){
alert("键盘下压事件");
}
function onFocus(){
alert("获取焦点事件");
}
function onBlur(){
alert("失去焦点事件");
}
function onLoad(){
alert("页面已加载完成");
}
function onChange(){
alert("在失去焦点后监听到内容已被改变");
}
function otherTrue(){
alert("a标签实现函数调用&事件的阻断机制---返回True");
return true;
}
function otherFalse(){
alert("a标签实现的函数调用&事件的阻断机制---返回False")
return false;//添加返回值false，阻断下一步资源跳转
}
</script>
</head>
<body onload="onLoad()">
<div id="click">
<input type="button" name="" id="" value="单击事件" onclick="oneclick()"/>
<input type="button" name="" id="" value="双击事件" onclick="dbclick()"/>
</div>
<div id="mouse1" onmousemove="onMouseMove()">
鼠标移动事件
</div>
<div id="mouse2" onmouseout="onMouseOut()" onmouseover="onMouseOver()">
鼠标移出事件&鼠标悬停事件
</div>
<div id="key">
键盘弹起事件：<input type="text" name="" id="" value="" onkeyup="onKeyUp()"/>
键盘下压事件：<input type="text" name="" id="" value="" onkeydown="onKeyDown()"/>
</div>
<div id="focus">
焦点事件：<input type="text" name="" id="" value="" onfocus="onFocus()" onblur="onBlur()"/>
</div>
<div id="onchange">
onChange事件：
<select name="" id="" onchange="onChange()">
<option value="">---请选择---</option>
<option value="">北京</option>
<option value="">天津</option>
</select>
</div>
<div id="">
<a href="javascript:oneclick()">a标签的另一功能：函数调用</a>
</div>
<div id="">
<a href="http://www.baidu.com" onclick="return otherTrue()">事件阻断机制：先进行单击事件，后进行资源跳转</a>
</div>
<div id="">
<a href="http://www.baidu.com" onclick="return otherFalse()">事件阻断机制：先进行单击事件，后阻断资源跳转</a>
</div>
</body>
</html>
