二、JavaScript进阶-WebAPI
DOM事件-基础
事件概念
什么是事件?
事件是在编程时系统内发生的动作或者发生的事情
比如用户在网页上单击一个按钮
事件监听
就是让程序检测是否有事件产生,一旦有事件触发,就立即调用一个函数做出响应,也称为注册事件
语法:
DOM L0 事件源.on事件类型 = function(){}
DOM L2 事件源.addEventListener(事件类型, 事件处理函数)
事件监听三要素:
事件源:那个dom元素被事件触发了,要获取dom元素
事件:用什么方式触发,比如鼠标单击click、鼠标经过mouseover 等
事件调用的函数:要做什么事let button = document.querySelector('button') button.addEventListener('click', function () { alert('提交成功!') });
注册事件的两种方式
传统on注册(L0)
同一个对象,后面注册的事件会覆盖前面注册(同一个事件)
直接使用null覆盖,就可以实现事件的解绑
都是冒泡阶段执行的
事件监听注册(L2)
语法:addEventListener(事件类型, 事件处理函数, 是否使用捕获)
后面注册的事件不会覆盖前面注册的事件(同一个事件)
可以通过第三个参数去确定是在冒泡或者捕获阶段执行
必须使用removeEventListener(事件类型, 事件处理函数, 获取捕获或者冒泡阶段)
匿名函数无法被解绑
常用事件类型
鼠标事件
click:在单个元素上单击鼠标 (通常是鼠标 的主按钮) 时触发
dblclick:在单个元素上单击两次鼠标 (通常是鼠标 的主按钮) 时触发close_btn.addEventListener('click', function () { QRCode.style.display = 'none' })
mouseenter:当定点设备(通常指鼠标)移动到元素上时就会触发
mouseover:当定点设备(通常指鼠标)的指针移出某个元素时
mouseover和mouseenter的区别
mouseover和mouseout会有冒泡效果
mouseenter和mouseleave没有冒泡效果
mousedown:事件在指针设备(如鼠标或触摸板)按钮按下时触发
mouseup:事件在指针设备(如鼠标或触摸板)按钮放开时触发
焦点事件
focus【获得焦点】, blur【失去焦点】
键盘事件
keydown
键盘按下触发
会在值落到表单之前触发, 所以获取的结果是上一次的结果
keyup
键盘抬起触发
会在值落到表单之后触发, 所有获取的是当前这一次的结果
文本事件
input
DOM事件-高级
事件流概念
过程:
事件捕获 => 事件目标阶段 => 事件冒泡 整个完整的过程就是事件流
事件捕获
概念:
从DOM的根元素开始去执行对应的事件 (从外到里)
捕获机制必须使用事件监听的形式注册
DOM.addEventListener(事件类型, 事件处理函数, 是否使用捕获机制)
事件冒泡
概念:
当一个元素的事件被触发时,同样的事件将会在该元素的所有祖先元素中依次被触发。
事件冒泡默认存在
事件冒泡的必要性
如果没有冒泡,给大盒子注册点击事件,点击的是里面的小盒子,会导致大盒子的点击无法执行
事件委托
原理:
利用事件冒泡的特点,给父元素添加事件,子元素可以触发
优点:
给父元素注册事件,提高性能
实现:
e.target => 获得真正触发事件的元素
阻止事件冒泡
e.stopPropagation()
阻止事件冒泡,此方法在捕获阶段也有效
e.preventDefault()
阻止默认行为,比如点击链接不跳转,阻止表单域提交先要明确那一块区域不能冒泡,需要阻止什么事件传递,就给这块区域的最大盒子注册该事件
在事件处理函数里面接受事件对象, 并添加上e.stopPropagation()