windos事件对象code

最新推荐文章于 2024-07-04 11:12:12 发布

miku@meow

最新推荐文章于 2024-07-04 11:12:12 发布

阅读量262

点赞数

分类专栏：笔记文章标签： javascript 前端 html

本文链接：https://blog.csdn.net/weixin_51847874/article/details/122806460

版权

笔记专栏收录该内容

75 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        #red {
            width: 300px;
            height: 300px;
            background-color: red;
        }
        #green {
            width: 200px;
            height: 200px;
            background-color: green;
        }
        #blue {
            width: 100px;
            height: 100px;
            background-color: blue;
        }
        div {
            margin: 50px auto;
            padding-top: 0.1px;
            border-radius: 50%;
        }
    </style>
</head>
<body>
    <div id="red">
        <div id="green">
            <div id="blue"></div>
        </div>
    </div>

    <script>
        /* 
            eventPhase属性：该属性的值为1、2、3
            1：表示由于事件捕获而引起的事件的执行
            2：表示事件流中的当前元素
            3：表示由于事件冒泡而引起的事件的执行
        */
        var red = document.querySelector('#red');
        var green = document.querySelector('#green');
        var blue = document.querySelector('#blue');

        red.addEventListener('click', function(e) {
            console.log(e.eventPhase);
        }, true);

        green.addEventListener('click', function(e) {
            console.log(e.eventPhase);
        }, true);

        blue.addEventListener('click', function(e) {
            console.log(e.eventPhase);
        }, true);
    </script>
</body>
</html>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        div {
            width: 200px;
            height: 200px;
            background-color: darkmagenta;
        }
    </style>
</head>
<body>
    <!-- 
        bubbles属性的作用就是用来判断当前事件是否支持事件冒泡，如果是结果为true、否则结果为false
     -->
    <div></div>


    <script>
        var div = document.querySelector('div');

        // div.onmouseover = function(e) {
        //     console.log('移入事件被触发了');
        //     console.log(e.bubbles);
        // };
        div.onmouseenter = function(e) {
            console.log('mouseenter事件被触发了');
            console.log(e.bubbles);
        };
    </script>
</body>
</html>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <!-- 
        mousewheel事件：鼠标滚动事件，其事件对象中button属性的值为为0，该事件的事件对象中有一个wheelDelta属性，该属性的值在不同浏览器下面返回的值不同，谷歌浏览器是148和-148，IE下面120和-120，如果是负值表示向下滚动，如果是正数表示向上滚动
        DOMMouseScroll事件：适用于火狐浏览器，注意需要使用DOM2事件事件处理程序的添加方式来添加,该事件的事件对象中有detail属性，该属性可以用来判断滚轮滚动的方向，如果是正数表示向下，如果是负数表示向上
     -->
    <script>
        // document.onmousewheel = function(e) {
        //     console.log(e.button);
        // };

        // document.onmousewheel = function(e) {
        //     console.log(e.wheelDelta);
        // }

        document.addEventListener('DOMMouseScroll', function(e) {
            console.log(e.detail);
        }, false);
    </script>
</body>
</html>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <!-- <img src="http://t7.baidu.com/it/u=378254553,3884800361&fm=79&app=86&f=JPEG?w=1280&h=2030" alt="">
    <img src="http://t8.baidu.com/it/u=3571592872,3353494284&fm=79&app=86&f=JPEG?w=1200&h=1290" alt="">
    <img src="http://t7.baidu.com/it/u=3616242789,1098670747&fm=79&app=86&f=JPEG?w=900&h=1350" alt=""> -->
    
    <script>
        /* 
            load事件：当文档中所有的节点都加载完毕或某个指定的节点加载完毕后触发该事件，如文档中的所有图片加载完（即能够正常显示），通常这个事件时给window对象添加的
        */
        // window.onload = function() {
        //     console.log('文档内容加载完毕了');
        // }

        
        window.onload = function() {
            var div = document.querySelector('div');

            console.log(div.innerHTML);
        }

    </script>
    <div>hello</div>
    <div>hello</div>
    <div>hello</div>
    <div>hello</div>
    <div>hello</div>
