JavaScript 事件(event)是当用户与网页进行交互时发生的事情,例如单机某个链接或按钮、在文本框中输入文本、按下键盘上的某个按键、移动鼠标等等。当事件发生时,可以使用 JavaScript 中的事件处理程序(也可称为事件监听器)来检测并执行某些特定的程序。
本篇文章主要是介绍鼠标、键盘的点击事件。
一、onclick事件
该事件是点击鼠标时触发此事件。
<body >
<div id="demo"></div>
<button type="button" onclick="myBtn()">试一试</button>
</body>
<script type="text/javascript">
function myBtn(){
alert("hello world")
}
</script>
二、 ondblclick
该事件是双击鼠标时触发此事件,和onclick事件的区别是,该事件需要连续点击两下。
<body >
<div id="demo"></div>
<button type="button" ondblclick="myBtn()">试一试</button>
</body>
<script type="text/javascript">
function myBtn(){
alert("hello world")
}
</script>
三、 onmousedown
按下鼠标时触发此事件,感觉和onclick事件差不了多少,没啥太多的感觉
四、onmouseup
鼠标按下后又松开时触发此事件,如果不松开就会不会弹出对话框,用法和上述也是一样的
<body >
<div id="demo"></div>
<button type="button" onmouseup="myBtn()">试一试</button>
</body>
<script type="text/javascript">
function myBtn(){
alert("hello world")
}
</script>
五、onmouseover
当鼠标移动到某个元素上方时触发此事件,鼠标移出,对话框还在。
<body >
<div id="demo"></div>
<button type="button" onmouseover="myBtn()">试一试</button>
</body>
<script type="text/javascript">
function myBtn(){
alert("hello world")
}
</script>
六、onmousemove
移动鼠标时触发此事件,移出还在,和上述用法感觉差不多。
七、onmouseout
当鼠标离开某个元素范围时触发此事件,如果鼠标一直放在那里,就不触发对话框。
<body >
<div id="demo"></div>
<button type="button" onmouseout="myBtn()">试一试</button>
</body>
<script type="text/javascript">
function myBtn(){
alert("hello world")
}
</script>
八、onkeypress
当按下并松开键盘上的某个键时触发此事件,用法和上述差不多。
九、onkeydown
当按下键盘上的某个按键时触发此事件
十、onkeyup
当放开键盘上的某个按键时触发此事件,在次点击,对话框就会收回
<body >
<div id="demo"></div>
<button type="button" onkeyup="myBtn()">试一试</button>
</body>
<script type="text/javascript">
function myBtn(){
alert("hello world")
}
</script>