在早期的互联网时期,Netscape和Microsoft考虑采用两种截然不同方式来驱动事件流。在Netscape模式中,事件流从document body一直向下回溯至事件源,称之为事件捕获。在Microsoft模式中,称之为事件冒泡,同事件捕获截元然相反,事件从事件源一直向上冒泡直至document对象,当某种类型的节点被点击时候document对象执行一个默认的行为。谢天谢地,W3C组织整合这两种模式,也就目前我们正在使用之中。
绝大部分时间你都会处理DOM事件,你将会担心事件冒泡。为了演示为什么事件冒泡如此重要,我们需要编写一些HTML代码给节点元素绑定事件处理程序。我们将会使用firebug控制台打印出消息。如果你不愿意使用firebug,可以使用alert提示框
假设有以下HTML 你将会为div和anchor元素标签分别绑定click事件监听器
<div id="myDiv"> MyDiv Text <a href="#" id="myHref">My Href</a> </div>
我们将会给最外层的元素注册click事件处理程序,myDiv and will use chaining so we don't have to set a static reference to the result of the Ext.get method call.We will also pass an anonymous function as the second parameter instead of passing a reference to a function(这句话知道是什么意思,可是表达不出来 ^_^ )
Ext.get('myDiv').on('click',function(eventObj,elRef){
console.log('myDiv click handler,source elment ID:'+elRef.id);
});
当页面显示之后展开firebug单击a元素标签。你将会看到firebug控制台打印出一条消自提示你已经单击了a元素标签。Hold the phone...我们只给a元素标签的父元素标签添加了click事件监听器,'myDiv'.How could this be?
这就是事件冒泡的实例。记住click事件从a元素标签产生一直向上冒泡至div 容器,我们绑定了click事件处理程序。事件冒泡触发了事件处理程序,导致它执行,打印出消息
接下来，给a元素绑定一个click事件处理程序
Ext.get('myHref').on('click',function(eventObj,elRef){
console.log('myHref click handler,source element ID:'+elRef.id);
});
刷新一下你的页面,再一次单击a元素标签,你将会看见触发两个事件:
