CSS布局与JS事件处理-优快云博客

本文链接：https://blog.youkuaiyun.com/weixin_42689830/article/details/116942040

<!DOCTYPE html>
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        .wrap,.box,.content{
           position: relative;
           /* top:30px; */
        }
        .wrap{
            height: 300px;
            width: 300px;
            background-color: red; 
        }
        .box{
            height: 200px;
            width: 200px;
            background-color: green; 
        }
        .content{
            height: 100px;
            width: 100px;
            background-color: pink; 
        }

    </style>
</head>
<body>
    <div class="wrap">1
        <div class='box'>2
            <div class="content">3</div>
        </div>
    </div>
   

    <script>
        /*
        事件类型
            onclick 点击事件
            ondblclick 鼠标左键双击事件
            onresize 浏览器窗口发生改变时触发
            oncontextmenu 鼠标右键事件
            onmousedown 按下事件
            onmouseup 抬起事件
            οnclick=onmousedown+onmouseup
            onscroll 滚动事件
            onblur 失去焦点事件
            onfouce 聚焦事件
            oninput 用户输入触发
            onmouseenter 移入事件
            onmouseleave  移出事件
            onmouseover    移入事件
            onmouseout  移出事件
            onmousemove 移动事件
            onmousewheel 鼠标滚轮事件
            onload 页面或图片加载完毕执行
             

        */

        let wrap=document.querySelector(".wrap");    
        let box=document.querySelector(".box");
        let tent=document.querySelector(".content");
        tent.addEventListener("click",function(ev){//二级绑定
            console.log("单击触发");
            ev.stopPropagation();
            tent.style.background=fn();
        })
      
        
        box.addEventListener("dblclick",function(ev){
            console.log("双击触发");
            ev.stopPropagation();
            box.style.background=fn();
        })
        wrap.addEventListener("mouseover",function(ev){
            console.log("双击触发");
            ev.stopPropagation();
            wrap.style.background=fn();
        })
        
        function fn(){
           let r=Math.random()*255;
           let g=Math.random()*255;
           let b=Math.random()*255;
           let rgb= `rgb(${r},${g},${b})`;
           return rgb;
        }

        
      
    </script>
</body>
</htm

JS事件类型整理