JavaScript中的点击事件

JavaScript中的基础知识

卡多莫西

32626人浏览 · 2022-10-24 12:28:20

卡多莫西 · 2022-10-24 12:28:20 发布

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>

华为云开发者联盟

为开发者提供学习成长、分享交流、生态实践、资源工具等服务，帮助开发者快速成长。

更多推荐