事件冒泡和捕获,事件委托

事件冒泡

内层事件会像气泡一样像外层传递，这种现象就叫冒泡

<div id="box1">
    <div id="box2">
        <div id="box3"></div>
    </div>
</div>
let div = document.getElementByIdTagName("div")
for(let i=0; i<div.length; i++){
    div[i].onclick = function(){
        console.log(this.className) 
        //this指向当前触发事件的元素
    }
}

当我们点击box3时会打印box3,box2,box1

阻止冒泡事件的方式

• event.cancelBubble = true
• event.stopPropagetion() ie/5/6/7/8不支持

事件捕获

捕获与冒泡正好相反，冒泡事件是从内向外传递事件，而捕获是从外向内传递事件,并且冒泡事件如捕获事件不能同时存在，ie5/6/7/8不支持捕获，普通事件只支持冒泡，addEventListener支持捕获

事件委托

在父级元素上添加事件，那么他的子元素也会拥有这个事件，事件委托利用了事件冒泡的原理

事件委托的好处:

1. 效率高如果有大量的元素需要添加相同的事件时不必为每一个元素单独添加事件
2. 后续加入的元素也可以直接拥有事件，不需要再为新元素添加事件。而普通事件就不可以，必须为新元素再次指定事件

普通事件写法：

<ul id="menu">
    <li>腾讯</li>
    <li>华为</li>
</ul>
<script>
let ulElement = document.getElementById("ul")
let lis = document.getElementsByTagName("li")
for(let i=0; i<lis.length; i++){
    lis[i].onclick = function(){
            console.log("点击")
}
</script>

事件委托写法:

<script>
let ulElement = document.getElementById("ul")
let lis = document.getElementsByTagName("li")
ulElement.onclick = function(even){
    let ev = even || window.event
    //兼容写法
    let target = event.target || event.srcElement
    //由li触发
    if(`LI` ==  ev.target.nodeName){
        consoel.log("ev.target")
    }
}
</script>

ev.target可以获取触发事件的元素即获取哪个元素触发的事件,target事件源