javascript当中冒泡(event bubble)用法

冒泡(event bubble)
马克-to-win:缺省情况下,当几个元素重合,事件从最上层元素开始往下层元素传播。
马克- to-win:马克 java社区:防盗版实名手机尾号: 73203。



例 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" onclick="gotClick(event,'body');">
<p id="pq" onclick="gotClick(event,'p');">
    <input type="button" id="buttonq" value="单击我" onclick="gotClick(event,'input');"/>
</p>
</body>
</html>

马克-to-win:缺省情况下,当几个元素嵌套重合时,事件是穿透的。即使顶层元素无事件处理器,事件也可以顺利到达下面一层。比较一下事件的截断:例12.2。




例 9.2_b:

<html>
<head>
    <meta http-equiv="content-type" content="text/html; charset=utf-8"/>
    <script type="text/javascript">
        function gotClick(event, who) {

           var event = event||window.event;
           var eSource =event.srcElement||event.target;
           var eCurrentSource =event.srcElement||event.currentTarget;
           if (window.navigator.userAgent.indexOf("MSIE") >= 1)
           {
               //var en=eCurrentSource.nodeName.toLowerCase();
             //  var whol=who.toLowerCase();
               while( eCurrentSource.nodeName.toLowerCase()!=who.toLowerCase()){
                   eCurrentSource=eCurrentSource.parentNode;
             //      eCurrentSource=ep;       
             //en=eCurrentSource.nodeName.toLowerCase();
          //          var zhanwei = "zhanwei";
               }
           }else{
alert(event.target.id + " is event.target.id "+event.currentTarget.id+" is event.currentTarget.id");
           }
              alert(who + eSource.id+" and "+eCurrentSource.id);
     //      var zhanwei = "zhanwei";
        }
    </script>
</head>
<body id="bodyq" onclick="gotClick(event,'body');">
<p id="pq" onclick="gotClick(event,'p');">
    <input type="button" id="buttonq" value="单击我" />
</p>
</body>
</html>




例 9.2_c:


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

<div>这个效果我们好像在哪见过vdav<br>
这就是鼠标跟踪jdfjkdfdvavdav<br>
acdsacdaddscsavfdvdfavvavdav<br>
acdsacdaddscsavfdvdfavvavdav<br>
acdsacdaddscsavfdvdfavvavdav<br>
acdsacdaddscsavfdvdfavvavdav<br>
acdsacdaddscsavfdvdfavvavdav<br>
acdsacdaddscsavfdvdfavvavdav<br>
acdsacdaddscsavfdvdfavvavdav<br>
acdsacdaddscsavfdvdfavvavdav<br>
acdsacdaddscsavfdvdfavvavdav<br>
acdsacdaddscsavfdvdfavvavdav<br>
acdsacdaddscsavfdvdfavvavdav<br>
acdsacdaddscsavfdvdfavvavdav<br>
acdsacdaddscsavfdvdfavvavdav<br></div>



<div id="img" style=" z-index:1; position:absolute; width:0px; height:0px; left:0px;top:0px">abc<img src="1.jpg" />bcd</div>

<script>
    var car = document.getElementById("img");

    function move(event)
    {
        var event = event || window.event;
        car.style.left =  event.clientX ;
        car.style.top =  event.clientY;
    }
    document.onmousemove=move;
</script>