JavaScript-DOM事件流

最新推荐文章于 2022-03-29 10:13:03 发布

HarryFooty

最新推荐文章于 2022-03-29 10:13:03 发布

阅读量104

点赞数

分类专栏：笔记

本文链接：https://blog.csdn.net/weixin_44500833/article/details/117386823

版权

笔记专栏收录该内容

64 篇文章 1 订阅

订阅专栏

DOM事件流

事件流描述的是：从页面中接收事件的顺序。
事件发生时会在元素节点之间按照特点的顺序传播，这个传播过程即DOM事件流。
DOM事件流分为3个阶段：

捕获阶段
当前目标阶段
冒泡阶段

事件捕获：网景最早提出，由DOM最顶层节点开始，然后逐级乡下传播到最具体的元素接受的过程。
事件冒泡：IE最早提出，事件开始时由具体的元素接收，然后逐级向上传播到DOM最顶层节点的过程。

注意

JS代码中只能执行捕获或者冒泡其中的一个阶段。
onclick和attachEvent只能得到冒泡阶段。
addEventListener(type,listener[,useCapture])第三个参数如果是true，表示在事件捕获阶段调用处理程序；如果是false（不写默认就是false），表示在事件冒泡阶段调用事件处理程序。
实际开发中我们很少使用事件捕获，我们更关注事件冒泡。
有些事件是没有冒泡的，比如onblur、onfocus、onmouseenter、onmouseleave
事件冒泡有时候会带来麻烦，有时候做某些事情会带来巧妙的帮助

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

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<style>
    .father {
        width: 40vh;
        height: 40vh;
        background-color: pink;
        margin: auto;
        padding: 20vh;
    }
    
    .son {
        width: 100%;
        height: 100%;
        color: white;
        text-align: center;
        line-height: 40vh;
        background-color: purple;
        cursor: pointer;
    }
</style>

<body>
    <div class="father">
        <div class="son">点击son盒子</div>
    </div>
</body>
<script>
    // 事件流的3个阶段
    // 1.JS代码中只能执行捕获或者冒泡
    // 2.onclick和attachEvent(ie)
    // 3.捕获阶段，如果addEventListener第3个参数是true，那么处于捕获阶段:document->html->body->father->som
    var son = document.querySelector('.son')
    son.addEventListener('click', function() {
        alert('son');
    })
    var father = document.querySelector('.father')
    father.addEventListener('click', function() {
        alert('father');
    }, true)
    document.addEventListener('click', function() {
        alert('document');
    }, true)
</script>

</html>

事件对象

event是一个事件对象，写到倾听函数的小括号中，当形参来看
事件对象只有有了事件才会存在，它是系统给我们自动创建的，不需要我们传递参数
事件对象是我们时间的一系列相关数据的集合，跟事件相关的，比如鼠标点击里面就包含了鼠标的相关信息，如鼠标坐标，如果是键盘事件能获取用户按下哪个按键。
事件对象我们可以自定义名称，event、evt、e
事件对象也有兼容性问题，ie678，需要通过window.event，兼容的写法：e=e||window.event;

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

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<style>
    div {
        width: 50vh;
        height: 50vh;
        background-color: pink;
    }
</style>

<body>
    <div>123</div>
</body>
<script>
    // 事件对象
    var div = document.querySelector('div');
    // 1
    div.onclick = function(e) {
        e = e || window.event
        console.log(e)
    };
    // 2
    // div.addEventListener('click', function(event) {
    //     console.log(event)
    // });
</script>

</html>

事件对象

常见属性和方法

对象属性和方法	说明	评价
e.target	返回触发事件的对象	标准
e.srcElement	返回触发事件的对象	非标准，ie678使用
e.type	返回事件的类型，比如click、mouseover，不带on	\
e.stopPropagation()	阻止冒泡	标准
e.cancelBubble	该属性阻止冒泡，非标准，ie678使用	\
e.preventDefaule()	该属性阻止默认事件（默认行为）	标准，比如不让链接跳转
e.returnValue	该属性阻止默认事件（默认行为）	非标准，ie678使用，比如不让链接跳转

var ul = document.querySelector('ul');
    ul.addEventListener('click', function(e) {
            console.log(this);
            console.log(e.currentTarget); //跟this相似，但是ie678不兼容
            console.log(e.target)
        })
// 了解兼容性
// div.onclick = function(e) {
//     e = e || window.event;
//     console.log(e.target || e.srcElement);
// }

阻止默认事件

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

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <a href="#">百度</a>
</body>
<script>
    var a = document.querySelector('a');
    a.addEventListener('click', function(e) {
        e.preventDefault()
    })

    // 3.传统注册方式
    a.onclick = function() {
        // 普通浏览器 e.preventDefault();方法
        // e.preventDefault();
        // 低版本浏览器ie678,returnValue属性
        // e.returnValue;
        // 我们可以利用return false也能阻止默认行为，没有兼容性问题,但是return后面的代码就不知醒了。
        return false;
        alert(11);
    }
</script>

</html>

阻止事件冒泡的兼容性方案

if(e&&e.stopPropagation){
	e.stopPropagation();
}else{
	window.event.cancelBubble=true;
}

事件委托（代理、委派）

JQuery中称为事件委派
不是每个子节点单独设置事件监听器，而是事件监听器设置在其父节点上，然后利用冒泡源理影响设置的每个子节点。

具体实例：给ul注册点击事件，然后利用事件对象的target来找到当前点击的li，因为点击li，事件会冒泡到ul上，ul有注册事件，就会触发事件监听器。

主要作用：只操作了一次DOM，提高了程序的性能。

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

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <ul>
        <li>li1</li>
        <li>li2</li>
        <li>li3</li>
        <li>li4</li>
        <li>li5</li>
    </ul>
</body>
<script>
    var ul = document.querySelector('ul');
    ul.addEventListener('click', function(e) {
        alert('123')
        e.target.style.backgroundColor = 'pink' // 这个可以得到我们点击的对象
    })
</script>

</html>

HarryFooty

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
2
评论
JavaScript-DOM事件流

DOM事件流事件流描述的是：从页面中接收事件的顺序。事件发生时会在元素节点之间按照特点的顺序传播，这个传播过程即DOM事件流。DOM事件流分为3个阶段：捕获阶段当前目标阶段冒泡阶段#mermaid-svg-Tp1bYyk60qrzFnLI .label{font-family:'trebuchet ms', verdana, arial;font-family:var(--mermaid-font-family);fill:#333;color:#333}#mermaid-svg-Tp1b
复制链接

扫一扫