事件侦听参数e的应用以及事件冒泡

给某些区域的元素或批量的元素添加事件，一般情况下我们通过循环来实现：先找到所有对应的元素，再给它们添加相应的事件。

如果学习一些W3C事件处理模式的知识，可以找到另一种实现的方法:利用事件侦听参数e。

在W3C事件处理模式 中：所有通过addEvent给节点元素添加的事件处理器都会给对应的事件侦听函数传回一个包含e参数的对象 ，在浏览器中我们可以利用e.target（标准）e.srcElement（IE）来取得事件的目标元素 。
一旦此元素的事件处理器被激活，此元素的父元素的所有事件处理器也会被激活，即冒泡 ，可以通过stopPropagation或cancelBubble来取消冒泡。

下面是利用此原理对FAQ实例重新写的代码。
Javascript部分：

< script type = " text/javascript " >
<!--
window.onload  =   function () {
     var  obj  =  document.getElementById( " faq " );
     if  ( ! obj)  return   false ;
        obj.onclick  =   function (e) { // 传递事件侦听参数e
             var  e  =  e  ||  window.event; // 取得事件侦听参数e
             var  tg  =  e.target  ||  e.srcElement;  // 取得事件的目标元素
             if (tg.tagName == " H3 " ) { // 取得目标对象：标题
                tg.className  =  tg.className  ==   "" ? " on " : "" ; // 设置标题样式
                 var  tp  =  tg.parentNode.lastChild; // 取得这个标题相对应的正文内容（此语句存有bug：在ff2中html的父标签li与子标签h3,p之间有空格或回行时）
                tp.style.display  =  tp.style.display  ==   " none " ? " block " : " none " ; // 显示或隐藏正文
            }
             if  (window.event) { // 判断是否IE
                window.event.cancelBubble  =   true ; // IE 取消冒泡（点击超链接时不触其父元素的事件）
                 // window.event.returnValue = false;//IE 取消默认行为
            }
             else {
                e.stopPropagation(); // 取消冒泡
                 // e.preventDefault();//取消默认行为
            }
        }
}
// -->
< / script>

Html部分：

< ul  id ="faq" >
     < li >< h3 > headline < a  href ="http://www.baidu.com"  target ="_blank" > search </ a ></ h3 >
         < p > paragraph paragraph paragraph </ p ></ li >
     < li >< h3 > headline </ h3 >
         < p > paragraph paragraph paragraph </ p ></ li >
     < li >< h3 > headline </ h3 >
         < p > paragraph paragraph paragraph </ p ></ li >
</ ul >

 

 

http://docs.jquery.com/Events/jQuery.Event#event.target