js练习26—事件委托

事件委托就是为了提高性能，在一个页面上使用一个事件来管理多种类型的事件。

例如需要下面三个li上分别绑定不同的事件：
<ul id="box"> <li id="c_border">蜗爱css -事件委托demo1-点我边框变红</li> <li id="c_height">蜗爱css -事件委托demo2-点我高度变高</li> <li id="c_back">蜗爱css -事件委托demo3-点我背景变色</li> </ul>
[demo]
通常写法：
(function(){ function $(id){return document.getElementById(id);} $('c_border').onclick = function(){ this.style.cssText = "border:1px solid red"; //this.style.border = "1px solid red"; }; $('c_height').onclick = function(){ this.style.height = 40 + 'px'; }; $('c_back').onclick = function(){ this.style.cssText = "background:#000;color:#fff;"; }; })()
事件委托写法：
(function(){ function $(id){return document.getElementById(id);} oUl = $('box'); oUl.onclick = function(ev){ var ev = ev || window.event; var target = ev.target || ev.srcElement; switch(target.id){ case "c_border": $('c_border').style.cssText = "border:1px solid red"; break; case "c_height": $('c_height').style.height = 40 + 'px'; break; case "c_back": $('c_back').style.cssText = "background:#000;color:#fff;"; break; } } })()
优点：
事件委托对于web应用程序的性能有如下几个优点：
1.需要管理的函数变少了
2.占用的内存少了
3.javascript代码和Dom结构之间的关联更少了
相关：
JavaScript中的事件委托
firefox 和 ie 事件处理的细节,研究,再研究-----书写同时兼容ie和ff的事件处理代码

[本日志由 woniu 于 2012-01-09 11:12 PM 编辑]
文章来自: 本站原创
引用通告: 查看所有引用 | 我要引用此文章
Tags: javascript练习事件委托
相关日志: