DOM API && 原生 JS 实现事件委托

2017-04-17 本文已影响54人饥人谷_hak

学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.监听动态内容