# window 对象常见事件

# 窗口加载事件

1
2
3

window.onload = function() {}
/*或者*/
window.addEventListener("load", function() {})

window.onload 是窗口 (页面) 加载事件，当文档内容完全加载完成会触发该事件 (包括图像，脚本文件，CSS 文件等), 就调用的处理函数

1

document.addEventListener("DOMContentLoaded", function(){})

DOMContentLoaded 事件触发时，仅当 DOM 加载完成，不包括样式表，图片，flash 等

# 调整窗口大小事件

1
2
3

window.onresize = function() {}

window.addEventListener("resize", function() {})

window.onresize 是调整窗口大小加载事件，当触发时就调用的处理函数

** 注意 : **

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

# 定时器

# setTimeout () 定时器

1

window.setTimeout(调用函数, [延迟的毫秒数]);

setTimeout () 方法用于设置一个定时器，该定时器在定时器到期后执行调用函数

** 注意 : **

1. window 可以省略
2. 这个调用函数可以直接写函数，或者写函数名或者采取字符串‘函数名 ()’三种形式，第三种不推荐
3. 延迟的毫秒数省略默认是 0, 如果写，必须是毫秒
4. 因为定时器可能有很多，所以我们经常给定时器赋值一个标识符

setTimeout () 这个调用函数我们也称为回调函数 callback

普通函数是按照代码顺序直接调用

而这个函数，需要等待时间，时间到了才去调用这个函数，因此称为回调函数

onclick = function(){} , addEventListener('click', function(){}) 里面的函数也是回调函数

# 停止 setTimeout () 定时器

1

window.clearTimeout(timeoutID);

注意 :

1. window 可以省略
2. 里面的参数就是定时器的标识符

# setInterval () 定时器

1

window.setInterval(回调函数, [间隔的毫秒数]);

setInterval () 方法重复调用一个函数，每隔这个时间，就去调用一次回调函数

注意 :

1. window 可以省略
2. 这个调用函数可以直接写函数，或者写函数名或者采取字符串‘函数名 ()’三种形式
3. 间隔的毫秒数省略默认是 0, 如果写，必须是毫秒，表示每隔多少毫秒就自动调用这个函数
4. 因为定时器可能有很多，所以我们经常给定时器赋值一个标识符

# 停止 setInterval () 定时器

1

window.clearInterval(intervalID);

clearInterval () 方法取消了先前通过调用 setInterval () 建立的定时器

注意 :

1. window 可以省略
2. 里面的参数就是定时器的标识符