事件委托

Posted 2020-10-13 翰弟

不愤不启不悱不发，不要一直做伸手党

事件委托：利用事件冒泡机制，监听父元素事件处理子元素（监听父元素事件实现监听子元素事件的相同效果）

　　click-->MouseEvent-->UIEvent-->Event （原型链、chrome）

<!-- 核心html代码 -->
<div id="parentContainer">    
    <div class="childContainer">子元素1</div>
    <div class="childContainer">子元素2</div>
</div>

//事件委托的核心代码
function handleEvent(e) {
  //兼容IE8- 浏览器
  e = e || window.event;
  // 获得子元素做些想做的事情
  var target = e.target || e.srcElement;
  alert(target.innerText)//输出 子元素1
  if(typeof e.preventDefault == ‘function‘){
    e.preventDefault();//阻止浏览器执行与事件关联的默认动作
    e.stopPropagation();//阻止事件冒泡
  }else{
    e.returnValue = false;
    e.cancelBubble = true;
  }
}

// 为table添加事件监听器
var el = document.getElementById("parentContainer");
el.onclick =  handleEvent;