事件的传播机制

一、事件的传播机制

以点击事件为例

<div id="outer">
    <div id="inner">
        <div id="center">

        </div>
    </div>
</div>

<script>
    //4.事件的传播机制
    //事件的默认传播机制：
    //分为三个阶段：
    //捕获阶段：从外向内依次查找元素
    //目标阶段：当前事件源(当前触发的这个元素)本身的操作
    //冒泡阶段：从内到外依次触发相关的行为

    //我们最常用的就是冒泡阶段

    var outer = document.getElementById("outer"),
        inner = document.getElementById("inner"),
        center = document.getElementById("center");
    // document.body.onclick = function (e) {
    //     console.log("body");
    // };
    // outer.onclick = function (e) {
    //     console.log("outer");
    // };
    // inner.onclick = function (e) {
    //     console.log("inner");
    // };
    // center.onclick = function (e) {
    //     console.log("center");
    // };

    //center.onclick = function () {];  叫DOM0级事件绑定
    //DOM0级事件绑定的方法，都是在冒泡阶段执行的方法
    //用DOM0级事件绑定，给元素的某一个行为绑定的方法，都是在行为触发后的
    //冒泡阶段把方法执行的

    //什么叫做冒泡阶段？
    //第一阶段，当前center的click行为被触发，如果给其绑定了方法，首先把center对应的方法执行。（这是目标阶段完成的）
    //第二阶段，不仅仅center的click行为被触发了，它所有父级元素的click行为也会被触发。
    //接下来是inner的click行为被触发，如果给inner也绑定了方法，inner对应的方法也会执行。
    //接下来是outer的click行为被触发，如果给outer也绑定了方法，outer对应的方法也会执行。
    //同理依次查找 outer, body, html, document

    //注意：每个浏览器传播到的最顶层是不一样的，谷歌中可以传播到document，但是在IE中只能
    //传播到html
    //我们平常只会用到body这一层

    //e目前是鼠标事件对象
    //输出四次 MouseEvent


    //怎么控制让它在捕获阶段完成呢？
    //在捕获阶段完成，只能使用DOM2级事件绑定，addEventListener这个方法去完成
    //第一个参数是行为的类型，第二个参数是给当前的行为绑定的方法
    //行为触发的时候，会执行这个方法，这个方法也可以使用e，浏览器都会传一个e进来
    //第三个参数是控制在哪个阶段发生:true在捕获阶段发生，false就是在冒泡阶段发生
    //写false，说明这个方法，是在冒泡阶段发生
    document.body.addEventListener("click", function (e) {
        console.log("body");
    }, false);

    //写true，表示在捕获阶段执行
    //捕获阶段的，先执行
    //因为执行顺序是先捕获，再目标，然后再冒泡
    //捕获阶段是，从外向内依次查找，只有outer是控制在捕获阶段的
    //1.首先捕获阶段，先找document,看是否给它绑定方法，再找html,也没有给它绑定方法，
    //然后再找body,也没有在捕获阶段给它绑定方法，然后再找outer,在捕获阶段绑定了一个方法，
    //输出"outer",然后找到inner，没有绑定方法，最后找到center，绑定了方法，输出"center1"

    //2.走到目标阶段，找到center,有行为，也绑定了事件，输出"目标阶段"

    //3.走到冒泡阶段，又内到外，先找到了center，绑定了事件，输出"center2"，
    //然后找到inner,绑定了事件，输出"inner"，然后走到outer,在冒泡阶段，没有绑定事件，
    //所以不用管，然后找到body,在冒泡阶段绑定了事件，输出"body",然后找到html,在
    //冒泡阶段没有绑定事件，不用管，最后找到document,没有绑定事件，也不用管

    //所以整个执行输出的结果是:
    //outer
    //center1
    //目标阶段
    //center2
    //inner
    //body
    outer.addEventListener("click", function (e) {
        console.log("outer");
    }, true);
    center.addEventListener("click", function (e) {
        console.log("center1");
    }, true);

    //目标阶段
    center.onclick = function (e) {
        console.log('目标阶段');
    };


    //写false,表示在冒泡阶段执行
    center.addEventListener("click", function (e) {
        console.log("center2");
    }, false);

    //写false,表示在冒泡阶段执行
    inner.addEventListener("click", function (e) {
        console.log("inner");
    }, false);

    //冒泡行为，是浏览器默认有的，只要当前元素被触发，那么就会由内向外传播
    //不管你有没有给它绑定方法
    //所以，不管有没有给center绑定点击事件，冒泡行为依然会执行。

    //注意：不管center有没有绑定事件，只要点击行为触发，就会存在传播。
    //怎么传播，先捕获，再目标，再冒泡，不管点击触发的元素，有没有绑定事件。


</script>