javascript--37--事件委托

事件委托在大盒子上绑定事件但是触发的是子节点

<body>
<div class="box">
  <ul>
    <li>列表1</li>
    <li>列表2</li>
    <li>列表3</li>
    <li>列表4</li>
    <li>列表5</li>
    <li>列表6</li>
  </ul>
</div>
</body>
<script>
  var oBox =document.getElementsByClassName("box")[0];
  oBox.onclick = function (e) {
      console.log(e);
  }
</script>

点击li 打印信息中 target保存了触发事件的节点最底下的元素 li 外边距属于父级内边距padding属于元素自己

<script>
  var oBox =document.getElementsByClassName("box")[0];
  oBox.onclick = function (e) {
      console.log(this);
      console.log(e.target);
  }
</script>

分别打印

;li

 <li>
      <span>列表1</span>
    </li>

当点击是li 时 e.target返回的是span 找最后一个

var oBox =document.getElementsByClassName("box")[0];
  oBox.onclick = function (e) {
      e.target.className="on";
  }

点击谁就会添加类名

判断点击的是不是li标签

 var oBox =document.getElementsByClassName("box")[0];
  oBox.onclick = function (e) {
      if (e.target.nodeName=="LI"){

      e.target.className="on";
      } else{
          console.log("不是li标签");
      }
  }

ie没有target属性有e.srcElement

oBox.onclick = function(e) {
			
			e = e || window.event;
			
			//不存在就证明是ie
			if(e.target === undefined){

				e.target = e.srcElement;
			}
			
    
}

可以在e.target上再次添加事件

oBox.onclick = function (e) {
      if (e.target.nodeName=="LI"){

      e.target.onclick =function () {
         console.log("hello");//需要点击两次才打印
      }
      } else{
          console.log("不是li标签");
      }
  }

每次点击最终结果只有一个添加类名

 var oBox =document.getElementsByClassName("box")[0];
  var index=null;
  oBox.onclick = function (e) {
      e=e||window.event;
      if (e.target===undefined){
          e.target=e.srcElement;
      }
      if (e.target.nodeName === "LI"){
          if (index !=null){
              index.className="";
          }
      }
      e.target.className ="on";
      index=e.target;
  }

javascript--37--事件委托

事件委托 在大盒子上绑定事件 但是触发的是子节点

ie没有target属性 有e.srcElement

猜你喜欢

事件委托在大盒子上绑定事件但是触发的是子节点

ie没有target属性有e.srcElement