不愤不启不悱不发,不要一直做伸手党
事件委托:利用事件冒泡机制,监听父元素事件处理子元素(监听父元素事件实现监听子元素事件的相同效果)
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;