DOM事件流

1.捕获阶段(外->内)

2.目标阶段

2.冒泡阶段(内->外)

事件委托

含义:将子级元素的事件交给父级处理

举例:完成列表点谁删谁的功能

let li = doucment.querySelectorAll('li')
let ul = doucment.querySelector('ul')

for(let i = 0 ; i < li.length ; i++){
	li[i].onclick = function(){
    	ul.removeChild(this)
    }

过渡:代码这样写,看样子是没问题,并且使用时也是可以达到点击即删的效果,但是它有两个大问题

问题1:如果页面元素足够多,需要绑定该类事件的li元素过多,这样每个去绑定会导致性能损失问题

问题2:如果我添加一个input输入框,可以往ul里面添加li元素,那么会发现,后续添加的li并没有成功绑定上该删除事件=>那是因为js执行完这个循环以后,你重新往ul里面添加的元素并不会让js重新去执行一次这个循环绑定代码,所以自然后续添加的li没有删除功能

处理:

let ul = doucment.querySelector('ul')

ul.onclick = function(e){
	ul.removeChild(e.target)
}

总结:这样写,成功的完成了我们的需求,并且后续动态添加的元素也可以删除,这种将子级的事件处理,利用事件冒泡的特性,交由父元素来处理,便称之为事件委托