javascript当中冒泡（event bubble）用法

最新推荐文章于 2023-06-10 17:28:29 发布

mark_to_win

最新推荐文章于 2023-06-10 17:28:29 发布

阅读量415

点赞数

分类专栏： javascript 文章标签： javascript 冒泡（event bubble） srcElement currentTarget parentNode

本文链接：https://blog.csdn.net/mark_to_win/article/details/88641387

版权

javascript 专栏收录该内容

119 篇文章 0 订阅

订阅专栏

9.冒泡（event bubble）
马克-to-win：缺省情况下，当几个元素重合，事件从最上层元素开始往下层元素传播。

例 9.1（bubbleIEFF.html）

<head>
    <meta http-equiv="content-type" content="text/html; charset=utf-8"/>

<script type="text/javascript">
function docClick(event)
{
    var event = event || window.event;
    alert("IE和FF一样：外面文档："+event.type);
}
//document.captureEvents(Event.CLICK);
document.onclick = docClick;

</script>

<div onClick="var event = event || window.event;alert('里面div：'+event.type);">ie和FF都冒泡从里往外</div>

马克-to-win：缺省情况下，当几个元素嵌套重合，事件从最上层元素开始往下层元素传播。

例 9.2（bubble1currentTargetsrcElementIEFF.html）

<html>
<head>
    <meta http-equiv="content-type" content="text/html; charset=utf-8"/>
    <script type="text/javascript">
        function gotClick(event, who) {
/*
1) 在ie中没有currentTarget，我们只能用下面的方法：来仿真火狐的效果。
2）马克-to-win：event.target是最上层的元素，event.currentTarget是最底层的元素
*/
           var event = event||window.event;
           var eTarget =event.srcElement||event.target;
           var eCurrentBottomTarget =event.srcElement||event.currentTarget;
           if (window.navigator.userAgent.indexOf("MSIE") >= 1)
           {
               //var en=eCurrentBottomTarget.nodeName.toLowerCase();
             // var whol=who.toLowerCase();
               while( eCurrentBottomTarget.nodeName.toLowerCase()!=who.toLowerCase()){
                   eCurrentBottomTarget=eCurrentBottomTarget.parentNode;
             //      eCurrentBottomTarget=ep;
             //en=eCurrentBottomTarget.nodeName.toLowerCase();
          //          var zhanwei = "zhanwei";
               }
           }else{
alert(event.target.id + " is event.target.id     "+event.currentTarget.id+" is event.currentTarget.id");
           }
              alert(who +" and " + eTarget.id+" and "+eCurrentBottomTarget.id);
     //      var zhanwei = "zhanwei";
        }
    </script>
</head>
<body id="bodyq" οnclick="gotClick(event,'body');">
<p id="pq" οnclick="gotClick(event,'p');">
    <input type="button" id="buttonq" value="单击我" οnclick="gotClick(event,'input');"/>
</p>
</body>
</html>

mark_to_win

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
打赏
0
评论
javascript当中冒泡（event bubble）用法

9.冒泡（event bubble）马克-to-win：缺省情况下，当几个元素重合，事件从最上层元素开始往下层元素传播。例 9.1（bubbleIEFF.html）<head> <meta http-equiv="content-type" content="text/html; charset=utf-8"/><script type="text/javasc...
复制链接

扫一扫