web前端—前端三剑客之JS(13)：BOM基础、浏览器窗口

最新推荐文章于 2024-05-20 14:50:24 发布

觅远

最新推荐文章于 2024-05-20 14:50:24 发布

阅读量569

点赞数

文章标签： javascript js

本文链接：https://blog.csdn.net/JBY2020/article/details/118528761

版权

菜鸟教程：https://www.runoob.com/js/js-window.html

BOM基础

BOM（browser Object Model）是浏览器对象模型。在浏览器中window就是BOM的核心。

window:代表整个浏览器窗口(window是BOM中一个对象，并且是最顶层的对象) 。

这个对象下有很多方法：

        alert/prompt/confirm/close/open

内置的的对象：

        1.history(就是我们常说的历史记录)

        2.location(包括当前网页url的相关信息)

        3.navigator(浏览器信息)

        4.window.onload/onscroll/onresize事件

浏览器事件

由事件触发的函数在运行的时候，浏览器会往函数中传入一个参数,这个参数就是浏览器事件,属于BOM，如鼠标点击事件。

获取浏览器事件对象的方法

第一种的方法就是直接在定义函数的时候传入一个参数
第二种的方法就是在函数里面直接获取window.event或是event( 道理和var一个变量一样, var a; 那么a或是window.a都可以获取到变量的值 )

这两个方法都能获取同一个事件(原理是, 浏览器同一时刻只能执行一个事件,所以同时获取到的一定是同一个)

浏览器事件参数

1、浏览器事件参数之鼠标位置类

clientX、clientY：点击位置距离当前body可视区域的x，y坐标
pageX、pageY：对于整个页面来说，包括了被滚动条滚过去的body部分的长度
screenX、screenY：点击位置距离当前电脑屏幕最左上角的x，y坐标
offsetX、offsetY：相对于被点中的元素的坐上角的偏移量(即便当前元素有部分被滚动条隐藏了, 这个偏移量也是按照实际元素的高度来的)
x、y和clientX、clientY一样
layerX,layerY：往上找有定位属性的父元素的左上角（自身有定位属性的话就是相对于自身），都没有的话，就是相对于body的左上角

2、浏览器事件参数之目标元素类

path是一个数组,里面第一个是触发事件的元素, 第二个是该元素的父元素,然后类推。
event.srcElement：表示可以获取当前触发事件的对象。
event.target：事件属性可返回事件的目标节点（触发该事件的节点），如生成事件的元素、文档或窗口。

srcElement是IE下的属性，target是Firefox下的属性，Chrome浏览器同时有这两个属性，这两个其实是同一个东西。

3、浏览器事件参数之事件类型类

同过event.type方法可以获得事件类型

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div style="width: 200px;height:200px;background-color:rgb(0, 255, 76);margin: 0 auto;">
        <div style="width: 100px;height:100px;background-color:yellow;margin: 50px;" class="ck"></div>
    </div>
    <script>
        var bo = document.querySelector('.ck');
        bo.onclick = function (ev) {
            console.log(ev);     // 直接在定义函数的时候传入一个参数获得事件对象
            console.log(window.event);    // 在函数里面直接获取window.event或是event获得事件对象
            bo.style.backgroundColor='red';   
           
            // 浏览器事件参数之鼠标位置类
            console.log(ev.clientX,ev.clientY);    // clientX、clientY点击位置距离当前body可视区域的x，y坐标
            console.log(ev.offsetX,ev.offsetY);  // 相对于被点中的元素的坐上角的偏移量
            console.log(ev.pageX,ev.pageY);   // 对于整个页面来说，包括了被滚动条滚过去的body部分的长度
            console.log(ev.x,ev.y);   //  x、y和clientX、clientY一样
            console.log(ev.layerX,ev.layerX);  // 是鼠标相对于目标元素最近（不包括自己）的具有absolute/relative的定位元素的位置
            
            // 浏览器事件参数之目标元素类
            console.log(event.srcElement);   // 表示可以获取当前触发事件的对象,srcElement是IE下的属性
            console.log(event.target);   // 事件属性可返回事件的目标节点（触发该事件的节点），如生成事件的元素、文档或窗口,target是Firefox下的属性
            console.log(event.path);   // 是一个数组,里面第一个是触发事件的元素, 第二个是该元素的父元素,然后类推
            
            // 浏览器事件参数之事件类型类
            console.log(event.type);   // 获取事件对象类型
            }
    </script>
</body>
</html>

浏览器窗口

获取浏览器窗口大小: window.outerWidth、 window.outerHeight

获取浏览器窗口位置：window.screenLeft、window.screenX

设置浏览器窗口位置：

window.moveTo()接收的是新位置的x 和y 坐标值

window.moveBy()接收的是在水平和垂直方向上移动的像素数

注意：此方法当前谷歌系浏览器基本都是默认禁用的,所以调用后没啥效果

打开浏览器窗口window.open()

window.open(url, target, attr, boolean);

参数：

第一个是url, 你想要打开的网页的网址
第二个目标地址,是你想在哪里打开这个这网页, 参数可以是：_self 框架元素、parent 框架元素的父元素、top 框架元素的顶级父元素或blank新网页, 或是某个iframe的框架名称
第三个新窗口特性(该特性部分浏览器的安全控制规则不让使用, 具体特性可以间附表)
第四个参数表示新页面是否取代浏览器历史记录中当前加载页面的布尔值

新窗口特性表：

有些浏览器在默认情况下可能不允许我们针对主浏览器窗口调整大小或移动位置，但却允许我们针对通过window.open()创建的窗口调整大小或移动位置。window.open("http://www.baidu.com","_blank","height=600,width=600,top=100,left=50,resizable=yes");

关闭浏览器窗口window.close()

浏览器主窗口目前绝大多数浏览器是不允许用户通过js来关闭的, 只有用户自己创造的小窗口才可以用window.close关闭

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <script>
        // 浏览器窗口
        console.log(window.outerWidth,window.outerHeight);   // 浏览器可视区宽度/高度
        console.log(window.screenX,window.screenLeft);   // 浏览器窗口位置
        window.moveTo(200,300);    // 接收的是新位置的x和y坐标值,谷歌系浏览器基本都是默认禁用的,所以调用后没效果
        
        function wind(i) {
            if(i == 'open'){    // 打开新的浏览器窗口
                window.open("http://www.baidu.com","_blank","height=600,width=600,top=100,left=50,resizable=yes");
            }else if(i == 'close'){
            window.close();    // 关闭浏览器窗口
            }
        }
    </script>
</body>
</html>

觅远

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
1
评论
web前端—前端三剑客之JS(13)：BOM基础、浏览器窗口

菜鸟教程：https://www.runoob.com/js/js-window.htmlBOM基础BOM（browser Object Model）是浏览器对象模型。在浏览器中window就是BOM的核心。window:代表整个浏览器窗口(window是BOM中一个对象，并且是最顶层的对象) 。这个对象下有很多方法：alert/prompt/confirm/close/open内置的的对象：1.history(就是我们常说的历史记录)...
复制链接

扫一扫