首页 > 其他 > 详细

事件委托

时间:2017-11-03 19:53:22      阅读:302      评论:0      收藏:0      [点我收藏+]

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

事件委托:利用事件冒泡机制,监听父元素事件处理子元素(监听父元素事件实现监听子元素事件的相同效果)

  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;

 

事件委托

原文:http://www.cnblogs.com/wenhandi/p/7779988.html

(0)
(0)
   
举报
评论 一句话评论(0
关于我们 - 联系我们 - 留言反馈 - 联系我们:wmxa8@hotmail.com
© 2014 bubuko.com 版权所有
打开技术之扣,分享程序人生!