我们知道在页面渲染中事件的绑定占很大一部分时间。当页面有很多节点需要绑定事件的时候那么页面渲染将会非常的慢。有些人会说我们在domReady之后在做不就没有影响了么。但是那样会影响用户使用体验。
一个冒泡应用简单的例子：
1
- 2
- 第一项 3
- 第二项 4
- 第三项 5
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>冒泡应用简单的例子</title> </head> <body> <ul> <li>第一项</li> <li>第二项</li> <li>第三项</li> </ul> <script> var ulDom = document.getElementsByTagName('ul')[0]; ulDom.onclick = function(e){ e = e || event; alert(e.target.innerHTML); } </script> </body> </html>
运行代码
我们子节点上面触发的事件被父节点冒泡型事件扑捉到。通过target属性我们可以知道是那个节点触发的事件。
延伸一下，我们看一下实例：
1
- 2
- 弹出nodeName 3
- 显示事件名称 4
- 关闭窗口 5
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>冒泡应用简单的例子</title> </head> <body> <ul> <li rel="event1">弹出nodeName</li> <li rel="event2">显示事件名称</li> <li rel="event3">关闭窗口</li> </ul> <script> var ulDom = document.getElementsByTagName('ul')[0]; var eventList = { event1 : function(){ alert(this.nodeName); }, event2 : function(){ this.innerHTML = "event2"; }, event3 : function(){ window.close(); } } ulDom.onclick = function(e){ e = e || event; var eventName = e.target.getAttributeNode('rel').value; eventList[eventName].call(e.target,e); } </script> </body> </html>
运行代码
本文只起到一个抛砖引玉的作用