Dom事件，阻止事件冒泡

最新推荐文章于 2025-04-17 11:42:57 发布

一只顾小白

最新推荐文章于 2025-04-17 11:42:57 发布

阅读量707

点赞数

分类专栏： Java Script

本文链接：https://blog.youkuaiyun.com/weixin_46673313/article/details/108738798

版权

Java Script 专栏收录该内容

15 篇文章

订阅专栏

格式

元素名.事件名称=function(){
    时间所执行的操作
}

其中function()里有一个参数e，打印e会看到事件里的各种属性

鼠标常用事件

名称	含义
onclick	单击鼠标
ondblclick	双击鼠标
oncontextmenu	右击鼠标
onmousedown	鼠标按下
onmouseup	鼠标抬起
onmouseenter	鼠标移入
onmouseleave	鼠标移出
onmousemove	鼠标移动
onmouseover	鼠标进入
onmouseout	鼠标离开
onfocus	获得鼠标焦点
onblur	失去鼠标焦点

键盘事件

键盘事件中常用的是键盘按下事件onkeydown主要用在搜索框或者登陆框时，不用鼠标点击按钮，直接按回车就能直接搜索或者登陆。

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <input type="text" class="keyword">
    <button class="search">搜索</button>
    <script>
        // onkeydown键盘按下事件
        let keyword = document.querySelector('.keyword')
        let search = document.querySelector('.search')
        let fn = function () {
            console.log('搜索商品');
        }
        search.onclick = fn

        keyword.onkeydown = function (e) {
            if (e.keyCode === 13) {
                fn()
            }
        }
    </script>
</body>

</html>

这个页面中，在搜索框输入内容以后，可以点击旁边的搜索按钮，或者输入完内容后直接按回车，都可以触发打印“搜索商品”

innerHTML和innerText的区别

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<div id="div1"></div>
<div id="div2"></div>

<body>
    <script>
        div1.innerHTML = '<span>我是div标签</span>'
        div2.innerText = '<span>我是div标签</span>'
    </script>
</body>

</html>

执行结果为
在这里插入图片描述

区别在于innerHTML会读取标签，连同标签一起打印到页面上
而innerText只会读取纯文本，识别不出HTML标签，所以它将标签转成文本打印出来了，常用innerHTML。

阻止事件冒泡

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .demo {
            width: 300px;
            height: 300px;
            background: red;
            position: relative;
        }

        .child {
            width: 50px;
            height: 50px;
            background: yellow;
            position: absolute;
            right: 0;
            top: 0;
        }
    </style>
</head>

<body>
    <div class="demo">
        <div class="child"></div>
    </div>
    <script>
        // 移动到内部元素时不会重复触发
        let demo = document.querySelector('.demo')
        let child = document.querySelector('.child')

        child.onclick = function () {
            demo.remove()
        }
        demo.onclick = function () {
            location.href = 'https://jd.com'
        }
    </script>
</body>

</html>

在这里插入图片描述

这里有一个页面，上面有两个div分别设置不同的样式，点击红色区域时跳转到京东页面，点击黄色区域时，出现先关闭红色区域然后跳转到京东的操作。
正常的操作中我们可以把这个看成一个广告的弹出框，我想要点击红色区域跳转到京东，点击黄色区域只关闭红色区域，其他不做任何操作，此时就有阻止事件冒泡的操作。用 e.stopPropagation(); //阻止事件冒泡

在代码中添加e.stopPropagation()就可以解决这个问题，我们称之为
“阻止事件冒泡”

 child.onclick = function (e) {
            e.stopPropagation(); //阻止事件冒泡
            demo.remove()
        }