JS事件

DOM0级绑定事件方法

  • 元素 . on+事件名称 = 函数
  • 相当于给一个元素的属性赋值,只能赋一个值,后面如果再赋值就会覆盖前面的值,所以说DOM0级事件只可以绑定一次,如果绑定多次,后面的会把前面的给覆盖了,因为是一个赋值的过程,一个属性只能赋一个值

失去和获取焦点事件

  • focus 获取焦点事件

  • blur失去焦点事件

  • 练习：模拟placeholder

    <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>事件</title>
</head>
<body>
<!--    模拟一个表单输入内容提示-->
    <input type="text" value="请输入电话号码" id="tel">
<script>
    /*
        模拟placeholder
        当用户单击表单开始输入时  表单内容为空
        当用户没有输入 或者刚刷新页面的时候，表单提示为“请输入你的电话号码”

        1、获取焦点事件
        2、判断 当表单内是“请输入电话号码”的时候，清空value值 让用户开始输入
        3、书写失去焦点事件
        4、判断 表单内的值是空（也就是用户没有输入任何内容的时候） 把提示重新书写进入

     */
    var oTel = document.getElementById("tel");
    // 1、获取焦点事件
    oTel.onfocus = function () {
        // 2、判断 当表单内是“请输入电话号码”的时候，清空value值 让用户开始输入
        if(oTel.value == "请输入电话号码"){
            // 清空value值
            oTel.value = "";
        }
    }
    // 3、书写失去焦点事件
    oTel.onblur = function () {
        // 4、判断 表单内的值是空（也就是用户没有输入任何内容的时候） 把提示重新书写进入
        if(oTel.value == ""){
            // 把提示重新书写进入
            oTel.value = "请输入电话号码";
        }
    }

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

点击事件

  • click:鼠标点击事件
  • contextmenu:鼠标右键事件
  • ondblclick:鼠标双击事件
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>点击事件</title>
    <style>
        #box{
            width: 300px;
            height: 200px;
            background: pink;
        }
    </style>
</head>
<body>
    <div id="box">我是box</div>
    <script>
        var oBox = document.getElementById("box");
        // 当在一个元素上按下鼠标  并又抬起的时候 才会触发click事件
        //右键也可能触发，但是右键的点击有专门的的事件 oncontextmenu
        oBox.onclick = function () {
            // alert(1);
        }

        // 右键事件  按下 并抬起的时候 弹出
        oBox.oncontextmenu=function(){
            alert(2);

            //取消默认右键的菜单弹出  取消默认事件 写在最后
            return false;
        }

        //双击事件
        oBox.ondblclick = function () {
            alert("用户双击");
        }
    </script>
</body>
</html>

  • 练习：点击循环变色

    <!-- 方法1 -->
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>点击事件</title>
    <style>
        #box{
            width: 300px;
            height: 200px;
            background: pink;
        }
    </style>
</head>
<body>
    <div id="box">我是box</div>
    <script>

        /*
           * 效果要求：
           * 用户点击box  第一次点击变成红色背景 第二次变成粉色  。。。依次循环(开关的思想)
           * (开关的思想) 定义一个变量  保存当前的状态  然后每次点击后 判断 并把开关给改变了
           * 1、绑定点击事件
           * 2、定义一个开关  保存当前的状态
           * 3、事件发生后，判断当前的状态，如果是粉色则 变红  如果是红色 则变粉
           * 4、改变完成以后，改变开关的状态
         */
        var oBox = document.getElementById("box");
        // 2、定义一个开关  保存当前的状态
        var flag = true;//我们自定义，当flag为true的时候 说明现在是粉色  那么为false就是红色
        // 1、绑定点击事件
        oBox.onclick = function () {
            // 3、事件发生后，判断当前的状态，如果是粉色则 变红  如果是红色 则变粉
            if (flag){
                oBox.style.backgroundColor = "red";
                // 改变完成以后，改变开关的状态(简写在下边)
                // flag = false;
            }else{
                oBox.style.backgroundColor = "pink";
                // 改变完成以后，改变开关的状态(简写在下边)
                // flag = true;
            }
            // 每次点击完都让flag取反就可以  不用再判断中依次书写
            flag = ! flag;
        }
    </script>
</body>
</html>
    <!-- 方法2 -->
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>点击事件</title>
    <style>
        #box{
            width: 300px;
            height: 200px;
            background: pink;
        }
    </style>
