事件

最新推荐文章于 2024-07-25 14:27:14 发布

文洛

最新推荐文章于 2024-07-25 14:27:14 发布

阅读量2.8k

点赞数 1

CC 4.0 BY-SA版权

分类专栏： JS 文章标签： javascript 鼠标

本文链接：https://blog.csdn.net/a126789/article/details/76939837

JS 专栏收录该内容

21 篇文章

订阅专栏

本文详细介绍了JavaScript中的各种事件，包括鼠标事件、键盘事件和其他常见的事件类型。通过实例展示了如何使用这些事件进行网页交互，并探讨了事件注册的不同方法及其优劣。

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

事件

1、鼠标常用事件

（1）单击事件（click）

案例：

<script>
    function fun(){
        //获取到指定元素
        var p1 = document.getElementById("p1");
        p1.innerText = "我被单击了！";
        p1.style.fontSize = "54px";
    }
</script>
<body>
    <p id="p1" onclick="fun()">单击事件测试</p>
</body>

输出结果为：

在这个案例中，事件源就是id为”p1”的元素，事件名是单击，事件注册是onclick=”fun()”，也就是说当单击id为”p1”的元素时，就交由fun函数来处理。

（2）双击事件（ondblclick）

案例：

<style>
        #div1{
            width: 100px;
            height: 100px;
            background-color: aquamarine;
        }
</style>
<script>
    function zoomout(){
        var div1 = document.getElementById("div1");
        div1.style.width = "200px";
        div1.style.height = "200px";
    }
    function zoomin(){
        var div1 = document.getElementById("div1");
        div1.style.width = "100px";
        div1.style.height = "100px";
    }
</script>
<body>
    <div id="div1" onclick="zoomout()" ondblclick="zoomin()">

    </div>
</body>

（3）鼠标按下/弹起（onmousedown/onmouseup）

案例：

<style>
        #div1{
            width: 100px;
            height: 100px;
            background-color: aquamarine;
        }
</style>
<script>
    function zoomout(){
        var div1 = document.getElementById("div1");
        div1.style.width = "200px";
        div1.style.height = "200px";
    }
    function zoomin(){
        var div1 = document.getElementById("div1");
        div1.style.width = "100px";
        div1.style.height = "100px";
    }
</script>
<body>
    <div id="div1" onmousedown="zoomout()" onmouseup="zoomin()">

    </div>
</body>

（4）鼠标移入/离开（onmouseenter/onmouseleave）
案例：

<style>
        #div1{
            width: 100px;
            height: 100px;
            background-color: aquamarine;
        }
</style>
<script>
    function red(){
        var div1 = document.getElementById("div1");
        div1.style.backgroundColor = "green";
    }
    function blue(){
        var div1 = document.getElementById("div1");
        div1.style.backgroundColor = "blue";
    }
</script>
<body>
    <div id="div1" onmouseenter="red()" onmouseleave="blue()">

    </div>
</body>

（5）onmouseover/onmouseout
与onmouseenter/onmouseleave很类似，（区别后面再讲）
案例：
<style>
        #div1{
            width: 100px;
            height: 100px;
            background-color: aquamarine;
        }
    </style>
</head>
<script>
    function red(){
        var div1 = document.getElementById("div1");
        div1.style.backgroundColor = "green";
    }
    function blue(){
        var div1 = document.getElementById("div1");
        div1.style.backgroundColor = "blue";
    }
</script>
<body>
    <div id="div1" onmouseover="red()" onmouseout="blue()">

    </div>
</body>

（6）鼠标移动onmousemove
<style>
        #div1{
            width: 300px;
            height: 300px;
            background-color: aqua;
        }
    </style>
</head>
<script>
    function move(e){
        var p1 = document.getElementById("p1");
        var img1 = document.getElementById("img1");
        p1.innerText = e.clientX+"," + e.clientY;
        img1.style.top = e.clientX+"px";
        img1.style.left = e.clientY+"px";
    }
</script>
<body>
    <div id="div1" onmousemove="move(event)">

    </div>
    <img src="dog.jpg" id="img1"/>
    鼠标的坐标<p id="p1"></p>
</body>

（7）onmousewheel
<style>
        #div1{
            width: 100px;
            height: 100px;
            background-color: aqua;
        }
    </style>
</head>
<script>
    var width = 100;
    var height = 100;
    function wheel(e){
        if(e.wheelDelta > 0){
            width += 5;
            height += 5;
        }else{
            width -= 5;
            height -= 5;
        }
        var div1 = document.getElementById("div1");
        div1.style.width = width + "px";
        div1.style.height = height + "px";
    }
</script>
<body>
    <div id="div1" onmousewheel="wheel(event)">

    </div>

</body>

2、键盘事件
（1）keypress
案例：
function search(e){
    if(e.keyCode == 13){
        var what = document.getElementById("what");
        alert("开始搜索：" + what.value);
    }
}

keyCode属性记录了按下的键的编码。
Keypress事件只能捕获可打印字符的按键，不能捕获诸如shift、ctrl、alt等不可打印字符的按键。
但是可以通过shiftKey、ctrlKey等属性判断在击键的同时是否按下了shift、ctrl等辅助键。

（2）keydown/keyup
function keydown(e){
    alert(e.keyCode);
}
keydown/keyup可以捕获键盘上所有的键（个别除外）
<style>
        /*#img1{
            position: absolute;
        }*/
    </style>
