详解DOM事件流的三个阶段

PHP中文网 JavaScript 百度已收录

当前第2页 返回上一页

可以看出捕获阶段 事件是从Document节点自上而下向目标节点传播的。

冒泡阶段：

1

2

3

4

5

6

7

8

9

10

11

12

13

<script>

        var son = document.querySelector('.son');

        son.addEventListener('click', function() {

            console.log('son');

        }, false);

        var father = document.querySelector('.father');

        father.addEventListener('click', function() {

            console.log('father');

        }, false);

        document.addEventListener('click', function() {

            console.log('document');

        })

    </script>

控制台输出结果为：

可以看出冒泡阶段 事件是从目标节点自上而下向Document节点传播的。

注意：

1、JS代码只能执行捕获或者冒泡其中一个阶段（要么是捕获要么是冒泡）

2、onclick和attachEvent（ie）只能得到冒泡阶段

3、addEventListener(type, listener[, useCapture]) 第三个参数如果是true，表示在事件捕获阶段调用事件处理程序；如果是false（不写默认是false），表示在事件冒泡阶段调用事件处理程序

4、实际开发中，我们很少使用事件捕获，我们更关注事件冒泡

5、有些事件是没有冒泡的，比如onblur、onfocus、onmouseenter、onmouseleave

6、事件的冒泡有时会带来麻烦，不过是可以被阻止的，方法是：stopPropagation()

stopPropagation() 方法：终止事件在传播过程的捕获、目标处理或冒泡阶段进一步传播。调用该方法后，该节点上处理该事件的处理程序将被调用，事件不再被分派到其他节点。

本文来自 js教程 栏目，欢迎学习！

以上就是详解DOM事件流的三个阶段的详细内容，更多文章请关注木庄网络博客！

返回前面的内容

相关阅读 >>

如何处理javascript内存泄露

javascript中bind是什么意思

哪些游戏是用javascript制作的？

require.context的用法介绍（附示例）

pop()方法怎么用

如何理解javascript是动态语言

屏蔽javascript会怎样

javascript怎么实现日期转换字符串

javascript和java一样吗?有什么区别?

js怎么改变css属性值

更多相关阅读请进入《javascript》频道 >>




标签：

打赏

取消

感谢您的支持，我会继续努力的!

扫码支持
扫码打赏，您说多少就多少

打开支付宝扫一扫，即可进行扫码打赏哦

分享从这里开始，精彩与您同在

相关推荐

评论

管理员已关闭评论功能...