addEventListener 事件監(jiān)聽器

? ??????target.addEventListener(type,?listener[,?options|useCapture])?????添加事件監(jiān)聽

參數(shù)：

???????type?事件類型?(click晚胡、mouseover等蜜暑，注意這里不加on)

???????listener?事件處理函數(shù)

可選參數(shù)：

????????options?配置對(duì)象

????????????capture:??Boolean，表示?listener?會(huì)在該類型的事件捕獲階段傳播到該?EventTarget?時(shí)觸發(fā)痪伦。

????????????once:??Boolean荣回，表示?listener?在添加之后最多只調(diào)用一次遭贸。如果是?true，?listener?會(huì)在其被調(diào)用之后自動(dòng)移除心软。

????????????passive:?Boolean壕吹，設(shè)置為true時(shí)著蛙，表示?listener?永遠(yuǎn)不會(huì)調(diào)用?preventDefault()。如果?listener?仍然調(diào)用了這個(gè)函數(shù)耳贬，

????????????????????????????????????????????客戶端將會(huì)忽略它并拋出一個(gè)控制臺(tái)警告踏堡。

????????useCapture?Boolean，表示?listener?會(huì)在該類型的事件捕獲階段傳播到該?EventTarget?時(shí)觸發(fā)咒劲。

? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ?第三個(gè)參數(shù)不設(shè)置時(shí)顷蟆，默認(rèn)執(zhí)行的是?useCapture?為?false?也就是在冒泡階段執(zhí)行

? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ?下面詳解

事件監(jiān)聽和事件綁定的區(qū)別（盡量用事件監(jiān)聽）

事件捕獲

? ??????當(dāng)事件發(fā)生時(shí)，最先得到通知的是window腐魂，然后是document帐偎，由上至下逐級(jí)依次而入，直到真正觸發(fā)事件的那個(gè)元素(目標(biāo)元素)為止蛔屹，

? ??????這個(gè)過程就是捕獲削樊。

事件冒泡

? ??????接下來，事件會(huì)從目標(biāo)元素開始起泡兔毒，由下至上逐級(jí)依次傳播漫贞，直到window對(duì)象為止，這個(gè)過程就是冒泡育叁。

事件流：事件冒泡? ? ?小到大

????????js當(dāng)中有一個(gè)特性：?事件會(huì)冒泡

????????????????// DOM樹?

????????????????//?html?>?body?>?div?>?p?

????????????????//?p標(biāo)簽?包含在?div/body/html

????????????????//?執(zhí)行子元素事件同時(shí)迅脐，父元素如有同樣事件，也會(huì)執(zhí)行

????????????????//?事件冒泡的執(zhí)行順序??：?由小到大??p?>?div?>?body?>?html

事件流：事件捕獲? ? ? 大到小

????????addEventListener('ev',fn,[Boolean,{}])??默認(rèn)冒泡執(zhí)行的

????????????????//?默認(rèn)第三個(gè)參數(shù)是?false?（不捕獲）

????????????????//?第三個(gè)參數(shù)：如果是布爾值：true?是進(jìn)行捕獲執(zhí)行擂红，?false?不捕獲

????????????????//?事件捕獲：?由大到小??html?>?body?>?div?>?p?

????????????????//?第三個(gè)參數(shù)?還可以?傳遞對(duì)象：

第三個(gè)參數(shù)?還可以?傳遞對(duì)象：{}

? ? ? ? capture:true/false?是否在捕獲階段執(zhí)行

? ? ? ? once:true/false?只執(zhí)行一次事件

? ??????passive:false/true? 阻止取消默認(rèn)事件????true(不允許阻止)?仪际、?false?（允許阻止）

preventDefault 阻止默認(rèn)行為

removeEventListener 取消事件監(jiān)聽 （不能用匿名函數(shù)）

????????removeEventListener(event,fn)

????????綁定的事件函數(shù)-必須是命名函數(shù)！

Event 事件對(duì)象

? ??????Event.target 事件觸發(fā)的目標(biāo)源元素? ? ? ? ? ?target翻譯是目標(biāo)

? ??????Event.currentTarget?事件綁定的元素?? ? ????current翻譯是正在發(fā)生的; 當(dāng)前的; 現(xiàn)在的

事件委托（事件代理）

? ??????e.target?事件源

????????事件代理(事件委托)：利用冒泡機(jī)制將事件統(tǒng)一委托在父級(jí)上執(zhí)行昵骤，在通過事件源獲取到相關(guān)元素

????優(yōu)點(diǎn)：

????????????1.減少事件注冊(cè)，節(jié)省內(nèi)存

????????????2.可以給將來的元素添加事件（在不刷新頁面的情況下）

????缺點(diǎn)：

????????????1.建議就近委托肯适，否則會(huì)導(dǎo)致瀏覽器頻繁的調(diào)用處理函數(shù)

????????????2.祖父級(jí)和事件源之間不能有阻止冒泡变秦，容易出現(xiàn)誤判，所以寫好相應(yīng)判斷

????????加個(gè)判斷框舔，這樣點(diǎn)擊的如果是p蹦玫，不變化

e.bubbles?是否冒泡

? ??????e.stopPropagation()?和?e.cancelBubble? ??取消事件冒泡

cancelBubble 取消事件冒泡-1

stopPropagation?取消事件冒泡-2