页面加载事件

事件名：load

加载外部资源（如图片、外联CSS和JavaScript等）加载完毕时触发的事件

监听页面所有资源加载完毕：给 window 添加 load 事件

语法：windows.addEventListener('load',function(){}）

注意：不光可以监听整个页面资源加载完毕，也可以针对某个资源绑定load事件。

事件名：DOMContentLoaded

当初始的 HTML 文档被完全加载和解析完成之后，DOMContentLoaded 事件被触发，而无需等待样式表、图像等完全加载。

语法：document.addEventListener('DOMContentLoaded',function(){}）

监听页面DOM加载完毕：给 document 添加 DOMContentLoaded 事件

元素滚动事件

事件名：scroll                 

监听整个页面滚动：给 window 或 document 添加 scroll 事件

语法：windows.addEventListener('scroll',function(){}）

监听某个元素的内部滚动直接给某个元素加即可

元素.scrollTo(x, y)

scrollTo() 方法可把内容滚动到指定的坐标

scrollLeft和scrollTop （属性）

（1）获取被卷去的大小

（2）获取元素内容往左、往上滚出去看不到的距离。

（3）这两个值是可读写的（可读可赋值）

<code><script>

//获取大复选框

const allCheck = document.querySelector('#checkAll')

//获取小复选框

const cks = document.querySelectorAll('.ck')

//添加大复选框点击事件

allCheck.addEventListener('click', function () {

for (let i = 0; i < cks.length; i++) {

cks[i].checked = this.checked

}

})

//添加小复选框点击事件

for (let i = 0; i < cks.length; i++) {

cks[i].addEventListener('click', function () {

allCheck.checked = document.querySelectorAll('.ck:checked').length === cks.length

})

}

</script>

电梯导航

<code><div class="aside">code>

<div class="item active">男装/女装</div>code>

<div class="item">儿童服装/游乐园</div>code>

<div class="item">电子产品</div>code>

<div class="item">电影/美食</div>code>

</div>

<div class="content">code>

<div class="neirong content1">男装/女装</div>code>

<div class="neirong content2">儿童服装/游乐园</div>code>

<div class="neirong content3">电子产品</div>code>

<div class="neirong content4">电影/美食</div>code>

</div>

<script>

//获取元素

const items = document.querySelectorAll('.aside .item')

const neirongs = document.querySelectorAll('.content .neirong')

// 左侧aside 模块 点击谁，谁高亮

for (let i = 0; i < items.length; i++) {

items[i].addEventListener('click', function () {

// 找到上一个active 移除类

document.querySelector('.aside .active').classList.remove('active')

// 点击谁谁添加类

this.classList.add('active')

// 右侧内容跟随走动 让页面滚动到对应的offsetTop值位置

// console.log(neirongs[i].offsetTop) 找到数据值 不用给单位

document.documentElement.scrollTop = neirongs[i].offsetTop

})

}

</script>

<code><script>

//第一大模块

(function () {

//获取元素

const elevator = document.querySelector('.xtx-elevator ')

const entry = document.querySelector('.xtx_entry ')

//当前页面大于300px，就显示电梯

//给页面添加滚动事件

window.addEventListener('scroll', function () {

const n = document.documentElement.scrollTop

// if (n >= 300) {

// elevator.style.opacity = 1

// }

// else {

// elevator.style.opacity = 0

// }

elevator.style.opacity = n >= entry.offsetTop ? 1 : 0

// console.log(entry.offsetTop);

})

//点击返回顶部

const backTop = document.querySelector('#backTop')

backTop.addEventListener('click', function () {

document.documentElement.scrollTop = 0

//window.scrollTo(0,0) 了解

})

})();

(function () {

//点击页面可以滑动

const list = document.querySelector('.xtx-elevator-list')

list.addEventListener('click', function (e) {

if (e.target.tagName === 'A' && e.target.dataset.name) {

//先获取这个类名

const old = document.querySelector('.xtx-elevator-list .active')

if (old) old.classList.remove('active')

//当前元素添加active

e.target.classList.add('active')

//获得自定义属性

//根据小盒子的属性值选择合适的大盒子

const top = document.querySelector(`.xtx_goods_${e.target.dataset.name}`).offsetTop

//获取对应的大盒子内容,让页面滚动到对应的位置

document.documentElement.scrollTop = top

}

})

//页面滚动，可以根据大盒子选小盒子，添加active

window.addEventListener('scroll', function () {

//先获取这个类名

const old = document.querySelector('.xtx-elevator-list .active')

if (old) old.classList.remove('active')

//判断当前滑动的位置选择小盒子

const news = document.querySelector('.xtx_goods_new')

const popular = document.querySelector('.xtx_goods_popular')

const brand = document.querySelector('.xtx_goods_brand')

const topic = document.querySelector('.xtx_goods_topic')

const n = document.documentElement.scrollTop

if (n >= news.offsetTop && n < popular.offsetTop) {

//选择第一个小盒子

document.querySelector('[data-name=new]').classList.add('active')

}

else if (n >= popular.offsetTop && n < brand.offsetTop) {

document.querySelector('[data-name=popular]').classList.add('active')

}

else if (n >= brand.offsetTop && n < topic.offsetTop) {

document.querySelector('[data-name=brand]').classList.add('active')

}

else if (n >= topic.offsetTop) {

document.querySelector('[data-name=topic]').classList.add('active')

}

})

})();

</script>

购物车加减操作

<code><div>

<input type="text" id="total" value="0" readonly>code>

<input type="button" value="+" id="add">code>

<input type="button" value="-" id="reduce" disabled>code>

<script>

//获取元素

const total = document.querySelector('#total')

const add = document.querySelector('#add')

const reduce = document.querySelector('#reduce')

//加号操作

add.addEventListener('click', function () {

// console.log(typeof total.value) string

// i++ 隐式转换

total.value++

reduce.disabled = false

})

//减号操作

reduce.addEventListener('click', function () {

// console.log(typeof total.value) string

// i-- 隐式转换

total.value--

add.disabled = false

})

// 2 === '2'

</script>

</div>