事件委托

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

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

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

　　注： currentTarget部署监听事件的DOM元素，target触发事件的DOM元素

jq使用on方法实现代理（1.7+delegate方法不推荐，建议用on）

<!-- 核心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;
  if(target.innerText == "子元素1"){
　    alert('do somthing');　　
　}
  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;

js原生事件封装

更多