React Redux ES6 已更新完，可以在主頁中找到相關文章，小編辛苦碼字，喜歡的點個贊吧
事件捕獲和事件冒泡
盒子多層嵌套時，當你點擊某個盒子，瀏覽器實際上並不知道點的是哪個，它得一層層去查，查到有點擊事件則執行。
歷史初期查找方案：
ie是從最內層開始查，直到查到最外層，即為冒泡流；
而網景提出的是從最外層開始查，即為捕獲流；
現階段方案：
W3C提出了都支持方案，但ie低版本只支持冒泡流，為了兼容建議使用冒泡流。
事件綁定的方式
1. dom裡直接配置屬性
按鈕
考慮js和html的分離不建議使用此方式
2. js操作dom屬性綁定
document.getElementById('btn').onclick = function(e){
...
}
3. 事件監聽
**非ie8-**
綁定：
target.addEventListener (type, fn, true/false)
移除：
target.removeEventListener (type, fn, true/false)
type指事件類型；fn指執行函數；設為true指使用捕獲流（實際上目前第3個參數可以是個對象，後期有需要再補充）
區別：除了可以設置捕獲，事件監聽還可以綁定多個事件，而使用屬性綁定只能有一個。
document.getElementById('e').addEventListener('click',function (event) {
console.log('e',event)
},true);
**ie8-**
綁定：target.attachEvent(type, fn)
移除：target.detachEvent(type, fn)
ie是冒泡流，需要注意的是fn裡的this指向window（正常指向觸發事件的元素，這很有用）
注：各種瀏覽器默認的都是冒泡，避免使用捕獲
event 對象
使用注意：var e= event || window.event （火狐使用window.event會報錯）。
表示在DOM中發生的任何事件，在事件處理函數被傳入，主要關注2個屬性：currentTarget target
1. event.currentTarget 當前目標元素（綁定事件的元素）
2. event.target / this / event.srcElement(ie8-) 觸發目標元素（從哪個元素開始觸發的，隨著冒泡不斷變化）
//加上div#f內套div#e
document.getElementById('e').addEventListener('click',function (e) {
console.log(e.target); //div#f
console.log(e.currentTarget); //div#e
},true);
注：有時可能只希望觸發一個事件或者事件委託，可以使用此方式
阻止默認事件
比如用在阻止radio/checkbox選中
1. 對於onclick綁定方式：return false
2. 對於監聽綁定方式：
event.preventDefault()
window.event.returnValue = false （ie8-）
事件委託
即把事件綁定在父節點上，通常用在子節點不存在時的情況，或者子節點多且綁定相同事件的情況
//如下，div#f不存在的情況下綁定好事件
document.getElementById('e').addEventListener('click',function (e) {
var e=e||window.event;
var target=e.target||e.srcElement;
if(target.id==='f'){
alert('find children f')
}
});
document.getElementById('e').innerHTML='
';
徵稿
坑
你在平時開發中也踩過坑嗎？把踩過的‘坑’分享給大家，私信小編
文章 & 筆記
報酬
你除了把此當作興趣之外，還可以獲得此號當天的閱讀收益——很少 （一個悲傷的表情）
更多文章可以在個人主頁中查看
【前方霧大，關注一下不迷路 = 。=】
【html】【css】【html】【css】【前端開發】【javascript】【html】【javascript】【前端開發】【css】【javascript】【css】【前端開發】
閱讀更多 全棧前端 的文章
