JS笔记18（BOM-浏览器对象模型）

js中的对象：

        ES:11个引用类型对象

        DOM：每一个dom元素都是对象

        BOM：*window（全局对象）、history（历史对象）、***location（跳转对象）、screen（屏幕对象）、navigator（保存着浏览器的信息）、event（*****事件）

1、window对象：

        1、网页打开新链接的方式：

                1、替换当前页面，可以后退： HTML：<a href="url">内容</a>JS：open("url","_self");
                2、替换当前页面，禁止后退： JS：location.replace("网址");

                3、在新窗口打开：HTML：<a href="url" target="_blank">内容</a>；JS:open("url","_blank");

                4、新窗口打开，只能打开一个：HTML：<a href="url" target="自定义name">内容</a>；JS：open("url","自定义name");

                5、a标签的作用：跳转-锚点-下载：<a href="xx.rar/zip/exe"></a>-打开：<a href="xx.jpg/png/gif/txt"></a>--直接书写js：<a href="javascript:js语句;"></a>

        2、属性：

                1、获取浏览器完整大小：outerWidth.outHeight;

                2、获取浏览器的文档显示区域：innerWidth innerHeight;

                3、屏幕大小：screen.width screen.height

        3、方法：

                1、打开新窗口 var newWindow=open("url","自定义/target","width=xx,height=xx,left=xx,top=xx")

                没有写第三个参数的时候默认小窗口会喝浏览器合为一体；

                2、改变窗口大小：newWindow.resizeTo(宽，高)

                3、改变窗口位置：newWindow.moveTo（x,y）

                4、关闭窗口：老窗口/新窗口.close();

                5、获取鼠标位置：一定要有事件，事件的回调函数中传入形参,自动接住event

                        获取位置：

                    e.screenX    e.screenY;//相对于屏幕的坐标
                    e.clientX    e.clientY;//相对于文档显示区域的坐标
                    e.pageX        e.pageY;//相对于网页的坐标

  window.onmouseover=function(a ){
            var x=a.pageX;
            var y=a.pageY;
            var img=new Image();
            img.id="i1";
            img.src="2.png"
            img.style.left=`${x}px`
            img.style.top=`${y}px`;
            img.onload=function(){
                img.style.opacity="0";
                img.style.transform="rotate(360deg) scale(1.5)"
            }
            bd.appendChild(img)
        }

          6、 定时器：   

                周期性定时器：开启timer=setInterval(()=>{操作},间隔毫秒数)；停止：clearInterval(timer);

                一次性定时器：开启timer=setTimeout(()=>{操作},间隔毫秒数)  ；停止：clearTimeout(timer);

        7、history对象：保存当前窗口的历史记录

                前进：history（1）；后退：history（-1）；刷新history（）

        8、location对象：保存当前窗口的url网址

                协议：http/https/ftp/ws...
                域名/主机号：127.0.0.1/www.baidu.com
                端口号：    :8020/百度没有 - 不可能，*https默认端口号为443  http默认端口号为80，默认端口号可以省略不写
                文件相对路径：/jx/06dom/bom02/new/01-2.html 、百度加密啦
                查询字符串：?wd=178&rsv_spt=1&... - 多半都是用户提交时产生的东西，需要传输到服务器端+

                跳转：location=“新url”；跳转后禁止后退：location.replace("新url")；刷新:location.reload();

        9、navifator:保存浏览器的基本信息

        10、客户端存储技术：

                本地级：localStorage    会话级：sessionStorage

                设置：xxxStorage.属性名=值；读取：xxxStorage.属性名；删除：xxxStorage.removeItem("属性名"); 清空：xxStorage.clear();

//记住账号密码 
 if(jm.checked){
            localStorage.name=pn.value;
            localStorage.pwd=pwd.value;
            var xz=new Date(),
            ms=xz.getTime()+1000*3600*24*30;
            localStorage.time=ms;
            console.log(localStorage.time)
        }
 //检查是否保存有东西并填充
 if(localStorage.length>0){
                pn.value=localStorage.name;
                pwd.value=localStorage.pwd;
            }

        11、event事件：

                事件周期：从事件发生，到所有的事件处理函数执行完毕的全过程
                    主流：3个阶段
                        1、捕获阶段：由外向内，记录着要发生的事件有哪些
                        2、【目标元素->当前点击的那个】优先触发
                        3、冒泡触发：有内向外，依次触发事件

                1、获取事件对象event：会自动作为事件处理函数的第一个形参传入

                        获取鼠标位置；

                        阻止冒泡：e.stopPropagation();老IE：e.cancelBubble=true;                        

兼容：if(e.stopPropagation){
				e.stopPropagation();
			      }else{
				e.cancelBubble=true;
			      }

                事件委托：

                减少事件绑定，可以找到父元素，然后事件绑定在父元素上，利用冒泡来绑定其他子元素

                        用获取到的事件对象e.target,代替了事件中this。或者e.srcElement

 father.onclick=(e)=>{
             console.log(e)
             lis.forEach(v=>{
                    v.style.background="transparent"
                })
            if(e.target.nodeName=="SPAN"){
                dli.forEach(v=>{
                    v.nextElementSibling.className="hide"
                })
                e.target.nextElementSibling.className=e.target.nextElementSibling.className=="hide"?"show":"hide"
                e.target.parentNode.className=e.target.parentNode.className=="open"?"closed":"open"
            }else if(e.target.className=="li"){
                lis.forEach(v=>{
                    v.style.background="transparent"
                })
                e.target.style.background=e.target.style.background=="red"?"transparent":"red"
            }            
        }

                阻止浏览器的默认行为：          

主流：e.preventDefault();
            老IE：e.returnValue=false;
            兼容：if(e.preventDefault){
                e.preventDefault();
                  }else{
                e.returnValue=false;
                  }

            扩展：1、右键事件：oncontextmenu
                  2、键盘按下事件：onkeydown

e还可以获取键盘的键码：e.keyCode;