一JS事件委托
JS事件委托是利用了事件冒泡的机制,将事件委托的父级元素去做,让父级元素触发时间。
二、好处:
1 提高效率
例如:鼠标移入的时候,给每个li增加背景颜色,移出的时候,去掉背景颜色
<script type="text/javascript">
window.onload = function(){
var oUl = document.getElementById("ul1");
var aLi = document.getElementsByTagName("li");
for (var i = 0; i < aLi.length; i++) {
aLi[i].onmouseover = function(){
this.style.background = 'red';
}
aLi[i].onmouseout = function(){
this.style.background = '';
}
}
}
</script>
<ul id="ul1">
<li>1111</li>
<li>2222</li>
<li>3333</li>
<li>4444</li>
</ul>
效果如下:
如果上面例子中,li的个数太多,会导致效率问题,将上面例子改造成ul的事件,通过父级来处理事件
使用父级,需要用到事件源。
事件源:是event对象的,不管在哪个事件中,只要你操作的那个元素就是事件源
可以通过以下方式进行获取事件源:
ie:window.event.srcElement
标准下:event.target
下面代码使用事件委托
<script type="text/javascript">
window.onload = function(){
var oUl = document.getElementById("ul1");
var aLi = document.getElementsByTagName("li");
for (var i = 0; i < aLi.length; i++) {
oUl.onmouseover = function(ev){
//解决事件源存在兼容性问题
var ev = ev || window.event;
var target = ev.target || ev.srcElement;
target.style.background = 'red';
}
oUl.onmouseout = function(){
var ev = ev || window.event;
var target = ev.target || ev.srcElement;
target.style.background = '';
}
}
}
</script>
<ul id="ul1">
<li>1111</li>
<li>2222</li>
<li>3333</li>
<li>4444</li>
</ul>
改造之后效果一样
上面程序中,有一个bug,
鼠标移动到左边空白处,会整个ul变红
通过target的nodeName可以找到当前元素的标签,这样就可以解决问题:
window.onload = function(){
var oUl = document.getElementById("ul1");
var aLi = document.getElementsByTagName("li");
for (var i = 0; i < aLi.length; i++) {
oUl.onmouseover = function(ev){
var ev = ev || window.event;
var target = ev.target || ev.srcElement;
if(target.nodeName.toLowerCase() == 'li'){
target.style.background = 'red';
}
}
oUl.onmouseout = function(){
var ev = ev || window.event;
var target = ev.target || ev.srcElement;
if(target.nodeName.toLowerCase() == 'li'){
target.style.background = '';
}
}
}
}
2 新增加的标签,也可以有之前的事件。
在第一个代码中,如果动态通过document来创建的标签,则无法有鼠标移入跟移出事件。而使用了事件委托给父级来实现,也解决了新增标签的问题。
这里就不举例了。可以在上面的第一个代码中,加入一个按钮。来动态增加li,就可以看出效果。