dom2是dom的升級
- 事件的傳播機(jī)制：
冒泡模型：從當(dāng)前點(diǎn)擊依次向父級傳遞
事件捕獲：從document依次向下傳遞
DOM事件流（標(biāo)準(zhǔn)瀏覽器）：從根節(jié)點(diǎn)向下傳遞给赞，經(jīng)過事件點(diǎn)再向父級傳遞 - 指定事件處理程序
把一個方法賦值給一個元素的事件處理程序?qū)傩?br>btn.onclick=function(){}綁定事件是同步的刺桃，點(diǎn)擊事件是異步的 - .addEventListener('事件'，'function')
參數(shù)
①事件類型
②事件處理方法
③布爾參數(shù)匪傍，true表示在捕獲階段調(diào)用事件處理程序考榨，false表示在冒泡階段處理（默認(rèn)）。
不會被覆蓋，可以綁定多個事件誉结。
先執(zhí)行捕獲階段，再執(zhí)行冒泡階段
btn.addEventListener('click',function(e){
console.log(this)
console.log(btn)
console.log(e.target)
//三個的結(jié)果是一樣的
})
- removeEventLiistener()移除事件
移除事件不能添加匿名函數(shù)
//移除事件
var btn = document.querySelector('.btn')
var event = function (){
console.log('hh')
}
btn.addEventListener('click',event,false)
btn.removeEventListener('click',event,false)
IE兼容
attachEvent('onclick',event) 綁定事件有on券躁，只有冒泡階段因此沒有第三個參數(shù)惩坑；this返回的是window對象，不是當(dāng)前對象
事件對象
bubbles 事件是否冒泡
target 事件的目標(biāo)元素
stopPropagation() 取消事件進(jìn)一步捕獲或冒泡
preventDefault() 取消事件默認(rèn)行為
var link = document.querySelector('a')
link.onclick = function(e){
e.preventDefault()//阻止默認(rèn)要打開鏈接的操作
console.log(this.href)//輸出這個元素的href
if(/baidu.com/.test(this.href)){//如果這個鏈接符合www.baidu.com
location.href = this.href //把這個鏈接賦值給當(dāng)前鏈接也拜，跳轉(zhuǎn)
}
}
事件代理機(jī)制
借用一個典型栗子
有三個同事預(yù)計會在周一收到快遞以舒。為簽收快遞，有兩種辦法：一是三個人在公司門口等快遞慢哈；二是委托給前臺MM代為簽收÷樱現(xiàn)實(shí)當(dāng)中，我們大都采用委托的方案（公司也不會容忍那么多員工站在門口就為了等快遞）卵贱。前臺MM收到快遞后滥沫，她會判斷收件人是誰，然后按照收件人的要求簽收键俱，甚至代為付款兰绣。這種方案還有一個優(yōu)勢，那就是即使公司里來了新員工（不管多少）编振，前臺MM也會在收到寄給新員工的快遞后核實(shí)并代為簽收缀辩。
利用事件冒泡原理，從目標(biāo)事件的節(jié)點(diǎn)開始踪央，依次向上傳播事件臀玄，因此給父級元素添加點(diǎn)擊事件，父級下的子元素的點(diǎn)擊事件都會傳遞到父級畅蹂，就是委托父級代為執(zhí)行事件健无，優(yōu)點(diǎn)是不管其下有多少個子級都只操作一個父級對象，節(jié)省空間
綁定事件只能對單個元素進(jìn)行綁定
HTML常用事件
click單擊
dblclick雙擊左鍵
mouseover鼠標(biāo)移入液斜，鼠標(biāo)每次移動到每個子級都會觸發(fā)
mouseout鼠標(biāo)移出
mousenter鼠標(biāo)在范圍內(nèi)累贤，區(qū)別是鼠標(biāo)移動到子級不會再觸發(fā)
mouseleave鼠標(biāo)移出范圍
- 表單
focus獲得焦點(diǎn)
blur失去焦點(diǎn)
keyup鍵盤按下去松開時觸發(fā)
keydown鍵盤按下去就觸發(fā)
change輸入框失去焦點(diǎn)后并內(nèi)容有改變
submit提交表單
scroll滾動事件募胃，會發(fā)生多次
resize窗口發(fā)生變化，會發(fā)生多次
window.onload 頁面的所有資源加載完成畦浓，要所有的圖片加載完成痹束，圖片的加載一般需要網(wǎng)絡(luò)請求，比較慢讶请，onload后獲取的圖片寬高樣式是真實(shí)的寬高度祷嘶。
DOMComtentLoaded頁面渲染完成
document.addEventListener('DOMContentLoaded',function(){})一般js在head標(biāo)簽里引用的時候用這個，把js內(nèi)容寫在里面
自定義事件
還沒搞懂
