~~~ /* * 事件的傳播機制 * 冒泡傳播：觸發當前元素的某一個事件（點擊事件）行為，不僅當前元素事件行為觸發， * 而且其祖先元素的相關事件行為也會依次被觸發，這種機制就是“事件的冒泡傳播機制” */ ~~~    ~~~ /*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); }; /* * xxx.onxxx=function(){} DOM0事件綁定，給元素的事件行為綁定方法，這些方法都是在當前元素事件行為的冒泡階段(或者目標階段)執行的 * * xxx.addEventListener('xxx',function(){},false) 第三個參數FALSE也是控制綁定的方法在事件傳播的冒泡階段(或者目標階段)執行；只有第三個參數為TRUE才代表讓當前方法在事件傳播的捕獲階段觸發執行（這種捕獲階段執行沒啥實際意義，項目中不用）； */ /* * 不同瀏覽器對于最外層祖先元素的定義是不一樣的 * 谷歌：window->document->html->body... * IE高：window->html->body... * IE低：html->body... */ /* * 關于事件對象的一些理解 * 1.事件對象是用來存儲當前本次操作的相關信息，和操作有關，和元素無必然關聯 * 2.當我們基于鼠標或者鍵盤等操作的時候，瀏覽器會把本次操作的信息存儲起來（標準瀏覽器存儲到默認的內存中（自己找不到），IE低版本存儲到window.event中了），存儲的值是一個對象（堆內存）；操作肯定會觸發元素的某個行為，也就會把綁定的方法執行，此時標準瀏覽器會把之前存儲的對象（準確來說是堆內存地址）當做實參傳遞給每一個執行的方法，所以操作一次，即使再多方法中都有EV，但是存儲的值都是一個（本次操作信息的對象而已） */ ~~~