API-其他事件

學習目標：

掌握其他事件

學習內容：

頁面加載事件
元素滾動事件
頁面尺寸事件

頁面加載事件：

加載外部資源（如圖片、外聯CSS和JavaScript等）加載完畢時觸發的事件。

為什么要學？？

有些時候需要等頁面資源全部處理完了做一些事情。
老代碼喜歡把script寫到head中，這時候直接找dom元素找不到。

事件名：load
監聽頁面所有資源加載完畢
給window添加load事件。

 <title>頁面加載事件</title><script>//等待頁面所有資源加載完畢，就回去執行回調函數window.addEventListener('load', function () {const btn = document.querySelector('button')btn.addEventListener('click', function () {alert(11)})})img.addEventListener('load',function(){//等待圖片加載完畢，再去執行里面的代碼})</script>
</head><body><button>點擊</button></body>

注意：不光可以監聽整個頁面資源加載完畢，也可以針對某個資源綁定load事件。
當初始的HTML文檔被完全加載和解析完成之后，DOMContentLoaded事件被觸發，而無需等待樣式、圖像等完全加載。
事件名：DOMContentLoaded
監聽頁面DOM加載完畢：
給document添加DOMContentLoaded事件

<title>頁面加載事件</title><script>document.addEventListener('DOMContentLoaded', function () {const btn = document.querySelector('button')btn.addEventListener('click', function () {alert(11)})})</script>
</head><body><button>點擊</button></body>

小結

`load`事件	監聽整個頁面資源給`window`加
`DOMContentLoaded`	給`document`加；無需等待樣式、圖片等完全加載

元素滾動事件：

滾動條在滾動的時候持續觸發的事件。

為什么要學？？

很多網頁需要檢測用戶把頁面滾動到某個區域后做一些處理，比如固定導航欄，比如返回頂部。

事件名：scroll
監聽整個頁面滾動
給window或document添加scroll事件

 <title>頁面滾動事件</title><style>body {padding-top: 100px;height: 3000px;}div {display: none;margin: 100px;overflow: scroll;width: 200px;height: 200px;border: 1px solid pink;}</style>
</head><body><div>我里面有很多很多的文字我里面有很多很多的文字我里面有很多很多的文字我里面有很多很多的文字我里面有很多很多的文字我里面有很多很多的文字我里面有很多很多的文字我里面有很多很多的文字我里面有很多很多的文字我里面有很多很多的文字我里面有很多很多的文字我里面有很多很多的文字我里面有很多很多的文字我里面有很多很多的文字我里面有很多很多的文字我里面有很多很多的文字我里面有很多很多的文字我里面有很多很多的文字我里面有很多很多的文字我里面有很多很多的文字</div><script>const div = document.querySelector('div')//頁面滾動事件window.addEventListener('scroll', function () {console.log('我滾動了')})</script></body>

監聽某個元素的內部滾動直接給某個元素加即可。

使用場景：

我們想要頁面滾動一段距離，比如100px，就讓某些元素顯示隱藏，那么我們怎么知道，頁面滾動了100像素呢？

就可以使用scroll來檢測滾動的距離

<title>頁面滾動事件</title><style>body {padding-top: 100px;height: 3000px;}div {display: none;margin: 100px;overflow: scroll;width: 200px;height: 200px;border: 1px solid pink;}</style>
</head><body><div>我里面有很多很多的文字我里面有很多很多的文字我里面有很多很多的文字我里面有很多很多的文字我里面有很多很多的文字我里面有很多很多的文字我里面有很多很多的文字我里面有很多很多的文字我里面有很多很多的文字我里面有很多很多的文字我里面有很多很多的文字我里面有很多很多的文字我里面有很多很多的文字我里面有很多很多的文字我里面有很多很多的文字我里面有很多很多的文字我里面有很多很多的文字我里面有很多很多的文字我里面有很多很多的文字我里面有很多很多的文字</div><script>const div = document.querySelector('div')//頁面滾動事件window.addEventListener('scroll', function () {//   console.log('我滾動了')//我想知道頁面到底滾動了多少像素，被卷去了多少  scrollTop//獲取html元素寫法// document.documentElement// console.log(document.documentElement.scrollTop)const n = document.documentElement.scrollTopif (n >= 100) {div.style.display = 'block'} else {div.style.display = 'none'}})</script></body>

scrollLeft和scrollTop（屬性）

獲取被卷去的大小
獲取元素內容往左、往上滾出去看不到的距離
這兩個值是可讀寫的

在這里插入圖片描述

