JavaScript中的事件
1.单、双击事件
单击事件：οnclick="";
双击事件：οndblclick="";
单击事件： 在script中写⼀个对话框代码进⾏测试
script部分的代码如下：
<script type="text/javascript">
function testOnclick(){
alert("It is a nice day!");
}
</script>
body部分设置⼀个按钮，当点击按钮时会弹出对话框
<body onload="testOnload()">
<input type="button" value="单击事件" onclick="testOnclick()"/>
</body>
效果如下：
双击事件：在script中写⼀个对话框代码进⾏测试
script部分的代码如下：
function tetsOndblClick(){
alert("How nice a day!");
}
body部分设置⼀个按钮，当点击按钮时会弹出对话框
<input type="button" value="双击事件" ondblclick="tetsOndblClick()"/>
效果如下：
2.⿏标事件
οnmοusemοve=""—⿏标在监听区域移动就会触发
οnmοuseοut=""—⿏标离开侦听区域时触发
οnmοuseοver=""–⿏标从外⾯进⼊侦听区域会触发
script部分代码：
function testMouse(){
alert("test!");
}
<div class="box1" onmousemove="testMouse()">
</div>
在style⾥⾯设置这个div的宽⾼：
<style type="text/css">
.box1{
width: 100px;
height: 100px;
background: skyblue;
}
</style>
3.键盘事件
键盘的按下：
οnkeydοwn=""—所有键盘按下操作都会触发事件
οnkeypress=""—shift键、backpace键按下时不能触发
键盘的释放：
οnkeyup=""—按下键盘释放时触发事件
script部分的代码：
function onkeyUp(){
alert("Thank you!");
}
function onkeyDown(){
alert("You are so smart!");
}
function onkeyPress(){
alert("Where are you go?")
}
body部分的代码：
<input type="text" value="测试键盘的松开" onkeyup="onkeyUp()"/>
<input type="text" value="测试键盘的按下" onkeydown="onkeyDown()"/>    <input type="text" value="测试键盘的按下" onkeypress="onkeyPress()"/>
4.焦点事件
获取焦点：οnfοcus=""
失去焦点：οnblur=""
script部分的代码：
function testOnfocus(){
alert("I miss you so!");
}
function testOnBlur(){
alert("We are just liers!");
}
body部分的代码：
<input type="text" value="测试获取焦点" onfocus="testOnfocus()"/>
<input type="text" value="测试失去焦点" onblur="testOnBlur()"/>
5.加载事件:⽹页正在执⾏的时候，是将html⽂件加载到浏览器中
页⾯加载完成来触发事件：οnlοad=""
function testOnload(){
alert("页⾯加载完成")
}
body部分的代码：
<body onload="testOnload()">
整体代码：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1">  <title>事件</title>
<!--1.单、双击事件
单击事件：onclick="";
双击事件：ondblclick="";
2.⿏标事件
onmousemove=""---⿏标在监听区域移动就会触发
onmouseout=""---⿏标离开侦听区域时触发
onmouseover=""--⿏标从外⾯进⼊侦听区域会触发
3.键盘事件
键盘的按下：
onkeydown=""---所有键盘按下操作都会触发事件
onkeypress=""---shift键、backpace键按下时不能触发
键盘的释放：
onkeyup=""---按下键盘释放时触发事件
4.焦点事件
获取焦点：onfocus=""
失去焦点：onblur=""
5.加载事件:⽹页正在执⾏的时候，是将html⽂件加载到浏览器中
页⾯加载完成来触发事件：onload=""
-->
<style type="text/css">
.box1{
width: 100px;
height: 100px;
background: skyblue;
}
</style>
<script type="text/javascript">
function testOnclick(){
alert("It is a nice day!");
}
function tetsOndblClick(){
alert("How nice a day!");
}
function testMouse(){
alert("test!");
}
function onkeyUp(){
alert("Thank you!");
}
function onkeyDown(){
alert("You are so smart!");
}
function onkeyPress(){
function onkeyPress(){
alert("Where are you go?")
}
function testOnfocus(){
alert("I miss you so!");
}
function testOnBlur(){
blur事件
alert("We are just liers!");
}
//    function testOnload(){
//    alert("页⾯加载完成")
//    }
</script>
</head>
<body onload="testOnload()">
<input type="button" value="单击事件" onclick="testOnclick()"/>
<input type="button" value="双击事件" ondblclick="tetsOndblClick()"/>    <hr />
<!-- <div class="box1" onmousemove="testMouse()">
</div> -->
<input type="text" value="测试键盘的松开" onkeyup="onkeyUp()"/>
<input type="text" value="测试键盘的按下" onkeydown="onkeyDown()"/>    <input type="text" value="测试键盘的按下" onkeypress="onkeyPress()"/>    <hr />
<!-- <input type="text" value="测试获取焦点" onfocus="testOnfocus()"/>    <input type="text" value="测试失去焦点" onblur="testOnBlur()"/>
-->
<hr />
</body>
</html>

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。