美文网首页
DOM-client家族及事件冒泡9

DOM-client家族及事件冒泡9

作者: charlotte2018 | 来源:发表于2017-11-15 14:47 被阅读8次

client

D877D708-CFEC-4114-ABAC-A57F5C6AA2C9.png

02-三大家族的区别.html

BC1C3054-6872-4D6A-BB6F-C054CAC5734D.png 
<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
</head>
<body>
<script>

//    width和height
//    offset带border
//    scroll不带border，内容的宽高
//    client不带border




//    top和left
//    offset距离父系盒子带有定位的盒子之间的距离
//    scroll被卷去的部分的距离
//    clientborder的宽高




    //clientX和clientY
//    event调用，鼠标距离浏览器的可视区域的距离



</script>
</body>
</html>

03-浏览器可视区域宽高.html

<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
</head>
<body>
<script>


//    console.log(document.body.clientWidth);
//    console.log(document.body.clientHeight);
//
//    console.log(document.documentElement.clientWidth);
//    console.log(document.documentElement.clientHeight);
//
//
//    document.write(window.innerWidth+"<br>");
//    document.write(window.innerHeight);

    //新事件：浏览器大小变化事件（浏览器哪怕大小变化1px也会触动这个事件）
    window.onresize = function () {
        document.title = client().width + "    "+ client().height;
    }


    //获取屏幕可视区域的宽高
    function client(){
        if(window.innerHeight !== undefined){
            return {
                "width": window.innerWidth,
                "height": window.innerHeight
            }
        }else if(document.compatMode === "CSS1Compat"){
            return {
                "width": document.documentElement.clientWidth,
                "height": document.documentElement.clientHeight
            }
        }else{
            return {
                "width": document.body.clientWidth,
                "height": document.body.clientHeight
            }
        }
    }


</script>
</body>
</html>

05-检测屏幕宽度.html

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
</head>
<body>
<script>

    window.onresize = function () {
        document.title = window.screen.width + "    "+ window.screen.height;
    }


</script>
</body>
</html>

事件冒泡

F591DCDF-BA72-4AFF-B842-3DBEEB7009D6.png

不是所有的事件都能冒泡。以下事件不冒泡：blur、focus、load、unload、onmouseenter
onmouseleave

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <style>
        .box1 {
            width: 500px;
            height: 500px;
            background-color: pink;
        }
        .box2 {
            width: 300px;
            height: 300px;
            background-color: yellow;
        }
        .box3 {
            width: 100px;
            height: 100px;
            background-color: blue;
        }


    </style>
</head>
<body>

<div class="box1" id="box1">
    <div class="box2">
        <div class="box3"></div>
    </div>
</div>

<script>

    var box1 = document.getElementById("box1");
    var box2 = box1.children[0];
    var box3 = box2.children[0];

//    冒泡和捕获
//    box1.onclick = function () {
//        alert("我是box1");
//    }
//
//    box2.onclick = function () {
//        alert("我是box2");
//    }
//
//    box3.onclick = function () {
//        alert("我是box3");
//    }
//
//    document.onclick = function () {
//        alert("我是document");
//    }

    //true - 事件句柄在捕获阶段执行
    //false- false- 默认。事件句柄在冒泡阶段执行
    box1.addEventListener("click", function () {
        alert("我是box1");
    },true);

    box2.addEventListener("click", function () {
        alert("我是box2");
    },true);

    box3.addEventListener("click", function () {
        alert("我是box3");
    },true);

    document.addEventListener("click", function () {
        alert("我是document");
    },true);


</script>

</body>
</html>

07-取消冒泡.html

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <style>
        .box {
            width: 100px;
            height: 100px;
            background-color: pink;
        }
    </style>
</head>
<body>

<div class="box"></div>
<script>

    var box = document.getElementsByClassName("box")[0];

    box.onmouseover = function (event) {
        console.log("鼠标放到了box上");
        //阻止冒泡
        event = event || window.event;

        if(event && event.stopPropagation){
            event.stopPropagation();
        }else{
            event.cancelBubble = true;
        }
    }

    document.onmouseover = function (event) {

        console.log(event.bubbles);
        //谁触动事件，会被放进target中。
        console.log(event.target);

    }



</script>
</body>
</html>

08-隐藏模态框.html

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <style>
        body,html {
            height: 100%;
            padding: 0;
            margin: 0;
        }
        .mask {
            width: 100%;
            height: 100%;
            position: fixed;
            top: 0;
            left: 0;
            display: none;
            background: rgba(0, 0, 0, 0.6);
        }
        .login {
            width: 400px;
            height: 300px;
            cursor: pointer;
            background-color: #fff;
            margin: 200px auto;
        }
    </style>
