事件冒泡和事件捕获

事件冒泡:事件对象沿DOM树向上传播
事件捕获:事件对象沿DOM树向下传播
addEventListener(“click”,function(){},flase)
参数默认为false 代表事件冒泡,参数为true代表事件捕获
attachEvent(“onclick”,function(){})/detachEvent()没有第3个参数
示例:
html

    <ul id="ul">
      <li id="item1">item1</li>
      <li id="item2">item2</li>
      <li id="item3">item3</li>
      <li id="item4">item4</li>
      <li id="item5">item5</li>
      <li id="item6">item6</li>
    </div>

js

//事件委托:将本该由子元素所执行的事件交由父元素代替执行,这是利用了事件冒泡的原理
//好处 1.提升了效率2.能够给未来元素添加事件
   var fath=document.getElementById("ul")
    fath.addEventListener("click",function(event){
          if(event.target.id == "item1"){
            console.log("item1")
          }else if(event.target.id == "item2"){
            console.log("item2")
          }else if(event.target.id == "item3"){
            console.log("item3")
          }else if(event.target.id == "item4"){
            console.log("item4")
          }else if(event.target.id == "item5"){
            console.log("item5")
          }else{
            console.log("item6")
          }
    },true)

你可能感兴趣的:(javascript)