第3课 03 JS中级课程-事件流-事件冒泡机制-3

来源：互联网发布：midascft是什么软件编辑：程序博客网时间：2024/04/27 10:17
<!DOCTYPE html><html><head><meta charset="utf-8"><meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"><title>03 JS中级课程-事件流-事件冒泡机制-3</title><meta name="description" content=""><meta name="keywords" content=""><link href="" rel="stylesheet"><style>    /*div{padding: 40px;}*/    #div1{background-color: red;padding: 40px;}    #div2{background-color: green;padding: 40px;}    #div3{background-color: blue;padding: 40px;}    #div4{width: 100px;height: 200px;border:1px solid red;display: none;padding: 40px;}    #div5{width: 100px;height: 200px;top:300px;background-color: red;position: absolute;left: -100px;}    #div6{width: 20px;height: 60px;top:70px;position: absolute;background-color: black;right: -20px;color:white;}</style><script>    window.onload=function  () {        var div1=document.getElementById("div1")        var div2=document.getElementById("div2")        var div3=document.getElementById("div3")        var div4=document.getElementById("div4")        var div5=document.getElementById("div5")        var div6=document.getElementById("div6")        var oBtn=document.getElementById("btn")        //事件冒泡：当一个元素接收到事件的时候，会把接收到所有的赋给他的父级，父级又会赋给他本身的父级，一层一层往上赋值，直到顶层        function fn(){            alert(this.id)        }        div1.onclick=fn;        div2.onclick=fn;        div3.onclick=fn;        //阻止事件冒泡，在当前要阻止的冒泡的事件函数中调用：event.cancelBubble=true        oBtn.onclick=function(ev){            var ev=ev||event;            ev.cancelBubble=true;            div4.style.display="block";        };        document.onclick=function(){            // setTimeout(function(){            //  div4.style.display="none";            // },1000)            div4.style.display="none";        };        div5.onmouseover=function(){            this.style.left="0"        }        div5.onmouseout=function(){            this.style.left="-100px"        }    }</script></head><body><div id="div1">    <div id="div2">        <div id="div3"></div>    </div></div><input id="btn" type="button" value="按钮"><div  id="div4"></div><div id="div5">    <div id="div6">分享到</div></div></body></html>
阅读全文
0 0