JavaScript 事件的冒泡，委派

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <style type="text/css">
            #box1{
                width: 100px;
                height: 100px;
                background-color: yellowgreen;
                /*
                 * 要设置偏移量left，top，要开启绝对定位
                 */
                position: absolute;
            }
            #box2{
                width: 500px;
                height: 500px;
                background-color: pink;
            }
        </style>
    </head>
    <body>
        <div id="box1">
            我是box1
        </div>
        <div id="box2">
            我是box2
            <ul id="allA">
                <li><a href="javascript:;" class="link">超链接1</a></li>
                <li><a href="javascript:;" class="link">超链接2</a></li>
                <li><a href="javascript:;" class="link">超链接3</a></li>
            </ul>
        </div>
    </body>
    <script type="text/javascript">
        /*事件的冒泡(bubble)
         * 指事件的向上传导，子元素的事件响应，祖先元素的相同事件也响应
         * 如：#box1跟随鼠标移动可以到#box2中会冒到document中实现
         */
        //#box1跟随鼠标移动
        var box1=document.getElementById("box1");
        document.onmousemove=function(event){
            //解决兼容性问题
            event=event||window.event;
            
            //css设置偏移量，坐标设置
             //clientX是相对可见窗口的坐标，有滚动条的时候雨div相对页面的坐标不对应，此时要有pagex
            box1.style.left=event.pageX+"px";
            box1.style.top=event.pageY+"px";
        }
        /*取消冒泡
         */
        var box2=document.getElementById("box2");
        box2.onmousemove=function(event){
            event.cancelBubble=true; //移动不到box2中了
        }
        
        //事件的委派
         //利用冒泡，只在祖先元素绑定一次事件，而实现一堆子元素的相同事件
         var allA=document.getElementById('allA');
         allA.onclick=function(){
             //如果触发事件对象是期望元素的得是则执行，否则不执行，这里li就会执行，但是我们要a执行
              //event.target判断对象
              if(event.target.className=='link'){
                  alert("超链接");
              }
             
         }
         
    </script>
</html>
JavaScript 事件的冒泡，委派

猜你喜欢