</head>
<body>
    <div id="box">我是box</div>
    <script>
        /*
           * 效果要求：
           * 用户点击box  第一次点击变成红色背景 第二次变成粉色  。。。
           * 取余运算的方法（定义一个变量，给一个初始值。每次点击都让这个变量累加  每次点击的让变量对2取余（因为目前效果是两种状态）来判断当前该显示什么颜色）
           * 1、绑定点击事件
           * 2、定义一个累加器  保存当前的状态
           * 3、事件发生后，判断当前的状态，如果是粉色则 变红  如果是红色 则变粉
           * 4、改变完成以后，改变开关的状态
         */
        var oBox = document.getElementById("box");
        // 2、定义一个累加器  保存当前的状态
        var num = 0;//每次点击都让这个变量累加  每次点击的让变量对2取余来判断
        // 1、绑定点击事件
        oBox.onclick = function () {
            // 3、事件发生后，判断当前的状态，如果是粉色则 变红  如果是红色 则变粉
            // 如果余0 那么代表是默认粉色
            if (num % 2 == 0){
                oBox.style.backgroundColor = "red";
            }else{
                oBox.style.backgroundColor = "pink";
            }
            // 改变完成以后，改变开关的状态
            num ++;
        }
    </script>
</body>
</html>

键盘事件

  • onkeydown:键盘按下

  • onkeyup:键盘抬起

  • 练习：检测剩余字数

    <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>检测剩余字数</title>
    <style>
        textarea{
            border: 1px solid #ccc;
            outline: none;
        }
    </style>
</head>
<body>
    <textarea id="text" cols="30" rows="10" ></textarea>
    <p>还剩余 <span id="reduce">100</span> 个字</p>
    <script>
        /*
         * 用户在表单中输入内容，剩余字数减少，
         * 当剩余字数减少到负数的时候 把提示字数变成红色
         *
         * 1、获取标签
         * 2、书写键盘抬起事件 当抬起的时候 去计算剩余字数
         * 3、获取表单输入的长度
         * 4、计算剩余的字数是多少
         * 5、把计算好的剩余字数给到 reduce标签中
         * 6、检测剩余字数 小于0的时候，让标签变红  并且让textarea的边框变红
         * 7、当用户把字数重新减小，然后样式变成正常
         */
        // 1、获取标签
        var oReduce = document.getElementById("reduce");
        var oText = document.getElementById("text");

        // 2、书写键盘抬起事件 当抬起的时候 去计算剩余字数
        oText.onkeyup = function () {
            // 3、获取表单输入的长度
            var oTextLen = oText.value.length;
            // console.log(oTextLen);
            // 4、计算剩余的字数是多少
            var reduceTextNum = 100 - oTextLen;
            // 5、把计算好的剩余字数给到 reduce标签中
            oReduce.innerHTML = reduceTextNum;
            // 6、检测剩余字数 小于0的时候，让标签变红  并且让textarea的边框变红
            if (reduceTextNum < 0){
                oReduce.style.color = "red";
                oText.style.border = "1px solid red";
            }else{
                // 7、当用户把字数重新减小，然后样式变成正常
                oReduce.style.color = "#000";
                oText.style.border = "1px solid #ccc";
            }
        }
    </script>
</body>
</html>

表单事件

  • input:当表单内容改变时触发

  • change:当表单内容改变并且失去焦点时候触发

  • 练习：

    模拟数据双向绑定

    <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>input和change事件</title>
</head>
<body>
    <input type="text" id="ipt">
    <br>
    <span id="text"></span>
    <script>
        /*
        * 模拟 数据双向绑定效果
        * 当用户在input中输入内容的时候  span中的内容跟着改变
        *
        * 1、获取标签
        * 2、绑定事件  当用户输入的时候触发
        *   oninput事件-->表单内容只要发生改变就会实时触发
        *   onchange事件 -->失去焦点 并且表单内容发生改变 才会触发
        * 3、获取输入的内容 并赋值给text
        */

        // 1、获取标签
        var oIpt = document.getElementById("ipt");
        var oText = document.getElementById("text");

        // 2、绑定事件  当用户输入的时候触发
        oIpt.oninput = function () {
            // 3、获取输入的内容 并赋值给text
            oText.innerHTML = oIpt.value;
        }

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

鼠标事件

  • mousedown:鼠标按下

  • mouseup:鼠标抬起

  • 练习：

    <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>按下抬起事件</title>
    <style>
        #box{
            width: 200px;
            height: 200px;
            background: red;
        }
    </style>
