学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>
触发点击事件后在控制台打出的this是 id 为 xxx 的元素
QQ截图20170415121737.png
可以看到它的一个参数是MouseEvent
相当于浏览器 执行了 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事件被执行时 , 控制台输出6个6 , 因为addEventListener , 每次循环 , addEventListener 就像let 一样 , 生成不同的 addEventListener
回调
只要不是你声明和你调用 , 这种都是回调
事件 : 冒泡 & 捕获
eventflow.png
child1.addEventListener('click' , function() {
console.log('child')
})
parent1.addEventListener('click' , function() {
console.log('parent')
})
事件可以写boolean 参数 , true就是 捕获 , false就是 冒泡 , 默认false
target & currentTarget
- target 是当前目标元素 , 如果目标是监听元素 , target和currenTarget一样.
- currentTarget 是监听的元素
pareventDefault()
阻止默认事件
stopPropagation()
停止冒泡
原生 JS 实现事件委托
<a href="https://developer.mozilla.org/zh-CN/docs/Web/Events">MDN事件列表</a>
- 获取包裹所有的p元素以及span的是id为xxx的div
- function的参数e , 以e为参数的函数一般是回调函数的形式调用的 , 也就是在event发生的时候回调
- div添加监听事件 , 事件名为click
- 声明变量 , 赋值参数当前目标
- while循环 , 目标不是 H1 时 , 就找他的parentNode
-
如果找到div , 赋值null , 结束语句(不让它继续向上找)
20170415121737.png
**!!图中 et = et.parentNode 和 if(et === div){et = null break;}调换位置
**
设置console.log 如果当前目标是H1 , 点击H1打出"你点击了div里的 h1"
否则打出"不是h1"
实验:
TIM截图20170416233227.png
事件委托的目的
1.减少监听器
2.监听动态内容
