JS---BOM_jsbom-CSDN博客

本文链接：https://blog.csdn.net/weixin_46602653/article/details/125376572

// BOM概述
// window对象的常见事件

 // onload事件加载对象   ,
 window.onload=function(){}传统注册方式只能写一次,如果有多个,会以最后一个window.onload为准
 window.addEventListener('load',fn)  则没有限制   
document.addEventListener('DOMContentLoaded',function(){})
 DOMContentLoaded 事件触发时,仅当DOM加载完成,不包括样式表,图片 flash等  ie9以上才支持

 window.onresize  是调整窗口大小加载事件,当触发时就调用处理函数
window.innerWidth  是获取当前屏幕宽度

// 定时器

window 提供了2个定时器

    // setTimeout()   ----->      停止定时器  window.clearTimeout(timeoutID);   window可以省略
    // setInterval()   ----->      停止定时器  window.clearInterval(intervalID)  window可以省略

    // setInterval() 每间隔这个时间就调用函数   反复调用  不停除非清楚定时器
    // setTimeout()  执行一次 就结束这个定时器


    // setTimeout()语法  window.setTimeout(调用函数,延时时间);
    // window在调用的时候可以省略
    // 延时单位是毫秒  不写默认为0
    // 这个调用函数可以直接写函数,还可以写  函数名  还有一些  '函数名()'不推荐第三种写法
    // 页面中有很多定时器,我们经常给定时器加标识符

// JS执行机制

  // js是单线程语言   
    // html5提出web worker标准  允许js脚本创建多个线程  于是js出现了同步和异步
    // 同步 前一个任务结束后再执行后一个任务
    // 异步 做一件事时还可以处理其他事
      // 同步任务在主线程执行栈,异步任务在任务队列(消息队列)   先执行主线程执行栈, 之后再把任务队列里的放到主线程栈执行

// 执行机制   主线程栈--->异步进程处理--->任务队列
// 异步进程处理 就是主线程里面的回调函数达到要求才会放到任务队列  比如点击按钮之后才能放到任务队列  比如定时器几秒到了才能执行放到任务队列   之后主线程栈执行完才能从任务队列再放到主线程栈执行
// 主线程一直查看任务队列有无异步任务  有就执行  这个操作叫做event loop 事件循环      一直查询任务队列有无输出对象 
     // 执行完同步任务之后才会执行异步任务
      // js的异步任务是通过回调函数实现的
    // 常见的异步任务
    // 普通事件click resize等
    // 资源加载 load error等
    // 定时器包括setInterval  setTimeout 等

// this指向问题，一般情况下this最终指向的是那个调用它的对象
// 1全局作用域或者普通函数中的this指向全局对象window （注意定时器里面的this指向window）
// 2方法调用中谁调用this指向谁
// 3构造函数中this指向构造函数的实例实例化的时候会new一块空间

// location对象

   // location对象
        // location对象的属性
        // location.href 获取或设置整个URL
        // location.host 返回主机或者域名
        // location.port 返回端口号  如未写返回空字符串
        // location.pathname 返回路劲
        // location.search  返回参数
        // location.hash 返回 片段 #后面内容常见于链接 锚点

    // url组成
    // protocol://host[:post]/path/[?query]#fragment
    // http:www.baidu.com/index.html?name=andy&age=10#link
    // protocol 通信协议  常用的http，ftp，maito等
    // host 主机域名 www.baidu.com
    // post 端口号 可选 省略时使用方案的默认端口 http默认80
    // path  路劲
    // query 参数 以键值对形式通过&分割
    // fragment 片段  #后面的内容 常见于链接锚点

location对象常见方法
   // location.assign();   和href一样可以跳转页面（也称为重定向页面）
        // location.replace();  替代当前页面，因为不记录历史数据  所以不能后退
        // location.reload(); 重新加载页面 相当于刷新或者f5  如果参数为true为强制刷新 ctrl+f5   强制刷新就把浏览器缓存都清空了

// navigator对象

   // navigator对象包含浏览器的信息,有很多属性最常用的就是userAgrent 该属性返回由客户机发送服务器的user-agrent头部的值
    // navigator.userAgent  有一段判断代码其中用到这个知识点 判断用移动端还是pc端打开的网页 以此来显示不同的页面

// history对象

   // window 对象给我们提供了history 对象,与浏览器历史记录进行交互,该对象包含用户(在浏览器窗口中)访问过的url
        // back()  后退功能
        // forward() 前进
        //go()前进后退功能   参数为1前进一个页面  -1后退一个页面
         history.go(2);  //写2就前进2个