小白的博客

this my！
数据加载中……
事件侦听参数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>


Tag标签: javascript

posted on 2008-02-15 16:10 baifan 阅读(186) 评论(0)  编辑 收藏 网摘 所属分类: javascript


标题  
姓名  
主页
Email (博主才能看到) 
验证码 *  看不清,换一张 [登录][注册]
内容(请不要发表任何与政治相关的内容)  
网站首页

新闻频道

社区

小组

博问

网摘

人才

找找看
  登录  使用高级评论  新用户注册  返回页首  恢复上次提交      
Google站内搜索


China-pub 计算机图书网上专卖店！6.5万品种 2-8折！
近千种 9-95 新二手计算图书火热销售中！

相关文章:


相关搜索:
javascript

相关链接:



最新IT新闻:
[译稿]微软将 jQuery IntelliSense整合到Visual Studio
微软：不裁员也不削减研发开支
2008年11月22日科技博客精选
诺基亚将支持Lotus Notes 和黑莓争夺市场
Mozilla公布去年收入报告
 

Dilectio Theme is created by: Design Disease brought to you by Smashing Magazine