DOM事件进阶
一、事件流:
1.1 事件流与两个阶段说明:
1、概念:事件流指的是事件完整执行过程中的流动路径。
2、说明:假设页面里有个div,当触发事件时,会经历两个阶段,分别是捕获阶段、冒泡阶段。
3、简单来说:捕获阶段是从父到子,冒泡阶段是从子到父。实际工作都是使用事件冒泡为主。
1.2 事件捕获:
1、概念:
从DOM根元素开始去执行对应的事件(从外到内)。
2、代码语法:
DOM.addEventListner(事件类型,事件处理函数,是否使用捕获机制)
3、说明:
1)addEventListener第三个参数传入true代表是捕获阶段触发(很少使用)。
2)若传入false代表冒泡阶段触发,默认就是false。
3)若是L0事件监听,则只有冒泡阶段,没有捕获。
1.3 事件冒泡:
1、概念:
当一个元素的事件被触发时,同样的事件将会在该元素的所有祖先元素中依次被触发,这一过程称为事件冒泡。
2、理解:
当一个元素触发事件后,会依次向上调用所有父级元素的同名事件。
eg.
3、注意:
1)事件冒泡默认存在。
2)L2事件监听第三个参数是false,或者默认都是冒泡。
3)有些事件没有冒泡,比如onblur、onfocus、onmouseenter、onmouseleave。
1.4 阻止冒泡:
1、问题:
因为默认就有冒泡模式的存在,容易导致事件影响到父级元素。
2、需求:
想把事件就限制在当前元素内,就要阻止事件冒泡。
3、前提:
阻止事件冒泡需要拿到事件对象。
4、语法:
事件对象.stopPropagation()
5、注意:
此方法可以阻止事件流动传播,不光在冒泡阶段有效,捕获阶段也有效。
eg.
1.5 解绑事件:
on事件方式,直接使用null覆盖就可以实现事件的解绑。
1、语法:
btn.onclick = function() {
alert('点击了')
}
btn.onclick = null
eg.
2、addEvenListener方式:
该方式必须使用removeEventListener(事件类型,事件处理函数,[ 获取捕获或者冒泡阶段 ])。
注意:
匿名函数无法被解绑
eg.
3、鼠标经过事件的区别:
鼠标经过事件:
二、事件委托:
2.1 事件委托:
事件委托是利用事件流的特征解决一些开发需求的知识技巧。
eg.
触发的目标元素:
e.target.tagName = ‘LI’
2.2 阻止冒泡:
e.preventDefault()
我们某些情况下需要阻止默认行为的发生,比如阻止链接的跳转,表单域跳转。
eg.
三、其他事件:
3.1 页面加载事件:
(1)load加载:
1、概念:加载外部资源(如图片、外联CSS和JavaScript等)加载完毕时触发的事件。
2、事件名:load
3、监听页面所有资源加载完毕:
给window添加load事件
4、语法:
5、注意:
不光可以监听整个页面资源加载完毕,也可以针对某个资源绑定load事件。
eg.
(2)DOMContentLoaded加载:
语法:
3.2 元素滚动事件:
1、概念:
滚动条在滚动的时候持续触发的事件。
2、事件名:
事件名为scroll
3、监听整个页面滚动语法:
(习惯给window或document添加scroll事件)
4、scrollLeft和scrollTop(属性):
注意:
尽量在scroll事件里面获取被卷去的距离。
语法:
eg.
获取html元素写法:
document.doucumentElement.scrollTop
3.3 页面尺寸事件:
1、会在窗口尺寸改变的时候触发事件:resize:
window.addEventListner('resize',function() {
})
2、检测屏幕宽度:
window.addEventListener('resize',function() {
let w=document.documentElement.clientWidth
console.log(w)
})
3、获取宽高:
1、获取元素的可见部分宽高(不包含边框,margin,滚动条等)
2、clientWidth和clientHeight
四、元素尺寸与位置:
1、使用场景:
2、获取宽高:
3、获取位置:
五、 日期对象
1、概念:用来表示时间的对象。
2、作用:可以得到当前系统时间
5.1 实例化:
1、概念:
在代码中发现了new关键字时,一般将这个操作称为实例化。
2、创建一个时间对象并获取时间:
(1)获得当前时间:
const date=new Date()
(2)获得指定时间:
const date=new Date('2008-8-8')
console.log(date)
5.2 时间对象方法:
1、使用场景:
因为日期对象返回的数据我们不能直接使用,所以需要转换为实际开发中常用的格式。
eg.
eg.
5.3时间戳:
1、使用场景:
如果计算倒计时效果,前面方法无法直接计算,需要借助于时间戳完成。
2、概念:
是指1970年01月01日00时00分00秒起至现在的毫秒数,它是一种特殊的计量时间的方式。
3、算法:
4、获取时间戳:
(1)使用getTime() 方法:
const date = new Date()
console.log(date.getTime())
(2)简写 +new Date() :
console.log(+new Date())
注意:无需实例化
(3)使用Date.now() :
console。log(Date.now())
注意:
a.无需实例化
b.但只能得到当前的时间戳,而前面两种可以返回指定时间的时间戳。
六、节点操作:
6.1 DOM节点:
DOM树里每一个内容都称为节点。
1、节点类型:
6.2 查找节点:
1、节点关系:
针对的找亲戚返回的都是对象。
(1)父节点(2)子节点(3)兄弟节点
2、父节点查找:
子元素.parentNode
(1)parentNode属性
(2)返回最近一级的父节点,找不到返回为null
3、子节点查找:
(1)childNodes:
获得所有子节点、包括文本节点(空格、换行)、注释节点等。
(2)children属性(重点):
父元素.children
a.仅获得所有元素节点
b.返回的还是一个伪数组
4、兄弟关系查找:
(1)下一个兄弟节点:
nextElementSibling 属性
(2)上一个兄弟节点:
previousElementSibling 属性
6.3 增加节点:
1、创建节点:
document。createElement('标签名')
即创造出一个新的网页元素,再添加到网页内,一般先创建节点,再插入节点。
2、追加节点:
(1)插入到父元素最后一个子元素:
父元素.appendChild(要插入的元素)
eg.
(2)插入到父元素中某个子元素前面:
父元素.insertBefore(要插入的元素,在哪个元素前面)
eg.
3、克隆节点:
元素.cloneNode(布尔值)
eg.
6.4 删除节点:
1、使用场景:
当一个节点在页面中已不需要时,可以删除它。
2、语法:
父元素.removeChild(要删除的元素)
3、前提:
在JS原生DOM操作中,要删除元素必须通过父元素删除。
4、注意:
七、M端事件:
常见的触屏事件:
八、JS插件:
1、插件概念:
别人写好的一些代码,我们只需要复制对应的代码,就可以直接实现对应的效果。