• W3C标准冒泡、捕获机制


    (一) 捕获和冒泡如何相互影响

    我们来做几个任务吧!

    有一个前提,#parent为标签,#child为子标签,他们是嵌套关系支线任务1

    //捕获模式
    document.getElementById('parent').addEventListener('click', function(e) {
        console.log('parent');
    }, true);
    
    //捕获模式
    document.getElementById('child').addEventListener('click', function(e) {
        console.log('child');
    }, true);
    
    结果:
    1. parent
    2. child
    

    支线任务2

    //捕获模式
    document.getElementById('parent').addEventListener('click', function(e) {
        console.log('parent');
    }, true);
    
    //冒泡模式
    document.getElementById('child').addEventListener('click', function(e) {
        console.log('child');
    }, false);
    
    结果:
    1. parent
    2. child
    

    支线任务3

    //冒泡模式
    document.getElementById('parent').addEventListener('click', function(e) {
        console.log('parent');
    }, false);
    
    //捕获模式
    document.getElementById('child').addEventListener('click', function(e) {
        console.log('child');
    }, true);
    
    结果:
    1. child
    2. parent
    

    支线任务4

    //冒泡模式
    document.getElementById('parent').addEventListener('click', function(e) {
        console.log('parent');
    }, false);
    
    //冒泡模式
    document.getElementById('child').addEventListener('click', function(e) {
        console.log('child');
    }, false);
    
    结果:
    1. child
    2. parent
    

    规律

      • 从上面的结果得出,父容器的机制确定,子容器的机制不定,结果是确定的,说明父容器影响传递;
      • 支线任务1-4是点击在子容器上,以子容器作为研究对象;
        1. 如果父容器为捕获(true)机制,先触发本身事件,再到子容器;
        2. 如果父容器为冒泡(false)机制,先触发子容器事件,再到本身;结论1
    • 在嵌套容器上点击时,点击对象是最外层容器;
    • 捕获机制:本身作为第一个执行参考对象,从本身开始向下传递;
    • 冒泡机制:从最底层开始向上传递,直至到达本身(二)stopPropagation方法,阻止了什么?

    前提:如果有stopPropagation方法,均放在console方法后面;

    有一个假设:

    1. 因为stopPropagation是在console后面执行,所以无论何种情况至少出现一个结果;
    2. 有4种策略(true + stopPropagation)、(false + stopPropagation)、(true)、(false),也就是说父容器和子容器的排序有16种;
    3. 因为假设1,所以结果应该(不确定)有4个分别是(parent、child)、(child、parent)、(parent)、(child);

    我们带着这些假设来做任务。

    支线任务5

    //捕获模式
    document.getElementById('parent').addEventListener('click', function(e) {
        console.log('parent')
        e.stopPropagation();
    }, true);
    
    //捕获模式
    document.getElementById('child').addEventListener('click', function(e) {
        console.log('child')
    }, true);
    
    结果:
    1. parent
    

    这个结果说明,stopPropagation方法会阻止传递,无法传达到子节点上。

    所以stopPropagation不是传闻的阻止冒泡方法,而是阻止传递的方法;支线任务6

    支线任务6

    //冒泡模式
    document.getElementById('parent').addEventListener('click', function(e) {
        console.log('parent')
        e.stopPropagation();
    }, false);
    
    //捕获模式
    document.getElementById('child').addEventListener('click', function(e) {
        console.log('child')
    }, true);
    
    结果:
    1. child
    2. parent
    
    按照上面的知识储备,再次论证了结论1

    支线任务7

    //冒泡模式
    document.getElementById('parent').addEventListener('click', function(e) {
        console.log('parent');
    }, false);
    
    //捕获模式
    document.getElementById('child').addEventListener('click', function(e) {
        e.stopPropagation();
        console.log('child');
    }, true);
    
    结果:
    1. child
    
    子容器触发了e.stopPropagation(),导致冒泡链断裂,不再向上冒泡,所以#parent没有被触发!

    支线任务8

    //捕获
    document.getElementById('parent').addEventListener('click', function(e) {
        console.log('parent');
    }, true);
    
    //冒泡
    document.getElementById('child').addEventListener('click', function(e) {
        console.log('child');
        e.stopPropagation();
    }, false);
    
    结果:
    1. parent
    2. child
    

    因为得到了假设2的所有结果,所以不再列举了,来总结一下!

    规律


    这里进行了[parent,child]、[child,parent]、[parent]、[child] 4种结果,但没有枚举,其余12种排序自己撸一遍,可以更深入了解事件机制背后的原理!

    总结

      1. 通过click事件可以推论,事件的触发均从最外层触发(document、html);
      2. 事件的执行是先通过机制再通过回调执行;
      3. 捕获机制:本身作为第一个执行参考对象,从本身开始向下传递;
      4. 冒泡机制:从最底层开始向上传递,直至到达本身;
      5. stopPropagation方法不是大家说的阻止冒泡,而是阻止传递(捕获 + 冒泡);

    转自:https://zhuanlan.zhihu.com/p/24159132

  • 相关阅读:
    不错的电影(先收藏着)
    getchar() getch() getche() gets() puts() scanf()的用法及区别
    java反射获取字段的属性值,以及为字段赋值等方法
    oracle将查询结果横转纵
    关于MySQL 的LEFT JOIN ON的问题
    MySQL表名和数据库关键字相同解决办法
    ajax 后台正常执行 错误类型却是404
    BIT 树状数组 详解 及 例题
    HDU 2689 Sort it (树状数组)
    HDU Cow Sorting (树状数组)
  • 原文地址:https://www.cnblogs.com/chengdabelief/p/6581994.html
Copyright © 2020-2023  润新知