JS-BOM

最新推荐文章于 2024-07-16 15:41:31 发布

逝者如斯夫。

最新推荐文章于 2024-07-16 15:41:31 发布

阅读量48

点赞数

分类专栏： JS 文章标签： html javascript

本文链接：https://blog.csdn.net/weixin_60323200/article/details/120056252

版权

JS 专栏收录该内容

36 篇文章 0 订阅

订阅专栏

什么是BOM（Browser Object Model）

即浏览器对象模型，它提供了独立于内容而与浏览器窗口进行交互的对象，其核心对象是window.

窗口加载事件

document.addEventListener('DOMContentLoaded',function() { } )
DOMContentLoaded事件触发时，仅当DOM加载完成，不包括样式表，图片，flash等等。
Ie9以上才支持。
window.onload = function() { } 或者
window.addEventListener("load",functioan() { } );
有了window.onload就可以把JS代码写到页面元素的上方，因为onload是等页面内容全部加载完毕再去处理函数
window.onload传统注册事件方式只能写一次，如果有多个，会以最后一个window.onload为准
如果使用addEventListener 则没有限制

区别：

load 等页面内容全部加载完毕，包含页面dom元素图片 flash css 等等
DOMContentLoaded 是DOM 加载完毕，不包含图片、flash css 等就可以执行，加载速度比load更快一些

调整窗口大小事件

window.onresize = function() { }
window.addEventListener("resize",function() { });

注意：

只要窗口大小发生像素变化，就会触发这个事件
我们经常利用这个事件完成响应式布局。window.innerWidth当前屏幕的宽度

定时器

setTimeout()
setInterval()

两种定时器的区别：

setTimeout 延时时间到了，就去调用这个回调函数，只调用一次就结束这个定时器
setInterval 每隔这个延时时间，就去调用这个回调函数，一直重复调用这个函数
其他语法规则都一样，以下说明第一个的语法规范和使用方法

setTimeout()定时器

window.setTimeout(回调函数， [延迟的毫秒数]); window在调用时可以省略
setTimeout()方法用于设置一个定时器，该定时器在定时器到期后执行调用函数。也叫回调函数
延迟时间省略默认是0
两种用法如下：

setTimeout(function () {
console.log("敲代码是一件很快乐的事情");
}, 1000);

function callback() {
console.log("今天也好好好敲代
}
setTimeout(callback, 3000);

停止定时器clearTimeout（）

window.clearTimeout(定时器的名字);

location对象的属性

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

location 对象的方法

location对象方法	返回值
location.assign()	跟href一样，可以跳转页面（重定向）
location.replace()	替换当前页面，因为不记录历史，所以不能后退页面
location.reload()	重新加载页面，相当于刷新按钮或者f5如果参数为true强制刷新Ctrl+f5

history对象

history对象方法	作用
back（）	后退功能
forward（）	前进功能
go（参数）	前进后退功能参数如果是1 前进一个页面，-1后退一个页面

dom0和dom2的区别

dom0：同一个事件只执行一次
dom2：同一个事件可以监听多次

同一个事件父子级会进行传递，由子级传给父级称之为冒泡；由父级向子级传递称之为捕获。

e.stopPropagation()；阻止冒泡

e.preventDefault();阻止默认

委托模式

当子级较多是，可以将这个事件添加给父级，通过事件对象的target属性来找到发生动作的子级

 <body>
    <button>1</button>
    <button>2</button>
    <button>3</button>
    <button>4</button>
    <button>5</button>
    <script>
      //1.
      // var btns = document.getElementsByTagName("button");
      // for (var i = 0; i < btns.length; i++) {
      //   btns[i].index = i;
      //   btns[i].onclick = function () {
      //     console.log(this.index);
      //   };
      // }
      //2.委托模式
      var body = document.querySelector("body");
      body.onclick = function (e) {
        console.log(e.target);
      };
    </script>
  </body>