</head>
<body>
    <div class="mask">
        <div class="login" id="login"></div>
    </div>
    <a href="#">注册</a>
    <a href="#">登陆</a>
    <script src="jquery1.0.0.1.js"></script>
    <script>
        //需求：点击登录按钮，显示模态框。点击出去login以外的所有盒子隐藏模态框。
        //步骤：
        //1.给登录绑定事件
        //2.给document绑定事件，因为可以冒泡，只要判断，点击的不是login，那么隐藏模态框


        //1.给登录绑定事件
        var mask = document.getElementsByClassName("mask")[0];
        var a = document.getElementsByTagName("a")[1];

        a.onclick = function (event) {
            //显示模态框
            show(mask);

            //阻止冒泡
            event = event || window.event;
            if(event && event.stopPropagation){
                event.stopPropagation();
            }else{
                event.cancelBubble = true;
            }

        }

        //2.给document绑定事件，因为可以冒泡，只要判断，点击的不是login，那么隐藏模态框
        document.onclick = function (event) {
            //获取点击按钮后传递过来的值。
            event = event || window.event;

            //兼容获取事件触动时，被传递过来的对象
//            var aaa = event.target || event.srcElement;
            var aaa = event.target?event.target:event.srcElement;

            console.log(event.target);

            //判断目标值的ID是否等于login，如果等于不隐藏盒子，否则隐藏盒子。
            if(aaa.id !== "login"){
                mask.style.display = "none";
            }
        }


    </script>

</body>
</html>

事件委托

利用冒泡原理，通过点击孩子，传到父亲那里，然后通过父亲的event.target，来判断点击的是谁，意思就是孩子的事情，委托给我父亲。

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <style>
        li {
            height: 30px;
            line-height: 30px;
            margin: 3px 0;
            background-color: red;
            cursor: pointer;
        }
    </style>
</head>
<body>
<button>创建4个移民li</button>
<ul>
    <li>我是土著li</li>
    <a href="#">我是土著li</a>
    <li>我是土著li</li>
    <li>我是土著li</li>
    <a href="#">我是土著li</a>
    <li>我是土著li</li>
</ul>
<script>

    var liArr = document.getElementsByTagName("li");
    var ul = document.getElementsByTagName("ul")[0];
    var btn = document.getElementsByTagName("button")[0];

//    for(var i=0;i<liArr.length;i++){
//        liArr[i].onclick = function () {
//            alert("我是土著li");
//        }
//    }

    btn.onclick = function () {
        for(var i=1;i<=4;i++){
            var newLi = document.createElement("li");
            var newA = document.createElement("a");
            newLi.innerHTML = "我是移民li";
            newA.innerHTML = "我是移民a";
            newA.href = "#";
            ul.appendChild(newLi);
            ul.appendChild(newA);
        }
    }


    //普通的时间绑定，没有办法为新创建的元素绑定事件。所以我们要使用冒泡的特性，事件委托！
    //事件委托
    ul.onclick = function (event) {
        //获取事件触动的时候传递过来的值
        event = event || window.event;
        var aaa = event.target?event.target:event.srcElement;
        //判断标签名，如果是li标签弹窗
        if(aaa.tagName === "LI"){
            alert("我是li");
        }
    }

</script>

</body>
</html>

11-获取内嵌式和外链式的属性值.html

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <style>
        div {
            background-color: pink;
            /*border: 1px solid #000;*/
            padding: 10px;
        }
    </style>
</head>
<body>

    <div style="width: 100px;height: 100px;"></div>


    <script>

        //赋值：div.style.....
        var div = document.getElementsByTagName("div")[0];
        div.style.width = "1000px";

        //获取值：
//        console.log(div.offsetWidth);
//        console.log(div.style.width);
//        console.log(div.style.border);

        //获取行内式和内嵌式
//        console.log(typeof window.getComputedStyle(div,null));
//        console.log(window.getComputedStyle(div,null).border);
//        console.log(window.getComputedStyle(div,null)["background-color"]);

//        console.log(div.currentStyle.padding);
//        console.log(div.currentStyle["background-color"]);


        console.log(getStyle(div,"padding"));
        console.log(getStyle(div,"background-color"));


        //兼容方法获取元素样式
        function getStyle(ele,attr){
            if(window.getComputedStyle){
                return window.getComputedStyle(ele,null)[attr];
            }
            return ele.currentStyle[attr];
        }

    </script>

</body>
</html>

缓动框架封装

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <style>
        div {
            position: absolute;
            top: 40px;
            left: 10px;
            width: 100px;
            height: 100px;
            background-color: pink;
        }
    </style>