</head>
<body>
    <div id="box">

    </div>
    <script>
        /*
        * 鼠标在元素上 按下 元素变成黄色  抬起 变成红色
        * onmousedown  鼠标按下事件
        * onmouseup  鼠标抬起事件
         */

        var oBox = document.getElementById("box");
        oBox.onmousedown = function () {
            oBox.style.backgroundColor = "yellow";
        }
        oBox.onmouseup = function () {
            oBox.style.backgroundColor = "red";
        }
    </script>
</body>
</html>

  • mousemove:鼠标移动

  • mouseover:鼠标移入(可以触发事件的冒泡)

  • mouseout:鼠标移出(可以触发事件的冒泡)

  • mouseenter:鼠标移入(不会触发事件的冒泡)

  • mouseleave:鼠标移出(不会触发事件的冒泡)

  • 练习：

    <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>鼠标移入移出事件</title>
    <style>
        #box{
            width: 300px;
            height: 300px;
            background: #2ba5eb;
            overflow: hidden;
        }
        #box p{
            background: #1eff0a;
            color: #fff;
            text-align: center;
            height: 100px;
            line-height: 100px;
        }
    </style>
</head>
<body>
    <div id="box">
        <p>我是第一个p标签</p>
        <p>我是第二个p标签</p>
    </div>
    <script>
        /*
         * 当鼠标移入box  让box 颜色发生变化   移出再还原 ， 只要鼠标在元素中移动  就一直打印 欢迎光临
         *
         * onmouseover 和 onmouseout 可以触发事件的冒泡（旧的，大多数时候不适用）
         * onmouseenter 和 onmouseleave 不会触发事件的冒泡 新的  兼容性良好
         *
         * onmousemove -->鼠标移动事件   (实时触发  只要移动就会触发)
         */

        /*var oBox = document.getElementById("box");
        oBox.onmouseover = function(){
            console.log("进去");
            oBox.style.backgroundColor = "red";
        }
        oBox.onmouseout = function () {
            console.log("出来");
            oBox.style.backgroundColor = "#2ba5eb";
        }*/

        var oBox = document.getElementById("box");
        oBox.onmouseenter = function(){
            console.log("进去");
            oBox.style.backgroundColor = "red";
        }
        oBox.onmouseleave = function () {
            console.log("出来");
            oBox.style.backgroundColor = "#2ba5eb";
        }

        oBox.onmousemove = function () {
            console.log("欢迎光临");
        }
    </script>
</body>
</html>

滚动条事件

  • onscroll 事件在元素滚动条在滚动时触发。

  • 练习

    <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>onscroll</title>
    <style>
        #outer{
            width: 400px;
            height: 300px;
            border:1px solid #000;
            overflow: scroll;
        }
        #con{
            width: 800px;
            height: 1000px;
        }
    </style>
    <script>
        window.onload = function () {
            // onscroll是滚动条滚动即执行
            var oOuter = document.getElementById("outer");
            var oCon = document.getElementById("con");
            oOuter.onscroll = function () {
                console.log(Date.now());//只要在滚动  那么每次间隔最小可能是十几毫秒 甚至2毫秒  所以onscroll事件执行特别的频繁
                console.log("我滚了 再见");
            }
        }
    </script>
</head>
<body>
<div id="outer">
    <div id="con">
        今天天气真好 <br> * 100
    </div>
</div>
</body>
</html>

常见window事件

onload事件

onload 事件会在页面或图像加载完成后立即发生

  • window.onload事件：当整个文档内容（DOM节点+所需要的资源（音频、视频、图片、程序等等））全部加载完毕，才会执行

    <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>window.onload</title>
    <script>
        // js是可以放在这个位置的，
        // 但是在这个位置的js 直接获取元素是会获取不到的  因为代码还没有运行到DOM节点
       /* var oBox = document.getElementById("box");
        oBox.style.backgroundColor = "red";*/

       // 解决方法：添加window.onload
        window.onload = function () {
            var oBox = document.getElementById("box");
            oBox.style.backgroundColor = "red";
        }

    </script>

</head>
<body>
<div id="box">我是box</div>
<img src="../images/01.jpg" alt="">
<img src="../images/02.jpg" alt="">
<img src="../images/03.jpg" alt="">
<img src="../images/04.jpg" alt="">
</body>
</html>

  • img.onload 图像加载完成后立即发生

    <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>onload</title>
    <script>

    </script>