盡量在scroll事件里面獲取被卷去的距離。

 <title>頁面滾動事件</title><style>body {padding-top: 100px;height: 3000px;}div {display: none;margin: 100px;overflow: scroll;width: 200px;height: 200px;border: 1px solid pink;}</style>
</head><body><div>我里面有很多很多的文字我里面有很多很多的文字我里面有很多很多的文字我里面有很多很多的文字我里面有很多很多的文字我里面有很多很多的文字我里面有很多很多的文字我里面有很多很多的文字我里面有很多很多的文字我里面有很多很多的文字我里面有很多很多的文字我里面有很多很多的文字我里面有很多很多的文字我里面有很多很多的文字我里面有很多很多的文字我里面有很多很多的文字我里面有很多很多的文字我里面有很多很多的文字我里面有很多很多的文字我里面有很多很多的文字</div><script>const div = document.querySelector('div')div.addEventListener('scroll', function () {// console.log(11)//scrollTop 被卷去的頭部console.log(div.scrollTop)})</script></body>

scrollTop細節

<title>scrollTop細節</title><style>body {height: 3000px;}</style>
</head><body><script>//可賦值document.documentElement.scrollTop = 800window.addEventListener('scroll', function () {//必須寫到里面 const n = document.documentElement.scrollTop// 得到什么數據？   得到數字型  不帶單位// console.log(n)})</script></body>

開發中，我們經常檢測頁面滾動的距離，比如頁面滾動100像素，就可以顯示一個元素，或者固定一個元素。

 //頁面滾動事件window.addEventListener('scroll', function () {//   console.log('我滾動了')//我想知道頁面到底滾動了多少像素，被卷去了多少  scrollTop//獲取html元素寫法// document.documentElement// console.log(document.documentElement.scrollTop)const n = document.documentElement.scrollTopconst.log(n)

小結

被卷去的頭部或者左側用哪個屬性？是否可以讀取和修改？
```
 scrollTop/scrollLeft可以讀取，也可以修改（賦值）
```
檢測頁面滾動的頭部距離（被卷去的頭部）用哪個屬性？
```
document.documentElement.scrollTop
```

練習

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><title>小兔鮮兒 - 新鮮 惠民 快捷!</title><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="renderer" content="webkit"><link rel="stylesheet" href="./css/common.css"><link rel="stylesheet" href="./css/index.css">
</head><body><!-- 項部導航 --><div class="xtx_topnav"><div class="wrapper"><!-- 頂部導航 --><ul class="xtx_navs"><li><a href="javascript:;">請先登錄</a></li><li><a href="javascript:;">免費注冊</a></li><li><a href="javascript:;">我的訂單</a></li><li><a href="javascript:;">會員中心</a></li><li><a href="javascript:;">幫助中心</a></li><li><a href="javascript:;">在線客服</a></li><li><a href="javascript:;"><i class="mobile sprites"></i>手機版</a></li></ul></div></div><!-- 頭部 --><div class="xtx_header"><div class="wrapper"><!-- 網站Logo --><h1 class="xtx_logo"><a href="/">小兔鮮兒</a></h1><!-- 主導航 --><div class="xtx_navs"><ul class="clearfix"><li><a href="javascript:;">首頁</a></li><li><a href="javascript:;">生鮮</a></li><li><a href="javascript:;">美食</a></li><li><a href="javascript:;">餐廚</a></li><li><a href="javascript:;">電器</a></li><li><a href="javascript:;">居家</a></li><li><a href="javascript:;">洗護</a></li><li><a href="javascript:;">孕嬰</a></li><li><a href="javascript:;">服裝</a></li></ul></div><!-- 站內搜索 --><div class="xtx_search clearfix"><!-- 購物車 --><a href="javascript:;" class="xtx_search_cart sprites"><i>2</i></a><!-- 搜索框 --><div class="xtx_search_wrapper"><input type="text" placeholder="搜一搜"></div></div></div></div><!-- 分類及焦點圖 --><div class="xtx_entry"><div class="wrapper"><!-- 分類 --><div class="xtx_category"><!-- 頂級分類 --><ul class="xtx_category_super"><li><a href="javascript:;">生鮮<small>水果</small><small>蔬菜</small></a><i class="sprites"></i></li><li class="active"><a href="javascript:;">美食<small>面點</small><small>干果</small></a><i class="sprites"></i></li><li><a href="javascript:;">電器<small>數碼產品</small></a><i class="sprites"></i></li><li><a href="javascript:;">居家<small>床品</small><small>四件套</small><small>被枕</small></a><i class="sprites"></i></li><li><a href="javascript:;">洗護<small>洗發洗護</small><small>美妝</small></a><i class="sprites"></i></li><li><a href="javascript:;">孕嬰<small>奶粉</small><small>玩具</small><small>輔食</small></a><i class="sprites"></i></li><li><a href="javascript:;">餐櫥<small>數碼產品</small></a><i class="sprites"></i></li><li><a href="javascript:;">服飾<small>女裝</small><small>男裝</small></a><i class="sprites"></i></li><li><a href="javascript:;">雜貨<small>戶外</small><small>圖書</small></a><i class="sprites"></i></li><li><a href="javascript:;">品牌<small>品牌制造</small></a><i class="sprites"></i></li></ul><!-- 子分類 --><div class="xtx_category_subset"></div></div><!-- 焦點圖 --><div class="xtx_banner"><ul><li><a href="javascript:;"><img src="./uploads/banner_1.png" alt=""></a></li></ul><!-- 切換按鈕  --><a href="javascript:;" class="prev sprites"></a><a href="javascript:;" class="next sprites"></a><!-- 指示器 --><div class="indicator"><span></span><span></span><span class="active"></span><span></span><span></span></div></div></div></div><!-- 新鮮好物 --><div class="xtx_goods_new xtx_panel"><div class="wrapper"><!-- 面板頭部 --><div class="xtx_panel_header"><h3>新鮮好物<small>新鮮出爐 品質靠譜</small></h3><a href="javascript:;" class="more">查看全部<i class="sprites"></i></a></div><!-- 商品列表 --><div class="xtx_panel_goods_1"><a href="javascript:;"><img src="./uploads/new_goods_1.jpg" alt=""><span class="name">睿米無線吸塵器F8</span><span class="price"><small>￥</small>899</span></a><a href="javascript:;"><img src="./uploads/new_goods_2.jpg" alt=""><span class="name">智能環繞3D空調</span><span class="price"><small>￥</small>1299</span></a><a href="javascript:;"><img src="./uploads/new_goods_3.jpg" alt=""><span class="name">廣東軟軟糯米煲仔飯</span><span class="price"><small>￥</small>129</span></a><a href="javascript:;"><img src="./uploads/new_goods_4.jpg" alt=""><span class="name">羅西機械智能手表</span><span class="price"><small>￥</small>3399</span></a></div></div></div><!-- 人氣推薦 --><div class="xtx_goods_popular xtx_panel"><div class="wrapper"><!-- 面板頭部 --><div class="xtx_panel_header"><h3>人氣推薦<small>人氣爆款 不容錯過</small></h3></div><!-- 商品列表 --><div class="xtx_panel_goods_1"><a href="javascript:;"><img src="./uploads/popular_1.jpg"><span class="title">特惠推薦</span><span class="alt">我猜得到 你的需要</span></a><a href="./index-hot.html"><img src="./uploads/popular_2.jpg"><span class="title">爆款推薦</span><span class="alt">人氣好物推薦</span></a><a href="./index-one.html"><img src="./uploads/popular_3.jpg"><span class="title">場景使用一站買全</span><span class="alt">編輯精心整理推薦</span></a><a href="javascript:;"><img src="./uploads/popular_4.jpg"><span class="title">領券中心</span><span class="alt">發現更多超值優惠券</span></a></div></div></div><!-- 熱門品牌 --><div class="xtx_goods_brand xtx_panel"><div class="wrapper"><div class="xtx_panel_header"><h3>熱門品牌<small>國際經典 品質保證</small></h3><div class="page-bar"><a href="javascript:;" class="prev sprites"></a><a href="javascript:;" class="next sprites active"></a></div></div><!-- 商品列表 --><div class="xtx_goods"><ul><li><a href="./index-brand.html"><img src="./uploads/brand_goods_1.jpg" alt=""></a><a href="./brand-list.html"><img src="./uploads/brand_goods_2.jpg" alt=""></a><a href="javascript:;"><img src="./uploads/brand_goods_3.jpg" alt=""></a><a href="javascript:;"><img src="./uploads/brand_goods_4.jpg" alt=""></a><a href="javascript:;"><img src="./uploads/brand_goods_5.jpg" alt=""></a></li></ul></div></div></div><!-- 分類商品 --><div class="xtx_goods_category xtx_panel"><div class="wrapper"><!-- 生鮮 --><div class="xtx_panel_header"><h3>生鮮</h3><a href="javascript:;" class="more">查看全部<i class="sprites"></i></a><div class="tabs-bar"><a href="javascript:;" class="active">水果</a><a href="javascript:;">蔬菜</a><a href="javascript:;">肉禽蛋</a><a href="javascript:;">褲裝</a><a href="javascript:;">襯衫</a><a href="javascript:;">內衣</a></div></div><!-- 商品列表 --><div class="xtx_panel_goods_2"><ul class="clearfix"><li><a href="javascript:;"><img src="./uploads/fresh_goods_cover.jpg" alt=""></a><div class="label"><span>生鮮館</span><span>全場3件8折</span></div></li><li><!-- 商品圖片 --><a href="javascript:;"><div class="img-box"><img src="./uploads/fresh_goods_1.jpg" alt=""></div></a><!-- 商品信息 --><div class="meta"><p class="name">美威 智利原味三文魚排 240g/袋 4片裝</p><p class="flag">海鮮年貨</p><p class="price"><small>￥</small>59</p></div><!-- 其它 --><div class="extra"><a href="javascript:;"><span>找相似</span><span>發現現多寶貝></span></a></div></li><li><a href="javascript:;"><div class="img-box"><img src="./uploads/fresh_goods_2.jpg" alt=""></div></a><div class="meta"><p class="name">紅功夫 麻辣小龍蝦1.5kg 4-6錢/25-32只</p><p class="flag">火鍋食材</p><p class="price"><small>￥</small>71.9</p></div><!-- 其它 --><div class="extra"><a href="javascript:;"><span>找相似</span><span>發現現多寶貝></span></a></div></li><li><a href="javascript:;"><div class="img-box"><img src="./uploads/fresh_goods_3.jpg" alt=""></div></a><div class="meta"><p class="name">三都港 冷凍無公害黃花魚 700g 2條 袋裝</p><p class="flag">海鮮水產</p><p class="price"><small>￥</small>49.9</p></div><!-- 其它 --><div class="extra"><a href="javascript:;"><span>找相似</span><span>發現現多寶貝></span></a></div></li><li><a href="javascript:;"><div class="img-box"><img src="./uploads/fresh_goods_4.jpg" alt=""></div></a><div class="meta"><p class="name">漁公碼頭 大連鮮食入味 即食海參 遼參刺參 調味海</p><p class="flag">海鮮年貨</p><p class="price"><small>￥</small>899</p></div><!-- 其它 --><div class="extra"><a href="javascript:;"><span>找相似</span><span>發現現多寶貝></span></a></div></li><li><a href="javascript:;"><div class="img-box"><img src="./uploads/fresh_goods_5.jpg" alt=""></div></a><div class="meta"><p class="name">越南進口白心火龍果4個 裝 標準果 單果400-550g </p><p class="flag"></p><p class="price"><small>￥</small>29</p></div><!-- 其它 --><div class="extra"><a href="javascript:;"><span>找相似</span><span>發現現多寶貝></span></a></div></li><li><a href="javascript:;"><div class="img-box"><img src="./uploads/fresh_goods_6.jpg" alt=""></div></a><div class="meta"><p class="name">廣西沃柑 柑橘1.5kg</p><p class="flag">新鮮水果</p><p class="price"><small>￥</small>59</p></div><!-- 其它 --><div class="extra"><a href="javascript:;"><span>找相似</span><span>發現現多寶貝></span></a></div></li><li><a href="javascript:;"><div class="img-box"><img src="./uploads/fresh_goods_7.jpg" alt=""></div></a><div class="meta"><p class="name">進口 牛油果 6個裝 單果重約130-180g</p><p class="flag">新鮮水果</p><p class="price"><small>￥</small>39.9</p></div><!-- 其它 --><div class="extra"><a href="javascript:;"><span>找相似</span><span>發現現多寶貝></span></a></div></li><li><a href="javascript:;"><div class="img-box"><img src="./uploads/fresh_goods_8.jpg" alt=""></div></a><div class="meta"><p class="name">泰國進口山竹5A級 500g </p><p class="flag">新鮮水果</p><p class="price"><small>￥</small>29.9</p></div><!-- 其它 --><div class="extra"><a href="javascript:;"><span>找相似</span><span>發現現多寶貝></span></a></div></li></ul></div><!-- 服飾 --><div class="xtx_panel_header"><h3>服飾</h3><a href="javascript:;" class="more">查看全部<i class="sprites"></i></a><div class="tabs-bar"><a href="javascript:;" class="active">行李箱</a><a href="javascript:;">男士包袋</a><a href="javascript:;">女士包袋</a><a href="javascript:;">錢包及小提袋</a><a href="javascript:;">男鞋</a><a href="javascript:;">女鞋</a><a href="javascript:;">拖鞋</a></div></div><!-- 商品列表 --><div class="xtx_panel_goods_2"><ul class="clearfix"><li><a href="javascript:;"><img src="./uploads/clothes_goods_cover.jpg" alt=""></a><div class="label"><span>服飾館</span><span>3折狂歡</span></div></li><li><!-- 商品圖片 --><a href="javascript:;"><div class="img-box"><img src="./uploads/clothes_goods_1.jpg" alt=""></div></a><!-- 商品信息 --><div class="meta"><p class="name">人本秋季厚底帆布鞋 韓版低幫增高學生</p><p class="flag"></p><p class="price"><small>￥</small>55</p></div><!-- 其它 --><div class="extra"><a href="javascript:;"><span>找相似</span><span>發現現多寶貝></span></a></div></li><li><a href="javascript:;"><div class="img-box"><img src="./uploads/clothes_goods_2.jpg" alt=""></div></a><div class="meta"><p class="name">迪士尼真皮針扣表帶寬度 14-16mm規格雙色壓紋 女表帶</p><p class="flag">海鮮年貨</p><p class="price"><small>￥</small>20.9</p></div><!-- 其它 --><div class="extra"><a href="javascript:;"><span>找相似</span><span>發現現多寶貝></span></a></div></li><li><a href="javascript:;"><div class="img-box"><img src="./uploads/clothes_goods_3.jpg" alt=""></div></a><div class="meta"><p class="name">三都港 冷凍無公害黃花魚 700g 2條 袋裝</p><p class="flag">海鮮水產</p><p class="price"><small>￥</small>209</p></div><!-- 其它 --><div class="extra"><a href="javascript:;"><span>找相似</span><span>發現現多寶貝></span></a></div></li><li><a href="javascript:;"><div class="img-box"><img src="./uploads/clothes_goods_4.jpg" alt=""></div></a><div class="meta"><p class="name">ONLY夏季新款高腰寬松 七分闊腿裙褲休閑褲</p><p class="flag"></p><p class="price"><small>￥</small>274.5</p></div><!-- 其它 --><div class="extra"><a href="javascript:;"><span>找相似</span><span>發現現多寶貝></span></a></div></li><li><a href="javascript:;"><div class="img-box"><img src="./uploads/clothes_goods_5.jpg" alt=""></div></a><div class="meta"><p class="name">拉夫勞倫t恤男正品 </p><p class="flag">圓領短袖</p><p class="price"><small>￥</small>99</p></div><!-- 其它 --><div class="extra"><a href="javascript:;"><span>找相似</span><span>發現現多寶貝></span></a></div></li><li><a href="javascript:;"><div class="img-box"><img src="./uploads/clothes_goods_6.jpg" alt=""></div></a><div class="meta"><p class="name">李寧跑步鞋男鞋空氣 弧2018春季款</p><p class="flag"></p><p class="price"><small>￥</small>79</p></div><!-- 其它 --><div class="extra"><a href="javascript:;"><span>找相似</span><span>發現現多寶貝></span></a></div></li><li><a href="javascript:;"><div class="img-box"><img src="./uploads/clothes_goods_7.jpg" alt=""></div></a><div class="meta"><p class="name">Dickies男鞋2020春季 英倫休閑工裝鞋低幫</p><p class="flag"></p><p class="price"><small>￥</small>179</p></div><!-- 其它 --><div class="extra"><a href="javascript:;"><span>找相似</span><span>發現現多寶貝></span></a></div></li><li><a href="javascript:;"><div class="img-box"><img src="./uploads/clothes_goods_8.jpg" alt=""></div></a><div class="meta"><p class="name">北極絨春夏季純棉背心 男士修身純色打底</p><p class="flag"></p><p class="price"><small>￥</small>69</p></div><!-- 其它 --><div class="extra"><a href="javascript:;"><span>找相似</span><span>發現現多寶貝></span></a></div></li></ul></div><!-- 餐廚 --><div class="xtx_panel_header"><h3>餐廚</h3><a href="javascript:;" class="more">查看全部<i class="sprites"></i></a><div class="tabs-bar"><a href="javascript:;" class="active">水果</a><a href="javascript:;">蔬菜</a><a href="javascript:;">肉禽蛋</a><a href="javascript:;">褲裝</a><a href="javascript:;">襯衫</a><a href="javascript:;">內衣</a></div></div><!-- 商品列表 --><div class="xtx_panel_goods_2"><ul class="clearfix"><li><a href="javascript:;"><img src="./uploads/kitchen_goods_cover.jpg" alt=""></a><div class="label"><span>餐廚館</span><span>大額優惠<br>等你來拿</span></div></li><li><!-- 商品圖片 --><a href="javascript:;"><div class="img-box"><img src="./uploads/kitchen_goods_1.jpg" alt=""></div></a><!-- 商品信息 --><div class="meta"><p class="name">創意可愛不銹鋼便攜餐具 套裝筷子便攜三件套</p><p class="flag"></p><p class="price"><small>￥</small>5.9</p></div><!-- 其它 --><div class="extra"><a href="javascript:;"><span>找相似</span><span>發現現多寶貝></span></a></div></li><li><a href="javascript:;"><div class="img-box"><img src="./uploads/kitchen_goods_2.jpg" alt=""></div></a><div class="meta"><p class="name">三金西瓜霜竹炭牙刷軟毛 成人家用家庭裝</p><p class="flag"></p><p class="price"><small>￥</small>20.9</p></div><!-- 其它 --><div class="extra"><a href="javascript:;"><span>找相似</span><span>發現現多寶貝></span></a></div></li><li><a href="javascript:;"><div class="img-box"><img src="./uploads/kitchen_goods_3.jpg" alt=""></div></a><div class="meta"><p class="name">樸（TOPOTO）大衛免手 洗平板拖把拓撲懶人木地 板刮刮樂桶拖布</p><p class="flag"></p><p class="price"><small>￥</small>129</p></div><!-- 其它 --><div class="extra"><a href="javascript:;"><span>找相似</span><span>發現現多寶貝></span></a></div></li><li><a href="javascript:;"><div class="img-box"><img src="./uploads/kitchen_goods_4.jpg" alt=""></div></a><div class="meta"><p class="name">ONLY夏季新款高腰寬松 七分闊腿裙褲休閑褲</p><p class="flag"></p><p class="price"><small>￥</small>274.5</p></div><!-- 其它 --><div class="extra"><a href="javascript:;"><span>找相似</span><span>發現現多寶貝></span></a></div></li><li><a href="javascript:;"><div class="img-box"><img src="./uploads/kitchen_goods_5.jpg" alt=""></div></a><div class="meta"><p class="name">金紡不傷手柔順劑 媽媽的選擇</p><p class="flag"></p><p class="price"><small>￥</small>29</p></div><!-- 其它 --><div class="extra"><a href="javascript:;"><span>找相似</span><span>發現現多寶貝></span></a></div></li><li><a href="javascript:;"><div class="img-box"><img src="./uploads/kitchen_goods_6.jpg" alt=""></div></a><div class="meta"><p class="name">潔成綿柔抹布洗碗巾超 值5片裝 洗鍋刷碗</p><p class="flag"></p><p class="price"><small>￥</small>10.9</p></div><!-- 其它 --><div class="extra"><a href="javascript:;"><span>找相似</span><span>發現現多寶貝></span></a></div></li><li><a href="javascript:;"><div class="img-box"><img src="./uploads/kitchen_goods_7.jpg" alt=""></div></a><div class="meta"><p class="name">大衛雙驅動旋轉拖把桶 免手洗拓撲拖布地拖墩布 </p><p class="flag"></p><p class="price"><small>￥</small>159</p></div><!-- 其它 --><div class="extra"><a href="javascript:;"><span>找相似</span><span>發現現多寶貝></span></a></div></li><li><a href="javascript:;"><div class="img-box"><img src="./uploads/kitchen_goods_8.jpg" alt=""></div></a><div class="meta"><p class="name">斧頭牌（AXE）去污地板 清潔劑2L 檸檬清香 </p><p class="flag">海鮮年貨</p><p class="price"><small>￥</small>22.9</p></div><!-- 其它 --><div class="extra"><a href="javascript:;"><span>找相似</span><span>發現現多寶貝></span></a></div></li></ul></div><!-- 居家 --><div class="xtx_panel_header"><h3>居家</h3><a href="javascript:;" class="more">查看全部<i class="sprites"></i></a><div class="tabs-bar"><a href="javascript:;" class="active">咖啡具</a><a href="javascript:;">水具酒具</a><a href="javascript:;">鍋具</a><a href="javascript:;">餐具</a><a href="javascript:;">功能廚具</a><a href="javascript:;">茶具</a><a href="javascript:;">清潔保鮮</a></div></div><!-- 商品列表 --><div class="xtx_panel_goods_2"><ul class="clearfix"><li><a href="javascript:;"><img src="./uploads/home_goods_cover.jpg" alt=""></a><div class="label"><span>居家館</span><span>全場滿減</span></div></li><li><!-- 商品圖片 --><a href="javascript:;"><div class="img-box"><img src="./uploads/home_goods_1.jpg" alt=""></div></a><!-- 商品信息 --><div class="meta"><p class="name">菜鳥異常專用鏈接 非請 勿拍</p><p class="flag">海鮮年貨</p><p class="price"><small>￥</small>8999</p></div><!-- 其它 --><div class="extra"><a href="javascript:;"><span>找相似</span><span>發現現多寶貝></span></a></div></li><li><a href="javascript:;"><div class="img-box"><img src="./uploads/home_goods_2.jpg" alt=""></div></a><div class="meta"><p class="name">【中鹽軟水鹽】漢斯希 爾家用軟水機適配</p><p class="flag"></p><p class="price"><small>￥</small>65</p></div><!-- 其它 --><div class="extra"><a href="javascript:;"><span>找相似</span><span>發現現多寶貝></span></a></div></li><li><a href="javascript:;"><div class="img-box"><img src="./uploads/home_goods_3.jpg" alt=""></div></a><div class="meta"><p class="name">云米凈水壺家用直飲臺式 凈水機滲透過濾自來水</p><p class="flag">海鮮年貨</p><p class="price"><small>￥</small>129</p></div><!-- 其它 --><div class="extra"><a href="javascript:;"><span>找相似</span><span>發現現多寶貝></span></a></div></li><li><a href="javascript:;"><div class="img-box"><img src="./uploads/home_goods_4.jpg" alt=""></div></a><div class="meta"><p class="name">ztk恒溫調奶器配件玻璃壺 燉盅</p><p class="flag">海鮮年貨</p><p class="price"><small>￥</small>129</p></div><!-- 其它 --><div class="extra"><a href="javascript:;"><span>找相似</span><span>發現現多寶貝></span></a></div></li><li><a href="javascript:;"><div class="img-box"><img src="./uploads/home_goods_5.jpg" alt=""></div></a><div class="meta"><p class="name">蕎麥枕頭單人枕芯雙人 護頸椎枕頭芯</p><p class="flag"></p><p class="price"><small>￥</small>29</p></div><!-- 其它 --><div class="extra"><a href="javascript:;"><span>找相似</span><span>發現現多寶貝></span></a></div></li><li><a href="javascript:;"><div class="img-box"><img src="./uploads/home_goods_6.jpg" alt=""></div></a><div class="meta"><p class="name">Bear/小熊 LLJ-B04G1 家用多功能切碎機 電動</p><p class="flag">料理機</p><p class="price"><small>￥</small>10.9</p></div><!-- 其它 --><div class="extra"><a href="javascript:;"><span>找相似</span><span>發現現多寶貝></span></a></div></li><li><a href="javascript:;"><div class="img-box"><img src="./uploads/home_goods_7.jpg" alt=""></div></a><div class="meta"><p class="name">榮事達薄餅機春餅春卷皮 家用博餅機電餅鐺 </p><p class="flag"></p><p class="price"><small>￥</small>159</p></div><!-- 其它 --><div class="extra"><a href="javascript:;"><span>找相似</span><span>發現現多寶貝></span></a></div></li><li><a href="javascript:;"><div class="img-box"><img src="./uploads/home_goods_8.jpg" alt=""></div></a><div class="meta"><p class="name">美式雙人實木床 紅實木 顯檔次</p><p class="flag"></p><p class="price"><small>￥</small>22.9</p></div><!-- 其它 --><div class="extra"><a href="javascript:;"><span>找相似</span><span>發現現多寶貝></span></a></div></li></ul></div></div></div><!-- 最新主題 --><div class="xtx_goods_topic xtx_panel"><div class="wrapper"><div class="xtx_panel_header"><h3>最新專題</h3><a href="javascript:;" class="more">查看全部<i class="sprites"></i></a></div><div class="xtx_topic"><ul class="clearfix"><li><a href="javascript:;"><img src="./uploads/topic_goods_1.jpg" alt=""><div class="meta"><p class="title">吃這些美食才不算辜負自己<small>餐廚起居洗護好物</small></p><span class="price"><small>￥</small>29.9起</span></div></a><div class="social"><span class="like"><i class="sprites"></i>1220</span><span class="view"><i class="sprites"></i>1800</span><span class="reply"><i class="sprites"></i>1220</span></div></li><li><a href="javascript:;"><img src="./uploads/topic_goods_2.jpg" alt=""><div class="meta"><p class="title">吃這些美食才不算辜負自己<small>餐廚起居洗護好物</small></p><span class="price"><small>￥</small>29.9起</span></div></a><div class="social"><span class="liked"><i class="sprites"></i>1220</span><span class="view"><i class="sprites"></i>1800</span><span class="reply"><i class="sprites"></i>1220</span></div></li><li><a href="javascript:;"><img src="./uploads/topic_goods_3.jpg" alt=""><div class="meta"><p class="title">吃這些美食才不算辜負自己<small>餐廚起居洗護好物</small></p><span class="price"><small>￥</small>29.9起</span></div></a><div class="social"><span class="like"><i class="sprites"></i>1220</span><span class="view"><i class="sprites"></i>1800</span><span class="reply"><i class="sprites"></i>1220</span></div></li></ul></div></div></div><!-- 公共底部 --><div class="xtx_footer clearfix"><div class="wrapper"><!-- 聯系我們 --><div class="contact clearfix"><dl><dt>客戶服務</dt><dd class="chat">在線客服</dd><dd class="feedback">問題反饋</dd></dl><dl><dt>關注我們</dt><dd class="weixin">公眾號</dd><dd class="weibo">微博</dd></dl><dl><dt>下載APP</dt><dd class="qrcode"><img src="./uploads/qrcode.jpg"></dd><dd class="download"><span>掃描二維碼</span><span>立馬下載APP</span><a href="javascript:;">下載頁面</a></dd></dl><dl><dt>服務熱線</dt><dd class="hotline">400-0000-000<small>周一至周日 8:00-18:00</small></dd></dl></div></div><!-- 其它 --><div class="extra"><div class="wrapper"><!-- 口號 --><div class="slogan"><a href="javascript:;" class="price">價格親民</a><a href="javascript:;" class="express">物流快捷</a><a href="javascript:;" class="quality">品質新鮮</a></div><!-- 版權信息 --><div class="copyright"><p><a href="javascript:;">關于我們</a><a href="javascript:;">幫助中心</a><a href="javascript:;">售后服務</a><a href="javascript:;">配送與驗收</a><a href="javascript:;">商務合作</a><a href="javascript:;">搜索推薦</a><a href="javascript:;">友情鏈接</a></p><p>CopyRight ? 小兔鮮兒</p></div></div></div></div><!-- 電梯 --><div class="xtx-elevator"><ul class="xtx-elevator-list"><li><a href="javascript:;" data-name="new">新鮮好物</a></li><li><a href="javascript:;" data-name="popular">人氣推薦</a></li><li><a href="javascript:;" data-name="brand">熱門品牌</a></li><li><a href="javascript:;" data-name="topic">最新專題</a></li><li><a href="javascript:;" id="backTop"><i class="sprites"></i>頂部</a></li></ul></div><script>//第一大模塊，頁面滑動可以顯示和隱藏(function () {//獲取元素const entry = document.querySelector('.xtx_entry')const elevator = document.querySelector('.xtx-elevator')//1.當頁面滾動大于300像素，就顯示電梯導航//2.給頁面添加滾動事件window.addEventListener('scroll', function () {//被卷去的頭部大于300const n = document.documentElement.scrollTop// if (n >= 300) {//   elevator.style.opacity = 1// } else {//   elevator.style.opacity = 0// }//簡寫// elevator.style.opacity = n >= 300 ? 1 : 0elevator.style.opacity = n >= entry.offsetTop ? 1 : 0})//點擊返回頁面頂部const backTop = document.querySelector('#backTop')backTop.addEventListener('click', function () {//可讀寫// document.documentElement.scrollTop = 0// window.scrollTo(x,y)window.scrollTo(0, 0)})})();</script></body>

頁面尺寸事件:

會在窗口尺寸改變的時候觸發事件：

 <title>頁面尺寸事件</title><style>div {display: inline-block;/* width: 200px; */height: 200px;background: pink;padding: 10px;}</style>
</head><body><div>123123123123123123123123123123123123123123123123123123123123123123123123</div><script>const div = document.querySelector('div')console.log(div.clientWidth)//resize 瀏覽器窗口大小發生變化的時候觸發的事件window.addEventListener('resize', function () {console.log(1)})</script></body>