JS事件传播机制

事件的传播机制

什么是事件？【DOM事件】

• 事件就是一件事情或者一个行为（对于元素来说，他的很多事件都是天生自带的），只要我们去操作这个元素，就会触发这些行为

• 事件绑定：给元素天生自带的事件行为绑定方法，当事件触发，会把对应的方法执行

   oBox.onclick = function(){}
  

• 冒泡传播：触发当前元素的某一个事件行为，不仅当前元素事件行为触发，而且其祖先元素的相关事件行为也会依次被触发，这种机制就是‘事件的冒泡传播机制’

• xxx.onxxx=function(){} DOM0事件绑定，给元素的事件行为绑定方法，这些方法都是在当前元素事件行为的冒泡阶段(或者目标阶段)执行的

• xxx.addEventListener(‘xxx’,function(){},false) 第三个参数FALSE也是控制绑定的方法在事件传播的冒泡阶段(或者目标阶段)执行；只有第三个参数为TRUE才代表让当前方法在事件传播的捕获阶段触发执行（这种捕获阶段执行没啥实际意义，项目中不用）；

• 不同浏览器对于最外层祖先元素的定义是不一样的

• 谷歌：window->document->html->body…

• IE高：window->html->body…

• IE低：html->body…

JS代码

window.onclick = function () {
    console.log('window');
};

document.onclick = function () {
    console.log('document');
};

document.documentElement.onclick = function () {
    console.log('html');
};
let aa = null;
document.body.onclick = function (ev) {
    console.log('body', ev, ev === aa);//=>TRUE
};

outer.onclick = function (ev) {
    console.log('outer', ev, ev === aa);//=>TRUE
};

inner.onclick = function (ev) {
    /*ev = ev || window.evenet;
    ev.stopPropagation ? ev.stopPropagation() : ev.cancelBubble = true;*/
    aa = ev;
    console.log('inner', ev);
};

HTML+CSS

<style>
        #box {
            margin: 20px auto;
            width: 100px;
            height: 100px;
            background: red;
        }

        #outer {
            position: absolute;
            top: 30px;
            left: 30px;
            width: 200px;
            height: 200px;
            background: red;
            cursor: pointer;
        }

        #inner {
            position: absolute;
            top: 30px;
            left: 30px;
            width: 100px;
            height: 100px;
            background: green;
            cursor: pointer;
        }
    </style>


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

• 关于事件对象的一些理解
• 1.事件对象是用来存储当前本次操作的相关信息，和操作有关，和元素无必然关联
• 2.当我们基于鼠标或者键盘等操作的时候，浏览器会把本次操作的信息存储起来（标准浏览器存储到默认的内存中（自己找不到），IE低版本存储到window.event中了），存储的值是一个对象（堆内存）；操作肯定会触发元素的某个行为，也就会把绑定的方法执行，此时标准浏览器会把之前存储的对象（准确来说是堆内存地址）当做实参传递给每一个执行的方法，所以操作一次，即使再多方法中都有EV，但是存储的值都是一个（本次操作信息的对象而已）