JS事件

最新推荐文章于 2025-02-19 09:09:27 发布

丝路花雨-

最新推荐文章于 2025-02-19 09:09:27 发布

阅读量232

点赞数

CC 4.0 BY-SA版权

分类专栏： JS基础

本文链接：https://blog.youkuaiyun.com/X18621144576/article/details/79592827

JS基础专栏收录该内容

4 篇文章

订阅专栏

本文详细介绍了DOM事件的基础概念，包括常见的鼠标、键盘等交互事件及事件绑定、事件对象、事件传播等高级主题。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

一、事件名称

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>事件名称</title>
        <style type="text/css">
            .redDiv{
                width: 200px;
                height: 200px;
                background-color: red;
            }
        </style>
    </head>
    <body>
        <div class="redDiv"></div>
        <form action="" id="reg">
            <input type="text" id="uName">
            <input type="submit" id="submit">
            <input type="reset" id="reset">
        </form>
    </body>
    <script type="text/javascript">
        // 阻止默认事件
        var redDiv = document.getElementsByClassName('redDiv')[0];
        var reg = document.getElementById('reg');
        var uName = document.getElementById('uName');
        // 鼠标事件
        redDiv.onmousemove = function(){
            console.log("鼠标移动的时候触发");
        }
        redDiv.onclick = function(){
            console.log("单机事件");
        }
        redDiv.ondblclick = function(){
            console.log("双击事件");
        }
        redDiv.onmousedown = function(){
            console.log("鼠标按下事件");
        }
        redDiv.onmouseup = function(){
            console.log("鼠标抬起事件");
        }
        redDiv.oncontextmenu = function(){
            console.log("鼠标右击事件");
            return false;
        }
        // over和out会在鼠标从redDiv的父级移到子级的时候触发 先触发out 在触发over
        // leave和enter从父级移到子级不会触发 只有鼠标离开/移入整个redDiv的时候才会触发
        redDiv.onmouseover = function(){
            console.log("over鼠标移入")
        }
        redDiv.onmouseout = function(){
            console.log("out鼠标移出")
        }
        redDiv.onmouseenter = function(){
            console.log("enter鼠标移入")
        }
        redDiv.onmouseleave = function(){
            console.log("leave鼠标移出")
        }

        // 键盘事件
        // document.onkeydown = function(){
        //  console.log("down键盘按下");
        // }
        // document.onkeypress = function(){
        //  console.log("press键盘按下");
        // }
        // document.onkeyup = function(){
        //  console.log("键盘抬起事件");
        // }

        // 表单
        uName.onchange = function(){
            console.log("内容发生改变之后触发");
        }
        uName.oninput = function(){
            console.log("内容发生变化之后触发");
        }
        uName.onfocus = function(){
            console.log("聚焦");
        }
        uName.onblur = function(){
            console.log("失焦");
        }
        // 给form表单绑定事件
        reg.onsubmit = function(){
            console.log("提交");
            return false;
        }
        reg.onreset = function(){
            console.log("重置");
            return false;
        }
        // window事件
        window.onresize = function(){
            console.log("窗口尺寸发生变化的时候触发");
        }
        window.onscroll = function(){
            console.log("窗口内容滚动的时候触发");
        }
        // img.onload = function(){}
        window.onload = function(){
            console.log("窗口加载完毕之后触发");
        }
    </script>
</html>

二、事件对象

<!doctype html>
<html>
    <head>
        <meta charset="utf-8" />
        <title>事件对象</title>
        <style type="text/css"> 
            body{
                height: 3000px;
            }
            .redDiv{
                width: 200px;
                height: 200px;
                background-color: red;
            }
            p{
                margin:0px;
                height: 100px;
                margin-left: 100px;
                background-color: blue;
            }
        </style>
    </head>
    <body>
        <div class="redDiv">
            <p></p>
        </div>
    </body>
    <script type="text/javascript">
        // 鼠标事件 -》位置
        var redDiv = document.getElementsByClassName('redDiv')[0];
        redDiv.onclick = function(ev){
            var evObj = window.event ||  ev ;
            // 触发事件的元素(触发事件的元素不一定是绑定事件的元素)
            console.log(evObj.target);
            // 鼠标距离窗口顶部的坐标
            console.log(evObj.clientY);
            // 鼠标距离页面顶部的坐标
            console.log(evObj.pageY);
            // 鼠标距离target顶部的坐标
            console.log(evObj.offsetX);
        }
        // press区分大小写，但不支持特殊按键
        // down 不分区大小写，支持特殊按键
        document.onkeypress = function(ev){
            console.log("press" + ev.keyCode)
        }
        document.onkeydown = function(ev){
            // keyCode标识哪一个按键
            console.log(ev.keyCode);
            if (ev.keyCode == 66) {
                console.log("按了B");
            }
            // 判断组合键
            if (ev.keyCode == 66 && ev.metaKey) {
                console.log("按了command + B");
            }
        }
    </script>
</html>

三、事件绑定

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>事件绑定</title>
        <style type="text/css">
            .redDiv{
                width: 200px;
                height: 200px;
                background-color: red;
            }
        </style>
    </head>
    <body>
        <div class="redDiv">

        </div>
    </body>
    <script type="text/javascript">
        var redDiv = document.getElementsByClassName('redDiv')[0];
        // 时间绑定 - 可以给一个元素绑定多个相同事件
        redDiv.addEventListener("click",function(){
            console.log(1);
        },false);
        redDiv.addEventListener("click",f2
        ,false);
        // 移除时间绑定
        redDiv.removeEventListener("click",f2,false);
    </script>
</html>

四、事件捕获和冒泡

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>事件捕获和冒泡</title>
        <style type="text/css">
            .box{
                width: 600px;
                height: 600px;
                background-color: red;
                border: 1px red solid;
            }
            .mid{
                width: 400px;
                height: 400px;
                background-color: yellow;
                margin: 100px auto;
                border: 1px white solid;
            }
            .item{
                width: 200px;
                height: 200px;
                background-color: blue;
                margin: 100px auto;
                border: 1px white solid;
            }
        </style>
    </head>
    <body>
        <div class="box">
            <div class="mid">
                <div class="item"></div>
            </div>
        </div>
    </body>
    <script type="text/javascript">
        var box = document.getElementsByClassName('box')[0];
        var mid = document.getElementsByClassName('mid')[0];
        var item = document.getElementsByClassName('item')[0];
        // 事件冒泡    阻止事件冒泡
        box.addEventListener("click",function(){
            console.log("box")
        },false);
        mid.addEventListener("click",function(){
            console.log("mid")
        },false);
        item.addEventListener("click",function(ev){

            // 取消冒泡 不让事件继续冒泡
            ev.cancelBubble = true;
            // 阻止冒泡的另一种方法
            // ev.stopPropagation(); 

            // 兼容写法
            if (ev.stopPropagation) {
                ev.stopPropagation(); 
            }else{
                ev.cancelBubble = true;
            }
            console.log("item")
            // 阻止默认事件
            return false; 
            ev.preventDefault();
            ev.returnValue = false;
        },false);
    </script>
</html>