010_JS中常用的几个事件的学习
程序员文章站
2024-02-22 21:57:12
...
JS 常用事件
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script type="text/javascript">
function demo1(){
alert('单机事件完成')
}
function demo2(){
alert('双击事件完成')
}
function demo3(){
alert('鼠标放上来了')
}
function demo4(){
alert('鼠标被绿了所以离开')
}
function demo5(){
console.log("鼠标移动事件")
}
function demo6(){
alert("键盘弹起触发该事件")
}
function demo7(){
alert("键盘按下触发该事件")
}
function demo8(){
alert("获得焦点触发的事件")
}
function demo9(){
alert("失去焦点触发的事件")
}
function demo10(){
alert("改变事件触发")
}
function demo11(){
alert("页面加载完成事件")
}
</script>
</head>
<!--页面加载完成事件，当html页面从头加载到尾才触发该事件-->
<body onload="demo11()">
<!--单击事件-->
<!--单击事件：通过单击鼠标触发的事件-->
<input type="button" name="" id="" value="单击事件" onclick="demo1()" />
<!--双击事件：通过双击鼠标触发的事件-->
<input type="button" name="" id="" value="双击事件" ondblclick="demo2()" />
<!--鼠标事件-->
<!--鼠标放上触发的事件：-->
<div id="" style="width: 300px;height: 300px;background-color: red;" onmouseover="demo3()">
</div>
<!--鼠标离开触发的事件-->
<div id="" style="width: 300px;height: 300px;background-color: green;" onmouseout="demo4()">
</div>
<!--鼠标移动事件-->
<div id="" style="width: 200px;height: 200px;background-color: blue;" onmousemove="demo5()">
</div>
<!--键盘事件-->
<!--键盘弹起事件-->
<input type="text" name="" id="" value="" onkeyup="demo6()"/> <br /><br />
<!--键盘弹起事件-->
<input type="text" name="" id="" value="" onkeydown="demo7()"/>
<!--焦点事件-->
<!--获得焦点事件；就是把鼠标在文本框点一下显示可以输入-->
<input type="text" name="" id="" value="" onfocus="demo8()"/>
<!--失去焦点事件：比如注册账号的时候，当在文本框输入账号后，鼠标点到其他地方失去焦点，会提示账号是否合法-->
<input type="text" name="" id="" value="" onblur="demo9()"/>
<!--改变事件，改变事件是先获得焦点，然后改变内容，再失去焦点的事件-->
<input type="text" name="" id="" value="" onchange="demo10()" />
</body>
</html>
<!--通过触发事件，调用Js函数-->
上一篇： 简单谈谈MySQL的loose index scan
下一篇： 收藏一些常用vscode的快捷键