js事件冒泡、事件捕获

事件冒泡

        var box = document.querySelector('.box');
    var content = document.querySelector('.content');
    document.addEventListener('click', function(e) {
      console.log('document');
    }, false);
    document.body.addEventListener('click', function(e) {
      console.log('body');
    }, false);
    box.addEventListener('click', function(e) {
      console.log('box');
    }, false);
    content.addEventListener('click', function(e) {
      console.log('content');
    }, false);
        

当我们点击.content时，事件的执行顺序是content - box - body - document。所以事件冒泡的走向是由子节点向父节点去触发同名事件

事件捕获

        var box = document.querySelector('.box');
    var content = document.querySelector('.content');
    document.addEventListener('click', function(e) {
      console.log('document');
    }, true);
    document.body.addEventListener('click', function(e) {
      console.log('body');
    }, true);
    box.addEventListener('click', function(e) {
      console.log('box');
    }, true);
    content.addEventListener('click', function(e) {
      console.log('content');
    }, true);
        

当我们点击.content时，事件的执行顺序是document - body - box - content。所以事件冒泡的走向是由父节点向子节点去触发同名事件

总结：

addEventListener('', function(e) {}, false);

第三个参数可控制事件是冒泡还是捕获，js逻辑写法的先后顺序与事件触发的顺序无关

js事件冒泡、事件捕获

原文：https://www.cnblogs.com/frogblog/p/10274035.html