</head>
<body>
    <img src="../images/07.jpg" alt="" id="img">
<script>
    var oImg = document.getElementById("img");
    /*当图片没有设置宽高的时候，想到得到图片的宽高，需要等待图片加载进来以后才能获取到，
    否则获取不到  直接获取的就是0
    当图片设置宽高，那么我们随时获取的图片宽度 都是DOM节点你设置的宽度，而不是图片真正的宽度*/


    console.log(oImg.offsetWidth);//0

    // 把获取图片的宽度放在计时器中
    setTimeout(function () {
        // 因为图片加载的会慢，但是在DOM节点读取完以后，在执行js的时，图片可能还在加载，所以获取的图片为0
        // 给一个延迟执行，那么可能图片就会加载完毕，然后打印出图片的宽度
        console.log(oImg.offsetWidth + "计时器的");//1920
    },1000)


    // 书写计时器等待图片加载时间不好控制，所以onload事件是等待资源加载完毕以后执行
    oImg.onload = function () {
        console.log(oImg.offsetWidth + "onload");//1920
    }
</script>
</body>
</html>

  • 练习：进度条

    <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>进度条</title>
    <style>
        .progress{
            width: 400px;
            height: 50px;
            border: 2px solid #009ff2;
        }
        .box{
            width: 0%;
            height: 50px;
            background-color: orangered;
        }
    </style>
</head>
<body>
<div class="progress">
    <div class="box"></div>
</div>
<div id="con">已经加载了 0%</div>
<script>
    var oCon = document.getElementById("con");
    var oProgress = document.querySelector(".progress");
    var oBox = document.querySelector(".box");
    var num = 0;
    for (var i = 0; i < 30; i++) {
        var v = i + 1;
        var newImg = new Image();
        v < 10 ? v = "0" + v : v;
        newImg.src = "../images/" + v + ".jpg";

        newImg.onload = function () {
            num ++;
            oBox.style.width = num / 30 * 100 + "%";
            oCon.innerHTML = `已经加载了 ${parseInt(num / 30 * 100)}%`
        }
    }
</script>
</body>
</html>

window.onscroll

  • window.onscroll：当系统滚动条滚动的时候触发
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>window.onscroll</title>
    <style>
        body{
            height: 3000px;
            background-color: pink;
        }
    </style>
</head>
<body>
<script>
    // window.onscroll：当系统滚动条滚动的时候触发
    window.onscroll = function () {
        console.log("滚了吧");
    }
</script>
</body>
</html>

resize事件

  • 窗口重置，resize事件是在浏览器窗口被重置时触发。

  • 练习

    <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>window.onresize</title>
    <script src="./my.js"></script>
</head>
<body>
<script>
    //获取屏幕大小封装函数
    var getScreen = function () {
        var w = document.documentElement.clientWidth||document.body.clientWidth;
        var h = document.documentElement.clientHeight||document.body.clientHeight;;
        return {
            width:w,
            height:h
        }
    }
    // 目前 只有浏览器窗口大小改变才能出发onresize事件
    function changeColor() {
        if (getScreen().width >= 1000){
            document.body.style.backgroundColor = "red";
        }else if (getScreen().width >= 800){
            document.body.style.backgroundColor = "yellow";
        }else if(getScreen().width >= 600){
            document.body.style.backgroundColor = "green";
        }else{
            document.body.style.backgroundColor = "blue";
        }
    }
    /*// 方法1：页面调用的时候先执行一次
    changeColor();
    window.onresize = changeColor;*/

    // 方法二 合写

   /* window.onload = changeColor;
    window.onresize = changeColor;*/

    window.onload = window.onresize = changeColor;
</script>
</body>
</html>
posted @   z_bky  阅读(19)  评论(0)  编辑  收藏  举报
相关博文：
·  DOM进阶
·  DOM高级
·  前端 - JS DOM
·  前端javascript基础
·  千锋JavaScript学习笔记
阅读排行：
· TypeScript + Deepseek 打造卜卦网站：技术与玄学的结合
· 阿里巴巴 QwQ-32B真的超越了 DeepSeek R-1吗？
· 【译】Visual Studio 中新的强大生产力特性
· 10年+ .NET Coder 心语 ── 封装的思维：从隐藏、稳定开始理解其本质意义
· 【设计模式】告别冗长if-else语句：使用策略模式优化代码结构
点击右上角即可分享
微信分享提示
AI IDE Trae