网页中经常会需要一种功能:每隔一段时间需要自动执行一段代码,不需要我们手动去触发
例如:网页中的倒计时
要实现这种需求,需要定时器函数
定时器函数有两种,今天我先讲间歇函数
目标:能够使用定时器函数重复执行代码
定时器函数可以开启和关闭定时器
1. 开启定时器
作用:每隔一段时间调用这个函数
间隔时间单位是毫秒
举例说明
注意:
1. 函数名字不需要加括号
2. 定时器返回的是一个id数字
2. 关闭定时器
一般不会刚创建就停止,而是满足一定条件再停止
注意:
1. 函数名字不需要加括号
2. 定时器返回的是一个id数字
事件(二)
1 事件流
1.1 基本概念
事件流中的“流”非常形象,它把事件的执行比作了流动的水,其完整的执行过程就像蜿蜒但又丝滑的水流一般。
1.2 事件捕获
事件捕获是从DOM的根元素开始去执行对应的事件 (从外到里),其代码格式为
假设为 body 里的某个 div 元素添加了点击事件,那么在点击完 div 之后,这个点击并不会立即作用在 div 上,而是依次作用在 document对象、 html对象、 body对象,最后才是 div对象,之所以我们会对这种作用“无感”,是因为我们并未对 div对象 以外的其他对象添加事件处理函数。
如果我们为从外到内的对象都添加上事件处理函数,
<div id="btn3">
btn3
<div id="btn2">
btn2
<div id="btn1">
btn1
</div>
</div>
</div>
<script>
let btn1 = document.getElementById('btn1');
let btn2 = document.getElementById('btn2');
let btn3 = document.getElementById('btn3');
btn1.addEventListener('click',function(){
console.log(1)
}, true)
btn2.addEventListener('click',function(){
console.log(2)
}, true)
btn3.addEventListener('click',function(){
console.log(3)
}, true)
</script> //转自https://zhuanlan.zhihu.com/p/114276880
其打印结果如下
事件的触发顺序与事件监听代码的书写顺序无关,而只与HTML的结构有关。
需要说明的是:
① addEventListener第三个参数传入 true 代表是捕获阶段触发(很少使用)
② 若传入false则代表冒泡阶段触发(默认值即false)
③ 若是用 L0 事件监听,则只有冒泡阶段,没有捕获
1.3 事件冒泡
事件冒泡是当一个元素的事件被触发时,同样的事件将会在该元素的所有祖先元素中依次被触发。
举个例子,
<div class="father">
<div class="son"></div>
</div>
<script>
const fa = document.querySelector('.father')
const son = document.querySelector('.son')
document.addEventListener('click', function () {
console.log('我是爷爷');
})
fa.addEventListener('click', function () {
console.log('我是爸爸');
})
son.addEventListener('click', function () {
console.log('我是儿子');
})
</script>
在点击类名为 son 的 div 后,会依次执行 .son、.father 和 document 里绑定的事件处理函数,其结果如下
事件的触发顺序与事件监听代码的书写顺序无关,而只与HTML的结构有关。
需要说明的是:
① 事件冒泡是默认存在的
② L2事件监听第三个参数是 false,或者默认都是冒泡
1.4 阻止事件冒泡
由于冒泡是默认存在的,容易导致事件影响到父级元素,因此若想把事件就限制在当前元素内,就需要阻止事件冒泡,但前提是必须要拿到事件对象。
其语法如下,
<div class="father">
<div class="son"></div>
</div>
<script>
const fa = document.querySelector('.father')
const son = document.querySelector('.son')
document.addEventListener('click', function () {
console.log('我是爷爷');
})
fa.addEventListener('click', function () {
console.log('我是爸爸');
})
son.addEventListener('click', function (e) {
console.log('我是儿子');
e.stopPropagation()
})
</script>
在类名为 son 的元素里添加阻止冒泡的函数,则不会触发 .father 和 document 元素的事件处理函数,
需要注意的是:此方法可以阻断事件流动传播,不光在冒泡阶段有效,捕获阶段也有效。
1.5 鼠标经过事件的区别
mouseover 和 mouseout 会有冒泡效果
mouseenter 和 mouseleave 没有冒泡效果
2 事件委托
如果某个元素下有许多子元素需要监听事件,那么给每个子元素都绑定监听事件会极大的影响页面的性能,因此我们可以利用事件委托来进行优化,而事件委托利用的原理就是冒泡,即给父元素注册事件,当我们触发子元素的时候,会冒泡到父元素身上,从而触发父元素的事件。
以前的写法:
<body>
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
</ul>
<script>
let li_list = document.querySelectorAll('li')
for(let index = 0;index<li_list.length;index++){
li_list[index].addEventListener('click', function(e){
console.log(e.currentTarget.innerHTML)
})
}
</script>
</body>
现在的写法:
<body>
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
</ul>
<script>
let ul = document.querySelector('ul')
ul.addEventListener('click',function(e){
console.log(e.target.innerHTML);
})
</script>
</body>
3 其他事件
3.1 页面加载事件
1.load事件
加载外部资源(如图片、外联CSS和JavaScript等)加载完毕时触发的事件
给 window 添加 load 事件,
2.DOMContentLoaded
当初始的 HTML 文档被完全加载和解析完成之后,DOMContentLoaded 事件被触发,而无需等待样式表、图像等完全加载
给 document 添加 DOMContentLoaded 事件,
3.2 元素滚动事件
1.scroll事件
滚动条在滚动的时候持续触发的事件,其语法为
scroll 事件经常与 scrollLeft、scrollTop (属性)一起使用,这两个属性分别代表着元素内容往左、往上滚出后看不到的距离(距离值为数字类型),且是可读可写的,
<body>
<div>
我里面有很多很多的文字
我里面有很多很多的文字
我里面有很多很多的文字
我里面有很多很多的文字
我里面有很多很多的文字
我里面有很多很多的文字
我里面有很多很多的文字
我里面有很多很多的文字
我里面有很多很多的文字
我里面有很多很多的文字
我里面有很多很多的文字
我里面有很多很多的文字
我里面有很多很多的文字
我里面有很多很多的文字
</div>
<script>
const div = document.querySelector('div')
// 页面滚动事件
window.addEventListener('scroll', function () {
// 我想知道页面到底滚动了多少像素, 被卷去了多少 scrollTop
// 获取html元素写法
console.log(document.documentElement.scrollTop)
})
div.addEventListener('scroll', function () {
// console.log(111)
// scrollTop 被卷去的头部
console.log(div.scrollTop)
})
</script>
</body>
当我在浏览器窗口里使用滚轮或者拖动滚动条时,会触发 window对象 上绑定的 scroll 事件,该事件的处理函数是检测 html 标签内的内容向上滚动的距离,
当我在 div元素 里使用滚轮或者拖动滚动条时,会触发 div对象 上绑定的 scroll 事件,该事件的处理函数是检测 div 标签内的内容向上滚动的距离。
2.scrollTo方法
scrollTo() 方法可把内容滚动到指定的坐标,其语法是 元素.scrollTo(x,y)。
3.3 页面尺寸事件
1.clientWidth和clientHeight
clientWidth和clientHeight 分别代表了元素的宽和高,这里的宽和高只包含 width、height 和 padding 属性,不包含边框,margin,滚动条等。
2.offsetXxx属性
offset的一系列属性中,既包含与定位相关的属性,也包含与尺寸相关的属性。offsetLeft 和 offsetTop(注意是只读属性)是与定位相关的属性,offsetWidth 和 offsetHeight 是与尺寸相关的属性。
offsetWidth 和 offsetHeight 分别表示元素的宽和高,只不过这里的宽和高相较于clientWidth和clientHeight来说还包含了 border 属性(也就是width、height、 padding 和 border),这一点需要注意。
offsetLeft 和 offsetTop 表示距离自己有定位的父元素的左侧和上侧的距离,如果没有带定位的父元素,则以 body 元素为基准,表示距离 body 元素左侧和上侧的距离。
3.4 小结