1话肖，事件冒泡北秽，事件捕獲
百度到的事件冒泡：當事件發(fā)生后，這個事件就要開始傳播(從里到外或者從外向里)最筒。為什么要傳播呢贺氓？因為事件源本身（可能）并沒有處理事件的能力，即處理事件的函數(shù)（方法）并未綁定在該事件源上床蜘。例如我們點擊一個按鈕時辙培，就會產(chǎn)生一個click事件，但這個按鈕本身可能不能處理這個事件邢锯，事件必須從這個按鈕傳播出去扬蕊，從而到達能夠處理這個事件的代碼中（例如我們給按鈕的onclick屬性賦一個函數(shù)的名字，就是讓這個函數(shù)去處理該按鈕的click事件）弹囚，或者按鈕的父級綁定有事件函數(shù)，當該點擊事件發(fā)生在按鈕上领曼，按鈕本身并無處理事件函數(shù)鸥鹉，則傳播到父級去處理蛮穿。
理解：事件冒泡會從當前觸發(fā)的事件目標一級一級往上傳遞，依次觸發(fā)毁渗，直到document為止践磅。
代碼實踐：
<!DOCTYPE html>
<!--[if lt IE 7]>? ? ? <html class="no-js lt-ie9 lt-ie8 lt-ie7"> <![endif]-->
<!--[if IE 7]>? ? ? ? <html class="no-js lt-ie9 lt-ie8"> <![endif]-->
<!--[if IE 8]>? ? ? ? <html class="no-js lt-ie9"> <![endif]-->
<!--[if gt IE 8]><!--> <html class="no-js"> <!--<![endif]-->
? ? <head>
? ? ? ? <meta charset="utf-8">
? ? ? ? <meta http-equiv="X-UA-Compatible" content="IE=edge">
? ? ? ? <title></title>
? ? ? ? <meta name="description" content="">
? ? ? ? <meta name="viewport" content="width=device-width, initial-scale=1">
? ? </head>
? ? <style>
? ? #box1{
? ? ? ? width: 300px;
? ? ? ? height: 300px;
? ? ? ? background: #eee;
? ? ? ? position: relative;
? ? ? ? margin: 0 auto;
? ? ? ? padding: 50px;
? ? ? ? box-sizing: border-box;
? ? }
? ? #box2{
? ? ? ? width: 200px;
? ? ? ? height: 200px;
? ? ? ? background: rgb(196, 142, 142);
? ? ? ? position: relative;
? ? ? ? margin: 0 auto;
? ? ? ? padding-top: 50px;
? ? ? ? box-sizing: border-box;
? ? }
? ? #box3{
? ? ? ? width: 100px;
? ? ? ? height: 100px;
? ? ? ? background: rgb(63, 173, 118);
? ? ? ? position: relative;
? ? ? ? margin: 0 auto;
? ? ? ? padding-top: 50px;
? ? ? ? box-sizing: border-box;
? ? }
? ? </style>
? ? <body>
? ? ? ? <div id="box1">
? ? ? ? ? ? <div id="box2">
? ? ? ? ? ? ? ? <div id="box3">
? ? ? ? ? ? ? ? </div>
? ? ? ? ? ? </div>
? ? ? ? </div>
? ? </body>
? ? <script>
? ? ? ? function say1(){
? ? ? ? ? ? console.log(1)
? ? ? ? }
? ? ? ? function say2(){
? ? ? ? ? ? console.log(2)
? ? ? ? }
? ? ? ? function say3(){
? ? ? ? ? ? console.log(3)
? ? ? ? }
? ? ? ? document.getElementById('box1').addEventListener("click",say1,false)
? ? ? ? document.getElementById('box2').addEventListener("click",say2,false)
? ? ? ? document.getElementById('box3').addEventListener("click",say3,false)
? ? </script>
</html>
點擊最里面的元素box3
點擊box2
點擊box1
可以發(fā)現(xiàn)當點擊子元素時，click事件會向上冒泡灸异，觸發(fā)上一層父元素的click事件府适，直到document為止
在上面的列子中注冊事件時是這樣寫的
??????? document.getElementById('box1').addEventListener("click",say1,false)
? ? ? ? document.getElementById('box2').addEventListener("click",say2,false)
? ? ? ? document.getElementById('box3').addEventListener("click",say3,false)
其中的false代表的就是事件冒泡，如果是true就是事件捕獲肺樟，默認是false檐春；假如修改成true會怎么樣呢？
當點擊最里面的元素控制臺輸出
所以冒泡機制是從里向外觸發(fā)事件么伯，捕獲機制是從外向里觸發(fā)事件
那么能阻止事件冒泡嗎
在需要阻止的事件函數(shù)里加上
event.stopPropagation();
上面列子box3阻止冒泡修改say3函數(shù)
function say3(event){
? ? ? ? ? ? console.log(3)
? ? ? ? ? ? event.stopPropagation();
? ? ? ? }
結(jié)果點擊box3時控制臺只輸出3
另外ie中事件對象是window.event疟暖，所以寫法有所區(qū)別
2，事件委托
事件委托又稱之為事件代理田柔，簡單來說就是利用事件冒泡俐巴，通過監(jiān)聽一個父元素，來給不同的子元素綁定事件硬爆。
假如有一個ul元素里面有許多l(xiāng)i元素欣舵，我們就可以通過給ul元素綁定事件從而達到給每個li元素綁定事件的目的
html:
<ul id="my_ul">
? ? ? ? ? ? <li>1</li>
? ? ? ? ? ? <li>2</li>
? ? ? ? ? ? <li>3</li>
? ? ? ? ? ? <li>4</li>
? ? ? ? ? ? <li>5</li>
? ? ? ? ? ? <li>6</li>
? ? ? ? ? ? <li>7</li>
? ? ? ? ? ? <li>8</li>
? ? ? ? ? ? <li>9</li>
? ? ? ? </ul>
js:
document.getElementById('my_ul').addEventListener('click',function(event){
? ? ? ? ? ? console.log(event.target.innerText)
? ? ? ? })
當我們點擊li元素時就會觸發(fā)my_ul中的click事件，同時控制臺就輸出了對應得li里面得數(shù)字
