现在的位置: 首页 > 综合 > 正文

事件委托 节约内存和性能

2013年12月13日 ⁄ 综合 ⁄ 共 635字 ⁄ 字号 评论关闭

<ul id="f">
<li id="a">1</li>
<li id="b">2</li>
<li id="c">3</li>

 </ul>

<script type="text/javascript">
document.getElementById("f").onclick=function(e){
var eventElem=window.event||e;
var eventGoal=window.event.srcElement||e.target;
switch(eventGoal.id){
case "a":
alert(1);
break;
case "b":
alert(2);
break;
case "c":
alert(3);
break;
}
}
  </script>


事件委托:

在ul上注册事件,当点击的具体对象是ul里的li时,事件会冒泡触发ul上的事件。同时我们可以用事件对象来捕捉具体点击的目标li标签。于是根据eventGoal.id来进行不同的操作。这样就不用每个li都注册一个click事件去实现一个功能,只要把功能都写在相应的case语句后就可以。

事件对象:

IE系列是:window.event

W3C系列是:e

事件目标对象:

IE系列是:window.event.srcElement

W3C系列是:e.target

事件类型:

IE系列是:window.event.type

W3C系列是:e.type

switch语句,就是一冒2分。

case条件后一个冒号,实现和break各自带一个分号。


抱歉!评论已关闭.