冒泡与捕获

点击div

点击button

 <div>
        <button>按钮</button>
  </div>

 document.body.addEventListener('click', (e) => {
            console.log("捕获阶段body")
        }, true)
        document.getElementsByTagName('div')[0].addEventListener('click', (e) => {
            console.log('捕获阶段div')
        }, true)
        document.getElementsByTagName('button')[0].addEventListener('click', (e) => {
            console.log('捕获阶段button')
        }, true)
        document.getElementsByTagName('button')[0].addEventListener('click', (e) => {
            console.log('冒泡阶段button')
        }, false)
        document.getElementsByTagName('div')[0].addEventListener('click', (e) => {
            console.log('冒泡阶段div')
        }, false)
        document.body.addEventListener('click', (e) => {
            console.log("冒泡阶段body"), false
        })

总结：

​ 事件捕获 网景公司 body=》div=>button 更符合计算机的处理流程，内坐标需要window外网传过来相关坐标参数

​ 事件冒泡 ie公司 button=>div=>body 更符合人类实际认知模式，由具体到上层，像金鱼吐泡泡

​ W3C现在的dom流把两种结合了规定了最新的事件流程，先从外到内（捕获）到目标 再从内到外（冒泡）

注意：如果不注册每个事件流阶段的相应的回调函数，整个事件流的进程并不受影响，不影响事件流的传播，只是不会执行相应的回调函数（比如少了打印的），但是整个事件流还是正常进行的。整个事件流的传播不影响，只是你不注册相应的回调就不会打印 和vue的生命周期函数一样

addEventListener() （默认捕获）的第三个参数，true 表示在捕获阶段注册，默认false 表示在冒泡阶段注册

onclick默认冒泡，谷歌浏览器

ie8只有冒泡，现代的浏览器是完整的，标准事件流

阻止冒泡事件：

一般：event.stopPropagation()

ie8: window.event.cancelBubble = true;

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

阻止默认事件

一般： e.preventDefault();

ie8： window.event.returnValue = false;

<a href="www.baidu.com" οnclick="clicked()">点击我并不会跳转</a>
<script>
function stopDefault( e ) {
     // 阻止默认浏览器动作(W3C)
     if ( e && e.preventDefault ) {
         e.preventDefault();
     } else {
        // IE中阻止函数器默认动作的方式
        window.event.returnValue = false;
    }
    return false;
}
function clicked(event) {
    stopDefault(event);
    alert("我阻止了点击A标签的默认事件");
}
</script>

HTML DOM addEventListener() 方法

addEventListener() 方法用于向指定元素添加事件句柄。

element.addEventListener(event, function, useCapture)**

参数值

参数	描述
event	必须。字符串，指定事件名。 注意: 不要使用 "on" 前缀。 例如，使用 "click" ,而不是使用 "onclick"。 提示： 所有 HTML DOM 事件，可以查看我们完整的 HTML DOM Event 对象参考手册。
function	必须。指定要事件触发时执行的函数。 当事件对象会作为第一个参数传入函数。 事件对象的类型取决于特定的事件。例如， "click" 事件属于 MouseEvent(鼠标事件) 对象。
useCapture	可选。布尔值，指定事件是否在捕获或冒泡阶段执行。 可能值:true - 事件句柄在捕获阶段执行false- false- 默认。事件句柄在冒泡阶段执行

兼容

Internet Explorer 8 及更早IE版本不支持 addEventListener() 方法，，Opera 7.0 及 Opera 更早版本也不支持

使用 attachEvent() 方法来添加事件句柄 ：

var x = document.getElementById("myBtn");
if (x.addEventListener) {                    //所有主流浏览器，除了 IE 8 及更早 IE版本
    x.addEventListener("click", myFunction);
} else if (x.attachEvent) {                  // IE 8 及更早 IE 版本
    x.attachEvent("onclick", myFunction);
}

HTML DOM removeEventListener() 方法

提示： 使用 removeEventListener() 方法来移除 addEventListener() 方法添加的事件句柄。

如果要移除事件句柄，addEventListener() 的执行函数必须使用外部函数，如上实例所示 (myFunction)。

匿名函数，类似 "document.removeEventListener("event", function(){ myScript });" 该事件是无法移除的。

removeEventListener()

element.removeEventListener(event, function, useCapture)

参数值

Parameter	Description
event	必须。要移除的事件名称。. 注意:不要使用 "on" 前缀。 例如，使用 "click" ,而不是使用 "onclick"。 提示: 所有 HTML DOM 事件，可以查看我们完整的 HTML DOM Event 对象参考手册。
function	必须。指定要移除的函数。
useCapture	可选。布尔值，指定移除事件句柄的阶段。 可能值：true - 在捕获阶段移除事件句柄false- 默认。在冒泡阶段移除事件句柄注意: 如果添加两次事件句柄，一次在捕获阶段，一次在冒泡阶段，你必须单独移除该事件。

兼容性：

var x = document.getElementById("myDIV");
if (x.removeEventListener) {                   // // 所有浏览器，除了 IE 8 及更早IE版本
    x.removeEventListener("mousemove", myFunction);
} else if (x.detachEvent) {                   // IE 8 及更早IE版本
    x.detachEvent("onmousemove", myFunction);
}

element.addEventListener(event, function, useCapture)

//第一个参数是需要绑定的事件
//第二个参数是触发事件后要执行的函数
//第三个参数默认值是false，表示在事件冒泡阶段调用事件处理函数;如果参数为true，则表示在事件捕获阶段调用处理函数。

react要在捕获阶段触发某个事件处理器，在事件名字后面追加 Capture 字符串；例如，使用 onClickCapture 而不是 onClick 来在捕获阶段处理点击事件

[事件系统 | React (jb51.net)](