學(xué)API通覽API列表
MDN https://developer.mozilla.org/zh-CN/docs/Web/API/Document_Object_Model
w3schools https://www.w3schools.com/js/
document.documentElement //它返回根元素<html>
事件MouseEvrnt
<script>
xxx.onclick = function(){
console.log(this)
console.log(arguments)
}
</script>
觸發(fā)點擊事件后在控制臺打出的this是 id 為 xxx 的元素
QQ截圖20170415121737.png
可以看到它的一個參數(shù)是MouseEvent
相當(dāng)于瀏覽器 執(zhí)行了 xxx.onclick.call(button,MouseEvent)
另一種寫法就是
xxx.addEnventListener('click',function() {})
第一種寫法會覆蓋
xxx.onclick = function(){
console.log('1')
}
xxx.onclick = function() {
console.log('2')
}
2會覆蓋1
所以要有升級版
addEnventlistener
事件通知
for (var i = 0 ;i < 6 ;i++) {
xx.addEventListener('click',function(){
console.log(i)
})
}
xx的click事件被執(zhí)行時 , 控制臺輸出6個6 , 因為addEventListener , 每次循環(huán) , addEventListener 就像let 一樣 , 生成不同的 addEventListener
回調(diào)
只要不是你聲明和你調(diào)用 , 這種都是回調(diào)
事件 : 冒泡 & 捕獲
eventflow.png
child1.addEventListener('click' , function() {
console.log('child')
})
parent1.addEventListener('click' , function() {
console.log('parent')
})
事件可以寫boolean 參數(shù) , true就是 捕獲 , false就是 冒泡 , 默認(rèn)false
target & currentTarget
- target 是當(dāng)前目標(biāo)元素 , 如果目標(biāo)是監(jiān)聽元素 , target和currenTarget一樣.
- currentTarget 是監(jiān)聽的元素
pareventDefault()
阻止默認(rèn)事件
stopPropagation()
停止冒泡
原生 JS 實現(xiàn)事件委托
<a >MDN事件列表</a>
- 獲取包裹所有的p元素以及span的是id為xxx的div
- function的參數(shù)e , 以e為參數(shù)的函數(shù)一般是回調(diào)函數(shù)的形式調(diào)用的 , 也就是在event發(fā)生的時候回調(diào)
- div添加監(jiān)聽事件 , 事件名為click
- 聲明變量 , 賦值參數(shù)當(dāng)前目標(biāo)
- while循環(huán) , 目標(biāo)不是 H1 時 , 就找他的parentNode
-
如果找到div , 賦值null , 結(jié)束語句(不讓它繼續(xù)向上找)
20170415121737.png
**!!圖中 et = et.parentNode 和 if(et === div){et = null break;}調(diào)換位置
**
設(shè)置console.log 如果當(dāng)前目標(biāo)是H1 , 點擊H1打出"你點擊了div里的 h1"
否則打出"不是h1"
實驗:
TIM截圖20170416233227.png
事件委托的目的
1.減少監(jiān)聽器
2.監(jiān)聽動態(tài)內(nèi)容