</head>
<body>

    <button>运动到400然后回来</button>
    <div></div>


    <script>

        var btnArr = document.getElementsByTagName("button");
        var div = document.getElementsByTagName("div")[0];

        btnArr[0].onclick = function () {
            var json1 = {"left":300,"top":200,"width":300,"height":200};
            var json2 = {"left":10,"top":30,"width":100,"height":100};
            animate(div,json1, function () {
                animate(div,json2, function () {
                    animate(div,json1);
                });
            });

        }



        //参数变为3个
        function animate(ele,json,fn){
            //先清定时器
            clearInterval(ele.timer);
            ele.timer = setInterval(function () {
                //开闭原则
                var bool = true;


                //遍历属性和值，分别单独处理json
                //attr == k(键)    target == json[k](值)
                for(var k in json){
                    //四部
                    var leader = parseInt(getStyle(ele,k)) || 0;
                    //1.获取步长
                    var step = (json[k] - leader)/10;
                    //2.二次加工步长
                    step = step>0?Math.ceil(step):Math.floor(step);
                    leader = leader + step;
                    //3.赋值
                    ele.style[k] = leader + "px";
                    //4.清除定时器
                    //判断: 目标值和当前值的差大于步长，就不能跳出循环
                    //不考虑小数的情况：目标位置和当前位置不相等，就不能清除清除定时器。
                    if(json[k] !== leader){
                        bool = false;
                    }
                }

                console.log(1);
                //只有所有的属性都到了指定位置，bool值才不会变成false；
                if(bool){
                    clearInterval(ele.timer);
                    //所有程序执行完毕了，现在可以执行回调函数了
                    //只有传递了回调函数，才能执行
                    if(fn){
                        fn();
                    }
                }
            },25);
        }




        //兼容方法获取元素样式
        function getStyle(ele,attr){
            if(window.getComputedStyle){
                return window.getComputedStyle(ele,null)[attr];
            }
            return ele.currentStyle[attr];
        }


    </script>


</body>
</html>

手风琴效果

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <style>
        ul{list-style: none}
        *{margin:0; padding:0;}
        div{
            width: 1150px;
            height: 400px;
            margin:50px auto;
            border:1px solid red;
            overflow: hidden;

        }
        div li {
            width: 240px;
            height: 400px;
            float: left;
        }
        div ul {
            width: 1300px;
        }
    </style>
    <script src="../jquery1.0.0.1.js"></script>
    <script>
        window.onload = function () {
            //需求：鼠标放入到li中该盒子变宽，其他的盒子变窄。移开大盒子，回复原样。
            //步骤：
            //1.给li添加背景
            //2.绑定onmouseover事件，鼠标放入到li中该盒子变宽，其他的盒子变窄
            //3.移开大盒子，回复原样


            var div = document.getElementsByTagName("div")[0];
            var liArr = div.getElementsByTagName("li");
            //1.给li添加背景
            for(var i=0;i<liArr.length;i++){
                liArr[i].style.background = "url(images/"+(i+1)+".jpg) no-repeat";

                //2.绑定onmouseover事件，鼠标放入到li中该盒子变宽，其他的盒子变窄
                liArr[i].onmouseover = function () {
                    //排他思想
                    for(var j=0;j<liArr.length;j++){
                        //引用框架实现宽度变窄
                        animate(liArr[j],{"width":100});
                    }
                    //剩下他自己
                    animate(this,{"width":800})
                }
            }

            //3.移开大盒子，回复原样
            div.onmouseout = function () {
                for(var j=0;j<liArr.length;j++){
                    //引用框架实现宽度变窄
                    animate(liArr[j],{"width":240});
                }
            }
        }
    </script>
</head>
<body>
<div>
    <ul>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
    </ul>
</div>
</body>
</html>

仿360 开机效果

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <style>
        .box{
            width: 322px;
            position: fixed;
            bottom:0;
            right:0;
        }
        span{
            position: absolute;
            top:0;
            right:0;
            width:30px;
            height: 20px;
            cursor: pointer;
        }
    </style>
    <script src="../jquery1.0.0.1.js"></script>
    <script>
        window.onload = function () {
            //需求：下面的盒子高度变为0，然后大盒子的宽在变为0.
            var guanbi = document.getElementById("guanbi");
            var box = guanbi.parentNode;
            var b = document.getElementById("b");

            guanbi.onclick = function () {
                //下面的盒子高度变为0，然后大盒子的宽在变为0.
                animate(b,{"height":0}, function () {
                    animate(box,{"width":0});
                });
            }
        }
    </script>
</head>
<body>
    <div class="box">
        <span id="guanbi"></span>
        <div class="hd" id="t">
            <img src="images/t.jpg" alt=""/>
        </div>
        <div class="bd" id="b">
            <img src="images/b.jpg" alt=""/>
        </div>
    </div>
</body>
</html>

js框架

/**
 * Created by Lenovo on 2016/9/11.
 */
function show(ele){
    ele.style.display = "block";
}

