1.事件流竣付,
三個(gè)階段 捕獲田巴,事件目標(biāo),冒泡
2.事件三個(gè)的綁定方式
a.標(biāo)簽屬性綁定,按鈕b.on+type 綁定 c.ele.addEventListener("click", fn, false)? ? IE8 ele.attachEvent("onclick", fn) fn 內(nèi)的this指向window
3.事件解除綁定
a/b.? ele.onclick = nullc. ele.removeEventListener("click", fn, true) 跟綁定時(shí)候的參數(shù)完全一致补胚,fn必須是同一個(gè)
4.阻止默認(rèn)事件
a.標(biāo)簽屬性綁定b.on這種方式綁定? return false,放置到函數(shù)末尾c.ele.addEventListener(type, fn, boolean) e.preventDefault()IE8 ele.attachEvent("onclick", fn) e.returnValue = false
5.阻止冒泡/阻止事件傳播
a.標(biāo)簽屬性綁定b.on這種方式綁定 e.cancelBubble = true;c. ele.addEventListener(type, fn, boolean)e.stopPropagation()冒泡:a.彈窗,點(diǎn)擊蒙層消失? b.事件委托/代理
6. 事件對象e追迟,
包含當(dāng)前事件的信息溶其,狀態(tài)e || window.event e.type 事件類型e.target || e.srcElment 事件目標(biāo)e.keyCode 鍵盤事件中按鍵的鍵值e.clientX/e.clientY 鼠標(biāo)事件中,鼠標(biāo)的視口坐標(biāo)e.cancelBubble = true 取消冒泡e.stopPropagation()e.preventDefault()e.shiftKey? 組合鍵 按下為truee.ctrlKeye.altKeyDOM document object model?
文檔對象模型
1. 獲取元素的方式
document.getElementById()
document.getElementsByTagName()
document.getElementsByName()
document.getElementsByClassName()
document.querySelector("div") 獲取單個(gè)敦间,找到第一個(gè)匹配的就返回瓶逃,停止查找
document.querySelectorAll("#box .list")
2. 創(chuàng)建元素節(jié)點(diǎn)
var div = document.createElement("div") div.innerHTML = "鏈接"
3. 插入節(jié)點(diǎn)到文檔
parentNode.appendChild(childNode) 添加到末尾parentNode.insertBefore(newNode, postionNode) 添加到那個(gè)元素前面
4. 元素屬性操作
ele.getAttribute("class")ele.setAttribute("class", "active")ele.removeAttribute("class")
5. 復(fù)制/替換元素
ele.cloneNode(bol)parentNode.replaceChild(newChild, oldChild)
6. 刪除元素
parentNode.removeChild(ele)ele.parentNode.removeChild(ele)ele.remove()案例:sina微博