事件捕获与冒泡

最新推荐文章于 2023-07-13 11:46:30 发布

小崔崔的博客

最新推荐文章于 2023-07-13 11:46:30 发布

阅读量387

点赞数

文章标签：事件捕获与冒泡

本文链接：https://blog.csdn.net/qq_39430589/article/details/76941567

版权

事件源

事件名

事件注册

事件处理

以火灾为例：

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

事件源：xx大酒店201房间

事件名：火灾

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

事件处理：喷水

10.2常用事件

鼠标常用事件：

（1）click单击事件

在这个案例中，事件源是id为p1的元素，事件名就是单击，事件注册时οnclick="fun()"

，也就是说当单击id为p1的元素是，就交由fun函数来处理

（2）双击事件

<body>
    <div id="div1"οnclick="zoomout()"οndblclick="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";
    }

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

<divid="div1"οnmοusedοwn="zoomout()"οnmοuseup="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="400px";
        div1.style.height="400px";
    }

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

<divid="div1"οnmοuseenter="red()"οnmοuseleave="blue()">

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

（5）onmouseover /onmouseout

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

（6）鼠标移动事件onmousemove

键盘事件：

keypress ：

<inputtype="text"οnkeypress="search(event)">
</body>
<script>
    functionsearch(e) {
        if(e.keyCode== 13){
            varwhat = document.getElementById("what");
            alert("开始搜索:"+what.value);
        }
    }

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

keypress ：事件只能捕获可打印字符的键，不能捕获诸如shift、crtl、alt等不可打印字符的按键

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

（2）Keydown、keyup

<inputtype="text"οnkeydοwn="keydown(event)">
</body>
<script>

    functionkeydown(e) {
        alert(e.keyCode);
    }

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

<body οnkeydοwn="move(event)">
    <img id="img1"src="man.png"alt=""/>
</body>
<script>
    vartop1 = 0;
    varleft = 0;
    functionmove(e) {
        switch(e.keyCode) {
            case37:
                left -= 5;
                break;
            case38:
                top1 -= 5;
                break;
            case39:
                left += 5;
                break;
            case40:
                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:值改变事件

10.3事件注册

三种方法：

（1）使用onXXX属性，比如：οnclick=“fun()”

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

（3）通过addEventListener注册

//注册第二种方法
var txt1 =document.getElementById("txt1");
txt1.onblur = blur2();
//第三种方法
txt1.addEventListener("change",change);
function focus1(){
    vartxt1 = document.getElementById("txt1");
    txt1.style.backgroundColor= "blue";
}
function blur2(){
    vartxt1 = document.getElementById("txt1");
    txt1.style.backgroundColor= "red";

}
function change(){
    alert("值改变了")
}

后两种方法有什么好处？将页面的内容、样式和行为分离，内容和样式可能是美工人员完成，行为（实际上是JS的内容）往往是程序圆的事。分离后利于分工合作。

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

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

10.4捕获与冒泡

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

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

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

捕获：反之后面添加一个true

  <styletype="text/css">
        #div2{
            width:100px;
            height:100px;
            background-color:#3b30ff;
            margin:10px;
        }
        #div1{
            width:600px;
            height:200px;
            border:1px dashed#b0ff94;
        }
    </style>
</head>
<body>
    <div id="div1">
    <div id="div2">

    </div>
</div>
</body>
<script>
    vardiv1 =document.getElementById("div1");
    vardiv2 =document.getElementById("div2");
    div1.onmouseenter=enter1;
    div2.onmouseenter=enter2;//onmouseenter阻断了冒泡
   /* div1.onmouseover =enter1;
    div2.onmouseover =enter2;*/

    functionenter1(){
        alert("进入div1")
    }
    functionenter2(){
        alert("进入div2")
    }

</script>

当使用onmouseenter事件时，当里层的div触发进入事件时，处理完了就完事了（阻断冒泡），而当时用onmouseover事件时，当里层的div触发进入事件时，处理完了还会冒泡给父容器处理进入事件

小崔崔的博客

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
事件捕获与冒泡

事件源事件名事件注册事件处理以火灾为例：粤商大酒店201房间发生火灾，119电话报警，南湖区消防支队出警，赶赴现场通过喷火作业成功扑灭或事件源：粤商大酒店201房间事件名：火灾事件注册：事先已经规划好片区，粤商大酒店所属片区归南湖区消防支队来负责事件处理：喷水10.2常用事件鼠标常用事件：（1）click单击事件 function
复制链接

扫一扫