JavaScript常用事件详解

最新推荐文章于 2024-07-22 15:13:59 发布

早上吃啥中午吃啥晚上吃啥

最新推荐文章于 2024-07-22 15:13:59 发布

阅读量249

点赞数 1

文章标签： javascript 开发语言前端 visual studio code

本文链接：https://blog.csdn.net/qq_50587186/article/details/127859906

版权

当点击网页上的一个按钮进行退出操作时，需要给按钮添加一个点击事件，当鼠标移动到某个元素时给该元素添加背景颜色时，也需要给该元素绑定一个相应事件。。。在网页的编写时，时常需要用到各种事件，使页面更灵活，增加用户体验感，那么JS中具体有什么常用事件呢？？？

JS中的事件大致包括以下几种常用事件：

鼠标事件:
onmouseover 鼠标移到某元素之上
onmouseout 鼠标从某元素移开

onclick 单击事件

键盘事件:

onkeydown 某个键盘按键被按下
onkeyup 某个键盘按键被松开

表单事件:

onsubmit 确认按钮被点击
onreset 重置按钮被点击

其他事件:

onblur 元素失去焦点
onfocus 元素获得焦点

onchange 域的内容被改变

加载事件:

onload 一张页面或一幅图像完成加载。

以下是具体实例：

<body>
    <!-- onclick 点击事件  onmouseover 鼠标放入指定区域-->
    <div class="toget one" onclick="demo01()" onmouseover="demo02()">
        这是一个盒子
    </div>
    <!-- onmouseover 鼠标放入指定区域  onmouseout 鼠标移出指定区域  -->
    <div class="toget two" onmouseover="demo02()" onmouseout="demo03()">
        这是一个惊喜盒子
    </div>
</body>
<script>
    function demo01(){
        for(var i = 0;i<=10;i++){
            console.log(i);
        }
    }
    function demo02(){
        console.log("恭喜你打开了，但没中奖");
    }
    function demo03(){
        console.log("快回来~~~");
    }

当鼠标点击第一个盒子，会输出0-10的数字

当鼠标移动到第一个盒子上，会输出“恭喜你打开了，但没中奖”

当鼠标从第二个盒子上移走，会输出“快回来~~~”

<body>
    <div>
        <!-- onkeyup使用时，要传一个event，键盘按下松开时触发 -->
        <form action="https://www.vip.com/">
            <input type="search" name="search" onkeyup="demo04(event)">
        </form>
        <!-- onkeydown使用时，要传一个event，键盘按下时触发 -->
    </div>
</body>
<script>
    // 输入空格时->跳页面   空格的keyCode是32
    function demo04(event){
        // console.log(event.keyCode);
        // console.log(window.location.href);
        if(event.keyCode == 32){
            window.location.href = "https://www.vip.com/";
        }
    }
</script>

在input输入框中，空格键松开时会跳转到https://www.vip.com/

<body>
    <!-- onchange 域的内容被改变时触发 (改变内容后，需要再点击区域外，才可以生效)-->
    <input type="text" onchange="demo01()">
    <br>

    <!-- onblur 光标离开时触发-->
    <input type="text" onblur="demo02()">
    <br>

    <!-- onblur 光标聚焦时触发-->
    <input type="text" onfocus="demo03()">
    <br>
</body>
<script>
    function demo01(){
        console.log("触发了onchange事件 内容改变");
    }
    function demo02(){
        console.log("触发了onblur事件 光标离开");
    }
    function demo03(){
        console.log("触发了onfocus事件 光标聚焦");
    }
</script>

当改变第一个输入框的内容，会输出“触发了onchange事件内容改变”

当鼠标点击第二个输入框，再点击第二个输入框外（使其失去焦点），会输出“触发了onblur事件光标离开”

当鼠标点击第三个输入框（使其获得焦点），会输出“触发了onfocus事件光标聚焦”

onload用于在页面和所有图像等资源加载后立即发生

<body>
    <input type="text">
</body>
<script>
    window.onload = function(){
        alert("已加载")
    };
</script>

加载页面时会出现弹框显示“已加载”：

早上吃啥中午吃啥晚上吃啥

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
1
评论
JavaScript常用事件详解

当点击网页上的一个按钮进行退出操作时，需要给按钮添加一个点击事件，当鼠标移动到某个元素时给该元素添加背景颜色时，也需要给该元素绑定一个相应事件。在网页的编写时，时常需要用到各种事件，使页面更灵活，增加用户体验感，那么JS中具体有什么常用事件呢？当鼠标点击第二个输入框，再点击第二个输入框外（使其失去焦点），会输出“触发了onblur事件光标离开”当鼠标点击第三个输入框（使其获得焦点），会输出“触发了onfocus事件光标聚焦”当鼠标移动到第一个盒子上，会输出“恭喜你打开了，但没中奖”
复制链接

扫一扫