JavaScript中的点击事件

JavaScript中的点击事件JavaScript 中的基础知识 js 点击事件

大家好,欢迎来到IT知识分享网。

      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>

JavaScript中的点击事件

二、 ondblclick

   该事件是双击鼠标时触发此事件,和onclick事件的区别是,该事件需要连续点击两下。

 <body > <div id="demo"></div> <button type="button" ondblclick="myBtn()">试一试</button> </body> <script type="text/javascript"> function myBtn(){ alert("hello world") } </script>

JavaScript中的点击事件

三、  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>

免责声明:本站所有文章内容,图片,视频等均是来源于用户投稿和互联网及文摘转载整编而成,不代表本站观点,不承担相关法律责任。其著作权各归其原作者或其出版社所有。如发现本站有涉嫌抄袭侵权/违法违规的内容,侵犯到您的权益,请在线联系站长,一经查实,本站将立刻删除。 本文来自网络,若有侵权,请联系删除,如若转载,请注明出处:https://haidsoft.com/101240.html

(0)
上一篇 2026-02-25 10:26
下一篇 2026-02-25 11:34

相关推荐

发表回复

您的邮箱地址不会被公开。 必填项已用 * 标注

关注微信