JavaScript学习笔记（九）——JS中的常用事件

最新推荐文章于 2024-08-10 15:00:00 发布

粽子师兄

最新推荐文章于 2024-08-10 15:00:00 发布

阅读量214

点赞数

分类专栏： javaScript 文章标签： html5 js javascript css3

本文链接：https://blog.csdn.net/qq_45268602/article/details/108191644

版权

javaScript 专栏收录该内容

67 篇文章 3 订阅

订阅专栏

什么叫做事件

所谓的事件，是浏览器监听用户行为的一种机制。
比如，当用户使用鼠标 点击 一个按钮，会触发该按钮的 点击 事件如果此时我们想要执行代码就可以通过JS脚本设置 点击 事件的处理函数
同样的，如果用户鼠标双击一个按钮，会触发该按钮的双击事件
类似的事件还有很多
每个事件前要用on开头

鼠标事件

click 点击事件(一次click包含一次mousedown和一次mouseup)
dblclick 双击事件
mousedown 鼠标按下事件
mouseup 鼠标抬起事件
mouseover 鼠标进入事件
mouseenter 鼠标进入事件
mouseout 鼠标离开事件
mouseleave 鼠标离开事件
mousemove 鼠标移动事件

键盘事件

keydown 键盘键被按下
keyup 键盘键被松开
keypress 输入

浏览器的事件

load 页面中所有资源都被加载完毕的时候
scroll 页面的卷动

焦点事件

focus 当一个元素获取到焦点时
blur 当一个元素失去焦点时

移动端事件

touchstart 触摸开始事件会在手指按下的时候触发
touchmove 触摸并移动会在手指按下并移动的时候触发
touchend 触摸结束事件会在手指离开的时候触发

其它事件

animationstart 动画开始时触发
animationend 动画结束时触发
transitionend 过渡结束时触发
contextmenu 菜单事件
mousewheel 滚轮事件

绑定事件的第一步 `获取元素`

    // HTML代码
    <button id="btn">点我试试看</button>
    // JS代码
    var btn = document.getElementById("btn");
    function click() {
        console.log("你好");
    }
    btn.onclick = click;

每个事件的使用方式方式

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>鼠标事件</title>
    <style>
        *{
            margin:0;
            padding:0;
        }
        .box1{
            margin: 0 auto;
            position: relative;
            width: 600px;
            height: 300px;
            background: green;
        }
        .box2{
            position: absolute;
            width: 300px;
            height: 150px;
            background: red;
            left: 50%;
            top: 50%;
            transform: translate(-50%,-50%);
        }
    </style>
</head>
<body>
    <div id="box1" class="box1">
        <div id="box2" class="box2">

        </div>
    </div>
    <script>
        var box1 = document.getElementById("box1");
        var box2 = document.getElementById("box2");

        // onclick 点击事件
        // box1.onclick = function(){
        //     console.log("点击了box1");
        // }
        // box2.onclick = function(){
        //     console.log("点击了box2");
        // }

        // dblclick 双击事件
        // box1.ondblclick = function(){
        //     console.log("双击了box1");
        // }
        // box2.ondblclick = function(){
        //     console.log("双击了box2");
        // }

        // onmousedown 鼠标按下事件
        // box1.onmousedown = function(){
        //     console.log("在box1上按下了鼠标");
        // }
        // box2.onmousedown = function(){
        //     console.log("在box2上按下了鼠标");
        // }

        // onmouseup 鼠标抬起事件
        // box1.onmouseup = function(){
        //     console.log("在box1上弹起了鼠标");
        // }
        // box2.onmouseup = function(){
        //     console.log("在box2上弹起了鼠标");
        // }

        // // onmouseover 鼠标进入事件
        // box1.onmouseover = function(){
        //     console.log("鼠标进入了box1");
        // }
        // box2.onmouseover = function(){
        //     console.log("鼠标进入了box2");
        // }

        // // onmouseout 鼠标离开事件
        // box1.onmouseout = function(){
        //     console.log("鼠标离开了box1");
        // }
        // box2.onmouseout = function(){
        //     console.log("鼠标离开了box2");
        // }

        // // onmouseenter 鼠标进入事件
        // box1.onmouseenter = function(){
        //     console.log("鼠标进入了box1");
        // }
        // box2.onmouseenter = function(){
        //     console.log("鼠标进入了box2");
        // }

        // // onmouseleave 鼠标离开事件
        // box1.onmouseleave = function(){
        //     console.log("鼠标离开了box1");
        // }
        // box2.onmouseleave = function(){
        //     console.log("鼠标离开了box2");
        // }

        // onmousemove 鼠标移动事件（这是一个高频率事件）
        // box1.onmousemove = function(){
        //     console.log("鼠标在box1中移动了");
        // }
        // box2.onmousemove = function(){
        //     console.log("鼠标在box2中移动了");
        // }
    </script>
