JS——事件

最新推荐文章于 2025-06-20 21:54:35 发布

原创最新推荐文章于 2025-06-20 21:54:35 发布 · 653 阅读

1 ·

CC 4.0 BY-SA版权

js 专栏收录该内容

20 篇文章

订阅专栏

本文详细介绍了事件处理的基础概念，包括事件的注册、处理流程，并通过具体示例解释了常见事件如鼠标点击、键盘输入等的工作原理。同时探讨了事件处理中的冒泡与捕获机制。

10 事件

10.1 事件的概念

事件源

事件名

事件注册

事件处理

以火灾为例：

XX大酒店201房间发生火灾，119电话报警，南湖区消防支队出警，赶赴现场通过喷水作业成功灭火。

事件源：XX大酒店201房间

事件名：火灾

事件注册：事先已经规划好片区，XX大酒店所属片区归南湖区消防支队负责。

事件处理：喷水

10.2 常用事件

鼠标常用事件：

（1）click 单击事件

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

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

（2）双击事件

<body>
    <div id="div1"onclick="zoomout()"ondblclick="zoomin()">
    </div>
</body>
<script>
    functionzoomout(){
        vardiv1 = document.getElementById("div1");
        div1.style.width= "200px";
        div1.style.height= "200px";
    }
    functionzoomin(){
        vardiv1 =document.getElementById("div1");
        div1.style.width= "100px";
        div1.style.height= "100px";
    }
</script>

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

<body>
    <div id="div1"onmousedown="zoomout()"onmouseup="zoomin()">
    </div>
</body>
<script>
    functionzoomout(){
        vardiv1 = document.getElementById("div1");
        div1.style.width= "200px";
        div1.style.height= "200px";
    }
    functionzoomin(){
        vardiv1 = document.getElementById("div1");
        div1.style.width= "100px";
        div1.style.height= "100px";
    }
</script>

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

<body>
    <div id="div1"onmouseenter="red()"onmouseleave="blue()">
    </div>
</body>
<script>
    functionred(){
        vardiv1 = document.getElementById("div1");
        div1.style.backgroundColor= "red";
    }
    functionblue(){
        vardiv1 = document.getElementById("div1");
        div1.style.backgroundColor= "blue";
    }
</script>

（5）onmouseover onmouseout

与onmouseenter 、onmouseleave很类似，区别后面再讲

<body>
    <div id="div1"onmouseover="red()"onmouseout="blue()">
    </div>
</body>
<script>
    functionred(){
        vardiv1 = document.getElementById("div1");
        div1.style.backgroundColor= "red";
    }
    functionblue(){
        vardiv1 = document.getElementById("div1");
        div1.style.backgroundColor= "blue";
    }
</script>

（6）鼠标移动 onmousemove

<body>
    <div id="div1"onmousewheel="wheel(event)">
    </div>
</body>
<script>
    varwidth = 100;
    varheight = 100;
    functionwheel(e){
        if(e.wheelDelta> 0){
            width += 5;
            height +=5;
        }else{
            width -= 5;
            height -=5;
        }
        vardiv1 = document.getElementById("div1");
        div1.style.width= width + "px";
        div1.style.height= height + "px";
    }
</script>

键盘事件

（1）Keypress

<body>
    <input type="text"onkeypress="search(event)"id="what">
</body>
<script>
    functionsearch(e){
        if(e.keyCode== 13){
            varwhat = document.getElementById("what");
            alert("开始搜索："+ what.value);
        }
    }
</script>

Keycode 属性记录了按下键的编码

Keypress事件只能捕获可打印字符的按键，不能捕获诸如shift、Ctrl、alt等不可打印字符的按键。

但是可以通过shiftkey、Ctrlkey等属性判断在击键的同时是否按下了shift、Ctrl等辅助键。

（2）keydown、keyup

<body>
    <input id="what"type="text"onkeydown="keydown(event)">
</body>
<script>
    functionkeydown(e){
      alert(e.keyCode);
    }
</script>

Keydown、keyup可以捕获键盘上所有的键（个别除外）。

<body onkeydown="move(event)">
    <img id="img1"src="man.png">