</head>

<body onkeydown="move(event)">
    <!--<div id="div1"></div>-->
    <img id="img1" src="man.png"/>
</body>
<script>
    var top1 = 0;
    var left = 0;
    function move(e){
        switch (e.keyCode){
            case 37:
                left -=5;
                break;
            case 38:
                top1 -= 5;
                break;
            case 39:
                left +=5;
                break;
            case 40:
                top1 += 5;
                break;
        }
        var img1 = document.getElementById("img1");
        img1.style.marginTop = top1+"px";
        img1.style.marginLeft = left+"px";
    }
</script>

总结：
    ①使用变量top导致上下移动失败，原因是和window.top这个全局变量冲突了，换个变量名就好了
    ②如果把变量top1和left移入函数中，发现只能移动5像素。原因是函数内部的局部变量在每次调用函数时都会重新创建并初始化，也就是说每一次调用left和top1的值都是0，不会保留上一次的值。如果需要保留，就只能用全局变量了。

3、其他事件
onload：页面加载事件
onfocus：获得焦点的事件
onblur：失去焦点事件
案例：
<script>
    function focus1(){
        var txt1 = document.getElementById("txt1");
        txt1.style.backgroundColor = "green";
    }
    function blur1(){
        var txt1 = document.getElementById("txt1");
        txt1.style.backgroundColor = "blue";
    }
</script>
<body>
<input type="text" id="txt1" onfocus="focus1()" onblur="blur1()"/>
</body>

onchange：值改变事件
<script>
    function focus1(){
        var txt1 = document.getElementById("txt1");
        txt1.style.backgroundColor = "green";
    }
    function blur1(){
        var txt1 = document.getElementById("txt1");
        txt1.style.backgroundColor = "blue";
    }
    function change1(){
        alert("值改变了！");
    }
</script>
<body>
<input type="text" id="txt1" onfocus="focus1()" onblur="blur1()" onchange="change1()"/>
</body>


4、事件的注册
三种方法：
（1）使用onXXX属性，比如onclick=”fun()”
（2）通过js去设置元素onXXX属性
（3）通过addEventListener注册
后两种方法有何好处？将页面的内容、样式和行为分离，内容和样式可能是美工人员去完成，行为（也就是JS中的内容）往往是程序员的事。分离后利于分工合作。
第三种方式addEventListener的第一个参数事件名，第二个参数是事件处理函数。可以添加事件监听，当然也就可以移除，用的是removeEventListener,参数与addEventListener参数是一样的。
而且通过removeEventListener和addEventListener甚至我们可以去动态的去注册不同的事件处理程序。
案例：
<style>
    #div1{
         width: 200px;
         height: 200px;
         background-color: deepskyblue;
     }
</style>
</head>
<body>
    <div id="div1">
        <p id="p1">捕获和冒泡的演示</p>
    </div>
</body>
<script>
    var div1 = document.getElementById("div1");
    var p1 = document.getElementById("p1");
    p1.addEventListener("click",click1);
    div1.addEventListener("click",click2);

    function click1(){
        alert("段落被单击了！");
    }
    function click2(){
        alert("div被单击了！");
    }
</script>

在这个案例中，如果是单击文字，先提示“段落被单击”，然后在提示“div被单击”。因为div是段落的父容器，所以单击段落也就单击了div，所以两者都会触发这个事件。
但是如何去规定两个事件的处理顺序呢？这就是事件的冒泡和捕获。
冒泡：按照从内到外的顺序依次触发；默认方式：
捕获：反之（从外到内的顺序依次触发）
案例：捕获
<style>
      #div1{
          width: 200px;
          height: 200px;
          background-color: deepskyblue;
       }
 </style>
</head>
<body>
    <div id="div1">
        <p id="p1">捕获和冒泡的演示</p>
    </div>
</body>
<script>
    var div1 = document.getElementById("div1");
    var p1 = document.getElementById("p1");
    p1.addEventListener("click",click1,true);
    div1.addEventListener("click",click2,true);

    function click1(){
        alert("段落被单击了！");
    }
    function click2(){
        alert("div被单击了！");
    }
</script>

当使用onmouseenter事件时，当里层的div触发进入事件时，处理完了就完事了；而使用onmouseover事件时，当里层的div触发进入事件时，处理完了还会冒泡给父容器处理进入事件
案例：
<style>
        div{
            border: 1px solid blueviolet;
        }
        #div2{
            width: 100px;
            height: 100px;
            background-color: deepskyblue;
            margin: 10px;
        }
    </style>
</head>

<body>
    <div id="div1">
        <div id="div2"></div>
    </div>
</body>
<script>
    var div1 = document.getElementById("div1");
    var div2 = document.getElementById("div2");
    /*div1.onmouseenter = enter1;
    div2.onmouseenter = enter2;*/
    div1.onmouseover = enter1;
    div2.onmouseover = enter2;
    /*div1.onmouseleave = leave1;
    div2.onmouseleave = leave2;*/
    function enter1(){
        alert("进入div1！");
    }
    function enter2(){
        alert("进入div2！");
    }
    /*function leave1(){
        alert("离开div1！");
    }
    function leave2(){
        alert("离开div2！");
    }*/
</script>