javascript 冒泡 解决过多节点绑定事件的问题

我们知道在页面渲染中事件的绑定占很大一部分时间。当页面有很多节点需要绑定事件的时候那么页面渲染将会非常的慢。有些人会说我们在domReady之后在做不就没有影响了么。但是那样会影响用户使用体验。

一个冒泡应用简单的例子：

 1     <ul>
 2         <li>第一项</li>
 3         <li>第二项</li>
 4         <li>第三项</li>
 5     </ul>
 6     <script>
 7         var ulDom = document.getElementsByTagName('ul')[0];
 8         ulDom.onclick = function(e){
 9             e = e || event;
10             alert(e.target.innerHTML);
11         }
12     </script>

我们子节点上面触发的事件被父节点冒泡型事件扑捉到。通过target属性我们可以知道是那个节点触发的事件。

延伸一下，我们看一下实例：

 1     <ul>
 2         <li rel="event1">弹出nodeName</li>
 3         <li rel="event2">显示事件名称</li>
 4         <li rel="event3">关闭窗口</li>
 5     </ul>
 6     <script>
 7         var ulDom = document.getElementsByTagName('ul')[0];
 8         var eventList = {
 9             event1 : function(){
10                 alert(this.nodeName);
11             },
12             event2 : function(){
13                 this.innerHTML = "event2";
14             },
15             event3 : function(){
16                 window.close();
17             }
18         }
19         ulDom.onclick = function(e){
20             e = e || event;
21             var eventName =  e.target.getAttributeNode('rel').value;
22             eventList[eventName].call(e.target,e);
23         }
24     </script>

本文只起到一个抛砖引玉的作用

posted @ 2012-06-15 11:00  soom  阅读(451)  评论(1)  编辑  收藏  举报