</body>
</html>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>键盘事件</title>
</head>
<body>
    <input type="text" id="inp" class="inp">
    <script>
        var inp = document.getElementById("inp");

        // onkeydown 键盘按键被按下事件
        // inp.onkeydown = function(){
        //     console.log("键盘被按下");
        // }

        // onkeyup 键盘按键被松开事件
        // inp.onkeyup = function(){
        //     console.log("键盘被弹起");
        // }

        // onkeypress 输入事件
        // inp.onkeypress = function(){
        //     console.log("键盘输入了内容");
        // }
    </script>
</body>
</html>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>浏览器事件</title>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        html,body{
            width: 100%;
            height: 150%;
            background: green;
        }
    </style>
</head>
<body>
    <script>
        window.onload = function(){
            console.log("浏览器已经加载完内容");
        }
        window.onscroll = function(){
            console.log("浏览器中页面发生滚动");
        }
    </script>
</body>
</html>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>焦点事件</title>
</head>
<body>
    <input type="text" name="" id="inp">
    <script>
        var inp = document.getElementById("inp");

        // focus 获取焦点事件
        inp.onfocus = function(){
            console.log("获取了焦点");
        }

        // blur 失去焦点事件
        inp.onblur = function(){
            console.log("失去了焦点");
        }

    </script>
</body>
</html>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>移动端事件</title>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        header{
            width: 100%;
            height: 100px;
            background: green;
        }
    </style>
</head>
<body>
    <header id="header"></header>

    <script>
        var header = document.getElementById("header");

        // ontouchstart  触摸开始事件，会在手指按下的时候触发
        header.ontouchstart = function(){
            console.log("触摸开始事件，会在手指按下的时候触发");
        }

        // touchmove   触摸并移动，会在手指按下并移动的时候触发
        header.ontouchmove = function(){
            console.log("触摸并移动，会在手指按下并移动的时候触发");
        }

        // touchend    触摸结束事件，会在手指离开的时候触发
        header.ontouchend = function(){
            console.log("触摸结束事件，会在手指离开的时候触发");
        }
    </script>
</body>
</html>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>其他事件</title>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        .box1{
            width: 100px;
            height: 100px;
            background: green;
            transition: 1s linear;
        }
        .box1:hover{
            transform: scale(2);
            background: red;
        }

        .box2{
            width: 200px;
            height: 200px;
            background: yellow;
        }
        .box2:hover{
            animation:mymove 3s linear;
        }
        @keyframes mymove{
            0% {
                background: green;
            }
            50% {
                background: red;
            }
            100% {
                background: blue;
            }
        }
    </style>
</head>
<body>
    <div class="box1" id="box1"></div>
    <div class="box2" id="box2"></div>
    <script>
        var box1 = document.getElementById("box1");

        // transitionend   过渡结束时触发
        box1.ontransitionend = function(){
            console.log("过渡结束");
        }

        // animationstart  动画开始时触发 
        box2.onanimationstart = function(){
            console.log("动画开始");
        }

        // animationend    动画结束时触发
        box2.onanimationend = function(){
            console.log("动画结束");
        }

        // contextmenu 右键菜单事件
        window.oncontextmenu = function(){
            console.log("触发了右键菜单事件");
        }

        // mousewheel 滚轮事件 
        window.onmousewheel = function(){
            console.log("触发了滚轮事件");
        }
    </script>
</body>
</html>

粽子师兄

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
JavaScript学习笔记（九）——JS中的常用事件

什么叫做事件所谓的事件，是浏览器监听用户行为的一种机制。比如，当用户使用鼠标点击一个按钮，会触发该按钮的点击事件如果此时我们想要执行代码就可以通过JS脚本设置点击事件的处理函数同样的，如果用户鼠标双击一个按钮，会触发该按钮的双击事件类似的事件还有很多每个事件前要用on开头鼠标事件click 点击事件(一次click包含一次mousedown和一次mouseup)dblclick 双击事件mousedown 鼠标按下事件mouseup 鼠标抬起事件mouseove
复制链接

扫一扫