很简单的介绍一下事件委托:
1.概念:对"事件处理程序过多"问题的解决方案就是事件委托。
2.原理:事件委托利用率 事件冒泡,只指定一个事件处理程序来管理某一类型的事件处理程序,例如(onclick,mousedown,mouseup,keydown,keyup,keypress);
其mousemove||mouseout是需要处理鼠标的移动距离与元素的位置所以不建议使用。
3。简单实例:
<body>
<ul id="dad">
<li id="brother">brother</li>
<li id="sister">sister</li>
<li id="pet">pet</li>
</ul>
</body>
<script type="text/javascript">
var dad = document.getElementById('dad');
dad.onclick = function(event){
var event = event || window.event;
var target = event.target || event.srcElement;
switch(target.id){
case 'brother':
alert(target.innerHTML);
break;
case 'sister':
alert(target.innerHTML);
break;
case 'pet':
alert(target.innerHTML);
break;
}
}
</script>
4.移除事件处理程序:当不需要事件处理程序的时候,我们就应当把事件处理程序移除掉。
<div class="btnWrap"> <button type="button" value="click me" class="innerbtn"></button> </div> var btnWrap = document.getElementsByClassName('innerbtn'); btnWrap.onclick = function(){ btnWrap.onclick = null; document.getElementsByClassName('btnWrap').innerHTML = 'processing...'; }