/**
 * 获取元素样式兼容写法
 * @param ele
 * @param attr
 * @returns {*}
 */
function getStyle(ele,attr){
    if(window.getComputedStyle){
        return window.getComputedStyle(ele,null)[attr];
    }
    return ele.currentStyle[attr];
}

//参数变为3个
function animate(ele,json,fn){
    //先清定时器
    clearInterval(ele.timer);
    ele.timer = setInterval(function () {
        //开闭原则
        var bool = true;


        //遍历属性和值，分别单独处理json
        //attr == k(键)    target == json[k](值)
        for(var k in json){
            //四部
            var leader = parseInt(getStyle(ele,k)) || 0;
            //1.获取步长
            var step = (json[k] - leader)/10;
            //2.二次加工步长
            step = step>0?Math.ceil(step):Math.floor(step);
            leader = leader + step;
            //3.赋值
            ele.style[k] = leader + "px";
            //4.清除定时器
            //判断: 目标值和当前值的差大于步长，就不能跳出循环
            //不考虑小数的情况：目标位置和当前位置不相等，就不能清除清除定时器。
            if(json[k] !== leader){
                bool = false;
            }
        }

        console.log(1);
        //只有所有的属性都到了指定位置，bool值才不会变成false；
        if(bool){
            clearInterval(ele.timer);
            //所有程序执行完毕了，现在可以执行回调函数了
            //只有传递了回调函数，才能执行
            if(fn){
                fn();
            }
        }
    },1);
}



//获取屏幕可视区域的宽高
function client(){
    if(window.innerHeight !== undefined){
        return {
            "width": window.innerWidth,
            "height": window.innerHeight
        }
    }else if(document.compatMode === "CSS1Compat"){
        return {
            "width": document.documentElement.clientWidth,
            "height": document.documentElement.clientHeight
        }
    }else{
        return {
            "width": document.body.clientWidth,
            "height": document.body.clientHeight
        }
    }
}

相关文章

  • DOM-client家族及事件冒泡9

    client 02-三大家族的区别.html 03-浏览器可视区域宽高.html 05-检测屏幕宽度.html 事...

  • JavaScript事件冒泡简介及应用

    JavaScript事件冒泡简介及应用一、什么是事件冒泡在一个对象上触发某类事件（比如单击onclick事件），如...

  • 微信小程序中bind和catch的区别

    bindtap 冒泡事件，事件绑定不会阻止冒泡事件向上冒泡catchtap 非冒泡事件， 事件绑定阻止冒泡事件...

  • 事件冒泡及捕捉

    IE5.5 IE6.0 事件捕捉： IE使用冒泡型事件、相对的、Netscape使用了另一种称为捕获型事件(eve...

  • 事件绑定 和 方法传值

    冒泡和非冒泡事件绑定 bindtap: 冒泡事件绑定 catchtap: 非冒泡事件绑定当其他的事件冒泡到当前元素...

  • 事件及如何阻止事件冒泡

    事件是什么？事件是指，javascript与文档或浏览器发生特定交互的瞬间。事件分为三个阶段执行：事件捕获阶段；处...

  • wepy基础知识

    1、bind事件绑定不会阻止冒泡事件向上冒泡，catch事件绑定可以阻止冒泡事件向上冒泡。https://deve...

  • 微信小程序 WXML事件 WXML冒泡事件列表

    WXML事件分为 冒泡事件 和 非冒泡事件。 冒泡事件：当一个事件被触发后，该事件会向父节点传递。 非冒泡事件：不...

  • 小程序冒泡事件

    冒泡事件列表 解决冒泡事件

  • 什么是事件冒泡/捕获？

    事件冒泡：子元素事件的触发会影响父元素事件开关事件冒泡：A:开启事件冒泡：element.addEventList...

网友评论

      本文标题：DOM-client家族及事件冒泡9

      本文链接：https://www.haomeiwen.com/subject/ukecvxtx.html

      延伸阅读

      深度阅读

      • 您也可以注册成为美文阅读网的作者，发表您的原创作品、分享您的心情！

      栏目导航

      热点阅读

      关于我们|服务条款|联系我们|DOM-client家族及事件冒泡9|投稿指南|网站地图|RSS订阅|排版工具|手机版

      提供经典美文摘抄,优美散文欣赏,现代诗歌精选,短篇小说,心情随笔,表白情书范文,故事会在线阅读欣赏

      Copyright © 2014-2023 Haomeiwen.com All Rights Reserved. 好美文阅读网 版权所有

      备案信息：桂公网安备 45052102000051号 · 桂ICP备13007215号-3

      本站所收录作品、热点评论等信息部分来源互联网，目的只是为了系统归纳学习和传递资讯

      所有作品版权归原创作者所有，与本站立场无关，如不慎侵犯了你的权益，请联系我们告知，我们将做删除处理！