【javaScript】事件冒泡与传播传播

• 问题描述：

用户操作一个节点，该节点会响应函数这是一定的，那么当事件发生在他的爸爸身上时，他会相应吗？而当事件发生在他的儿子身上时，他会相应吗？显而易见，后者成立，可以理解为全局变量会在局部函数中被改变。

• 加深理解:

这种后代向祖先传递事件的过程是怎么发生的呢？

1.捕获阶段：
事件从祖先传递给后代，但是不触发事件

2.目标阶段：
上一步停止于最年起且有绑定事件响应函数的后代

3.传播阶段：
由后代至祖先，层层向外，触发事件（有的祖先没有绑定函数也没事，继续传递触发）

注意： addEventListener（）的第三个参数，false传播阶段执行事件 true捕获阶段执行事件，一般使用false

• 取消冒泡的方法：

    function stopBubble(e) {
    
        //如果提供了事件对象，则这是一个非IE浏览器
        if (e && e.stopPropagation) {
            //因此它支持W3C的stopPropagation()方法
            e.stopPropagation();
        }
  
        else {
            //否则，我们需要使用IE8的方式来取消事件冒泡
            window.event.cancelBubble = true;
        }
    }
    
        c1.onclick = function (e) {
            alert('单击了div');
            stopBubble(e);
        };
  
        c2.onclick = function (e) {
            alert('单击了div');
            stopBubble(e);
        };
  
        document.onclick = function (e) {
            alert('单击了document');
        };
  复制代码