<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
</style>
</head>
<body>
<div id="app" style="width: 100px; height: 100px; background-color: brown;"></div>
<div style="height: 2000px;"></div>
<script>
//DOMContentLoaded 是页面标签加载完毕就会走这个代码
//onload页面包括资源啊图片啊全部加载完成后，才会走这个代码
// window.onload=function(){
// console.log(111);
// }
// window.addEventListener('DOMContentLoaded', function () {
// console.log(3333);
// })
// window.addEventListener('load', function () {
// console.log(222);
// })
//传统on方式会覆盖绑定
// app.onclick=function(){
// this.style.width='200px'
// }
// app.onclick=function(){
// this.style.height='200px'
// }//只执行后面的一个
//添加实践监听器，可以重复绑定事件
//有第三个参数，如果为true 则代表事件从外往内执行
//如果为false 或者为空 代表事件冒泡，从内往外执行
// app.addEventListener('click',function () {
// this.style.width='200px'
// })//,flase
// app.addEventListener('click',function () {
// this.style.height='200px'
// },true)
// //解绑 事件
// let fn=function () {
// console.log(1111);
// app.style.width='200px'
// }
// app.addEventListener('click',fn)
// // setTimeout(() => {
// // app.removeEventListener('click',fn)
// // }, 2000);
// //js可以自动触发事件
// let fn=function () {
// console.log(1111);
// app.style.width='200px'
// }
// app.addEventListener('click',fn)
// setTimeout(() => {
// //只要绑定过的事件，都可以拿来做自动触发事件
// app.click()
// }, 2000);
//
window.onresize=function(){
console.log(window.innerWidth);
}
//滚动条
window.onscroll=function(){
if (document.documentElement.scrollTop>300) {
app.style.position='fixed'
}else{
app.style.position='static'
}
}
</script>
</body>
</html>
