Bom五大对象

一、window 

（一）、属性 innerHeight、outerHeight、document、location、screen、history、navigator,event

1、窗口

innerHeight、innerWidth（返回window的内部高度，包括横向滚动条）

document.body.clientHeight、document.documentElement.clientWidth

（返回window的内部高度，不包括横向滚动条）

outerHeight,outerWidth（返回浏览器的整个页面高度，包括搜索栏等）

2、document对象 

document.createElement() 和 document.createTextNode() 需要配合appendChild() 或者insertBefore（）一起使用 board.appendChild(e)  将元素 e 放在父元素board中的的最后一个节点处 board.insertBefore(textNode,null) 将元素 e 放在父元素board中的的最后一个节点处 board.insertBefore(textNode,toDocu) 将元素 e 放在父元素board中的的toDocu节点处的前面

（二）、方法

• window.open() - 打开新窗口
• window.close() - 关闭当前窗口

现在很多浏览器禁止了使用脚本语言关闭页面的功能，所有要想关闭当前页面，最好的方法时跳转到下一个页面，然后关闭，注意火狐(Gecko )和谷歌(Blink) 用法和其他浏览器不一样

弹出框，点击确定，关闭当前页面，否则重新开启一个新的页面，并调整大小？

        function closeWin() {
            console.log('关闭当前浏览器');
            console.log(navigator.userAgent);
            if (confirm("确定要退出吗？")) {
                var userAgent = navigator.userAgent;
                if (userAgent.indexOf("Firefox") != -1 || userAgent.indexOf("Chrome") != -1) {
                    window.location.href = "about:blank";
                    // window.open("", "_self").close();
                } else {
                    window.opener = null;
                    window.open("about:blank", "_self");
                    window.close();
                }
            }
            else {
                window.open('','','width=100,height=100')
                window.resizeTo(100,100)
                console.log('--');
            }

        }

• window.moveTo() -移动当前窗口
• window.resizeTo() -重新调整当前窗口
• alert() 、confrim()、prompt() 分别用于弹出警告对话框、确认对话框和提示输入对话框。
• setTimeout()、clearTimeout() 、setInterval()、cleanInterval() 设置删除定时器

二、screen

Screen 对象包含有关客户端显示屏幕的信息。

三、location

四、history

属性：length、statue

方法：

History.back()、History.forward()、History.go() ；history.go(0) 相当于刷新当前页面

pushState()，replaceState()；

事件： popstate

        // history
        console.log('history',history);
        // pushState()方法在浏览记录（History 对象）中添加一个新记录。
        // 添加新记录后，浏览器地址栏立刻显示2.html，但并不会跳转到2.html.它只是成为浏览历史中的最新记录。
        var stateObj = {'com':'1'}
        // history.pushState(stateObj, null, '2.html');
        history.pushState(stateObj, null, '?pagOne');
        console.log('stateObj',history.state); //stateObj Object

        // 用来修改 History 对象的当前记录，其他都与pushState()方法一模一样。
        // History.replaceState()

        // popstate 对象
        // 调用pushState()方法或replaceState()方法 ，并不会触发该事件，只有用户点击浏览器倒退按钮和前进按钮，
        // 或者使用 JavaScript 调用History.back()、History.forward()、History.go()方法时才会触发。
        window.addEventListener('popstate',function(e){
            console.log('e',e);
        })

五、navigator

 存储了与浏览器相关的信息，例如名称、版本等

        // navigator
        // 存储了与浏览器相关的信息，例如名称、版本等
        console.log('appName',navigator.appName); //appName Netscape
        console.log('userAgent',navigator.userAgent); 
        //userAgent Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/107.0.0.0 Safari/537.36 Edg/107.0.1418.35

 Event对象：

 Event 对象代表事件的状态，当dom tree中某个事件被触发的时候，会同时自动产生一个用来描述事件所有的相关信息（比如事件在其中发生的元素、键盘按键的状态、鼠标的位置、鼠标按钮的状态。）的对象，这个对象就是event（事件对象）。

event对象是用来描述【发生的事件的信息】的

常用属性和方法：

一、属性：

type	触发事件的类型
target	返回事件真正的触发者         document.onclick = function(e){             console.log(e.target); //  触发谁，返回谁         } 属性的兼容性写法： srcElement(ie浏览器) var target = e.target || e.srcElement; var eve = eve || window.event e.target.dataset 获取节点的自定义属性(格式为：data-名字 )或者属性值
currentTarget	返回事件的监听者(触发的事件绑定到了哪个节点，就返回谁         document.onclick = function(e){            console.log('currentTarget',e.currentTarget);   //事件绑定document，返回document         }
button	event.button=0|1|2 ，0指左键，1指中键，2指右键
key keyCode	键盘事件中（keydown、keyup、keypress...） key: 返回键盘具体的键； keyCode：返回键的ASCII 码         document.onkeydown = function(e){             console.log('key',e.key);   //key a             console.log('keyCode',e.keyCode);   //键 的ASCII码         }

二、方法：

stopPropgation() （IE：cancelBubble() ）

阻止冒泡事件     <div id="divEle">         div标签         <h1 >h1</h1>         <span id="spanEle">span 标签</span>     </div> <script>         let span =  document.getElementById('spanEle');         let div =  document.getElementById('divEle');         div.addEventListener('click',function(e){             console.log('farther');         })         span.addEventListener('click',function(e){             //e.stopPropagation();    加了只打印出 son              console.log('son');  // son farther         }) </script>