JavaScript 中常用事件

前言:

介绍了什么是事件以及原理,还有常用的事件及使用

**如果演示结果不好理解,可以复制代码到自己的电脑中运行,这样你们可以更好理解也可以研究出好玩的,研究出的话顺便发给我也玩玩

文章目录

    • 什么是事件
    • 原理
    • 鼠标事件

什么是事件

JavaScript中的事件是指发生在HTML元素上的事情。当在HTML页面中使用JavaScript时,JavaScript可以触发这些事件。这些事件可以是浏览器行为,也可以是用户行为,例如单击某个链接或按钮、在文本框中输入文本、按下键盘上的某个按键、移动鼠标等。

原理

当事件发生时,可以使用JavaScript中的事件处理程序(也可称为事件监听器)来检测并执行某些特定的程序。例如,当用户点击一个按钮时,可以执行一段JavaScript代码来响应该点击事件。

鼠标事件

鼠标事件指通过鼠标触发的事件。

属性名 描述
onclick 鼠标单击时触发此事件
ondblclick 鼠标双击时触发此事件
onmousedown 鼠标按下时触发此事件
onmouseup 鼠标弹起时触发的事件
onmousemove 鼠标移动时触发此事件
onmouseover 鼠标移动到某个设置了此事件的元素上时触发此事件
onmouseout 鼠标从某个设置了此事件的元素上离开时触发此事件
onscroll 当滚动元素的滚动条运行时
onmousewheel 当鼠标的滚轮运行时
  1. 鼠标单击事件
    鼠标点击指定元素就会调用特定的js代码。

    代码示例:

    <body>
    <input type="button" value="鼠标点击一下" onclick="f()">
    <script>
            function f() {
                console.log("鼠标单击了一下");
            }
    script>
    body>
    

    结果:
    JavaScript 中常用事件_第1张图片

  2. 鼠标双击事件
    鼠标双击指定的元素就会调用特定的js代码。

    代码示例:

    <body>
    <input type="button" value="鼠标双击一下" ondblclick="f()">
    <script>
        function f() {
            console.log("鼠标双击了一下");
        }
    script>
    body>
    

    结果:
    JavaScript 中常用事件_第2张图片

  3. 鼠标按下事件
    鼠标按下指定的元素就会调用特定的js代码。

    代码演示:

    <body>
    <input type="button" value="鼠标点击一下" onmousedown="f()">
    <script>
        function f() {
            console.log("鼠标按了一下");
        }
    script>
    body>
    

    结果:
    JavaScript 中常用事件_第3张图片

  4. 鼠标弹起事件
    鼠标按下指定元素并松开就会调用特定的js代码。

    代码示例:

    <body>
    <input type="button" value="鼠标点击一下" onmouseup="f()">
    <script>
       function f() {
           console.log("鼠标按下按钮又松开了");
       }
    script>
    body>
    

    结果:
    JavaScript 中常用事件_第4张图片

  5. 鼠标移动事件
    鼠标在指定元素上移动就会调用特定的js代码。

    代码演示:

    <body>
    <div style="width: 100px;height: 100px;background-color: red" onmousemove="f()">
    div>
    <script>
        function f() {
            console.log("鼠标在指定元素中移动了");
        }
    script>
    body>
    

    结果:
    JavaScript 中常用事件_第5张图片

  6. 鼠标移动到指定元素事件
    鼠标移动到指定元素上就会调用特定的js代码,跟上面那个不一样,这个进入了只会调用一次代码,只有重新进入才会再次调用。

    代码演示:

    <body>
    <div style="width: 100px;height: 100px;background-color: red" onmouseover="f()">
    div>
    <script>
        function f() {
            console.log("鼠标进入了DIV");
        }
    script>
    body>
    

    结果:
    JavaScript 中常用事件_第6张图片

  7. 鼠标从指定元素上移出事件
    跟上面那个一样,有进入就有移出。

代码演示:

<body>
<div style="width: 100px;height: 100px;background-color: red" onmouseout="f()">
div>
<script>
    function f() {
        console.log("鼠标移出了DIV");
    }
script>
body>

结果:
JavaScript 中常用事件_第7张图片

  1. 滚动条事件
    指定元素的滚动条被移动就会调用特定的js代码。

结果:
JavaScript 中常用事件_第8张图片
9. 鼠标滚轮事件

你可能感兴趣的:(javascript,开发语言,ecmascript)