</body>
</html>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <img src="https://www.baidu.com/img/bd_logo1.png" alt="">
    <img src="http://t8.baidu.com/it/u=1484500186,1503043093&fm=79&app=86&f=JPEG?w=1280&h=853" alt="">
    <img src="http://t8.baidu.com/it/u=2247852322,986532796&fm=79&app=86&f=JPEG?w=1280&h=853" alt="">



    <script>
        /* 
            DOMContentLoaded事件：该事件和load事件类似，但是该事件的触发时间要早于load事件，因为该事件会在DOM树渲染完毕后触发，而load事件只有在整个文档加载完毕后触发。注意DOMContentLoaded事件需要使用addEventListener方法来添加
        */

        // window.onDOMContentLoaded = function() {
        //     console.log('DOM树渲染完毕了');
        // };

        window.addEventListener('DOMContentLoaded', function() {
            console.log('0了');
        }, false);
        window.onload = function() {
            console.log('文档加载完毕了');
        }
    </script>
</body>
</html>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <img src="http://www.xinhuanet.com/2020-04/02/1125801982_1585771128.jpg" alt="">
    <img src="http://www.xinhuanet.com/2020-04/02/1125801982_15857711715831n.jpg" alt="">

    <script>
        var img = document.querySelector('img');

        console.log('状态 = ' + document.readyState);


        img.onload = function() {
            console.log('第一张图片加载成功');
        };

        img.onerror = function() {
            console.log('图片加载失败');
        };

        document.addEventListener('DOMContentLoaded', function() {
            console.log('DOM树渲染完毕');
        });
        document.addEventListener('readystatechange', function() {
            console.log('状态 = ', document.readyState);
        })
        window.onload = function() {
            console.log('页面所有内容加载完毕');
        }
    </script>
</body>
</html>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <script>
        /* 
            window对象：
            1.window对象时BOM中的顶级对象，其它对象是window对象的一个属性。
            2.window对象也是一个全局对象，因为在全局作用域下面定义的所有的变量、方法都相等于给window对象绑定的属性或方法，可以使用window.的形式来使用这些属性和方法。在平时使用时可以将window.省略。
            3.另外还要注意，如果是全局的变量或方法，还可以使用this.的形式来调用，因为在全局环境下window == this;
            4.window对象不需要手动创建，当浏览器窗口被打开时，后台会自动创建一个用来管理当前窗口的window对象。当浏览器窗口被改变时该对象会被自动销毁
        */

        function fn() {//全局函数
            var num = 10;//局部变量
            console.log('fn()');
        }

        var num2 = 20; //全局变量


        function outer() {//全局变量
            console.log('outer()')
            function inner() {//闭包

            }
        }


        console.log(window.num2);
        window.fn();
        window.outer();
        // window.inner();//inner方法不是全局的方法，不可以用window来调用


        console.log(window === this);
        
    </script>
</body>
</html>

//
//

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <!-- 
        alert：弹出警告框
        confirm：弹出确认框，window.confirm('提示文字');返回值为布尔值
        prompt：弹出输入框，返回值为字符串类型
        isNaN：判断参数是否为NaN，如果是NaN，返回true、否则返回false
        isFinite：判断参数是否为有限数值
    -->

    <script>
        // window.alert('<i>hello</i>');
        // window.alert('<i>\nhello\n</i>');

        // var res = window.confirm('是否删除');
        // console.log(res);
        
        // var res = window.prompt('请输入一个数值:', 100);
        // console.log(res);

        // var num = 3 * 'a';
        // console.log(window.isNaN(num));

        var num = 3 / 2;
        console.log(window.isFinite(num));

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

//
///

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <button>关闭当前窗口</button>


    <script>
        /* 
            close方法
            1.作用：关闭当前窗口
            2.格式：window.close();
        */

        var btn = document.querySelector('button');

        btn.onclick = function() {
            window.close();
        };
    </script>
</body>
</html>

miku@meow

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
windos事件对象code

//<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> #red {
复制链接

扫一扫