</body>
<script>
    vartop1 = 0;
    varleft = 0;
    functionmove(e){
        switch(e.keyCode){
            case 37:
                left -= 5;
                break;
            case 38:
                top1 -= 5;
                break;
            case 39:
                left += 5;
                break;
            case 40:
                top1 += 5;
                break;
        }
        varimg1 = document.getElementById("img1");
        img1.style.top= top1 + "px";
        img1.style.left= left + "px";
    }

总结：

（1）使用变量top导致上下移动失败，原因是和window.top这个全局变量冲突了，换个变量就好了。

（2）如果把变量top1和left移入函数中，发现只能移动5像素。原因是函数内部的局部变量在每次调用函数时都会重新创建并初始化，也就是说每一次调用left和top1的值都是0，不会保留上一次的值。如果需要保留，就只能用全局变量了。

其他事件：

onload：页面加载事件

onfocus：获得焦点事件

onblur: 失去焦点事件

onchange: 值改变事件

<body>
    <input type="text"id="txt1"onfocus="focus1()"onblur="blur1()"onchange="change1()">
</body>
<script>
    functionfocus1(){
        vartxt1 = document.getElementById("txt1");
        txt1.style.backgroundColor= "blue";
    }
    functionblur1(){
        vartxt1 = document.getElementById("txt1");
        txt1.style.backgroundColor= "pink";
    }
    functionchange1(){
        alert("值改变了");
    }
</script>

10.3 事件的注册

三种方法：

（1）使用onXXX属性，比如onclick =“fun”

（2）通过js去设置元素的onXXX属性

（3）通过addEventListener注册

<body>
    <input type="text"id="txt1"onfocus="focus1()">
</body>
<script>
    //注册事件的第二种方法
    vartxt1 = document.getElementById("txt1");
    txt1.onblur =blur1;
    //注册事件的第三种方法
    txt1.addEventListener("change",change1);

    functionfocus1(){
        txt1.style.backgroundColor= "blue";
    }
    functionblur1(){
        txt1.style.backgroundColor= "pink";
    }
    functionchange1(){
        alert("值改变了");
    }
</script>

后面两种方法有何好处？

将页面的内容、样式和行为分离，内容和样式可能是美工人员去完成，行为（实际上就是js内容）往往是程序员的事。分离后利于分工合作。

第三种方式addEventListener的第一个参数是事件名，第二个参数是事件处理函数。可以添加事件处理监听，当然也可以移除，用的是removeEventListener，参数与addEventListener参数是一样的。

而且通过addEventListener和removeEventListener甚至我们可以去动态地去注册不同的事件处理程序。

10.4 捕获与冒泡

<head>
    <meta http-equiv="Content-Type"content="text/html; charset=utf-8"/>
    <title></title>
    <style type="text/css">
        #div1{
            width:200px;
            height:200px;
            background-color:aqua;
        }
    </style>
</head>
<body>
    <div id="div1">
        <p id="p1">捕获和冒泡的演示</p>
    </div>
</body>
<script>
    vardiv1 = document.getElementById("div1");
    varp1 = document.getElementById("p1");
    p1.addEventListener("click",click1);
    div1.addEventListener("click",click2);
    functionclick1(){
        alert("段落被单击了");
    }
    functionclick2(){
        alert("div被单击了");
    }
</script>

在这个案例中，如果单击文字，先提示“段落被单击了”，然后在提示“div被单击了”。因为div是段落的父容器，所以单击段落也就单击了div，所以两者都会触发这个事件。

但是如何去规定两个事件的处理顺序呢？这就是事件的冒泡和捕获。

冒泡：按照从内到外的顺序依次触发，默认方式；

捕获：反之，后面参数在加一个true。

<head>
    <meta http-equiv="Content-Type"content="text/html; charset=utf-8"/>
    <title></title>
    <style type="text/css">
        #div1{
            border: 1px solid blue;
        }
        #div2{
            width:100px;
            height:100px;
            background-color:red;
            margin:10px;
        }
    </style>
</head>
<body>
    <div id="div1">
        <div id="div2"></div>
    </div>
</body>
<script>
    vardiv1 = document.getElementById("div1");
    vardiv2 = document.getElementById("div2");
    /*
    * onmouseenter和onmouseleave 不支持冒泡
    * */
    div1.onmouseover =enter1;
    div2.onmouseover =enter2;
//    div1.onmouseenter = enter1;
//    div2.onmouseenter = enter2;
    functionenter1(){
        alert("进入div1");
    }
    functionenter2(){
        alert("进入div2");
    }
</script>