广东的网站备案,wordpress免费响应式,建筑模型网站,中国风网页设计欣赏目录 前言
事件类型
鼠标事件
表单事件
窗口事件
DOM事件
多媒体事件
拖拽与放置事件
移动设备事件
剪切板事件
错误事件
过渡、动画事件
事件监听
onevent
addEventListener(event)
事件触发
事件流程
捕获阶段
目标阶段
冒泡阶段
事件对象
总结
相关代…目录 前言
事件类型
鼠标事件
表单事件
窗口事件
DOM事件
多媒体事件
拖拽与放置事件
移动设备事件
剪切板事件
错误事件
过渡、动画事件
事件监听
onevent
addEventListener(event)
事件触发
事件流程
捕获阶段
目标阶段
冒泡阶段
事件对象
总结
相关代码 前言
浏览器的事件机制是web前端面试及开发过程中绕不开的话题可以说一切用户操作或者浏览器的行为都离不了事件它允许开发者通过JS处理用户的操作并处理操作逻辑将结果反馈给用户。本篇文章将深入浏览器事件的运行机制和大家一起探讨其强大的功能及广泛的用法
事件类型
浏览器的事件参考事件列表大致可以分为以下几类
鼠标事件
常见的鼠标事件有
click点击元素时触发dblclick双击元素时触发mouseover鼠标指针进入元素时触发mouseout鼠标指针离开元素时触发mousemove鼠标在元素上移动时触发mousedown按下鼠标按钮时触发mouseup释放鼠标按钮时触发contextmenu右键点击元素时触发wheel当使用鼠标滚轮时触发。
键盘事件
常见的键盘事件
keydown按下键盘上的键时触发keyup释放键盘上的键时触发keypress按住键不放时持续触发
表单事件
常用的表单事件
submit用户提交表单时触发input在表单元素中输入内容时触发change表单元素的值发生改变时触发适用于输入框、下拉列表等focus元素获得焦点时触发blur元素失去焦点时触发
窗口事件
窗口事件一般作用于window对象上常用的事件有
load页面完全加载时触发unload页面即将被卸载时触发resize窗口大小发生变化时触发scroll页面滚动时触发
DOM事件
Dom一般用于监听文档操作
DOMContentLoadedDOM树构建完成但在所有资源加载完成前触发DOMNodeInserted新的子节点插入到元素中时触发DOMNodeRemoved子节点从元素中移除时触发DOMAttrModified元素属性发生变化时触发
多媒体事件
多媒体事件一般在audiovideo标签上进行操作
play媒体开始播放时触发pause暂停播放时触发ended当媒体播放结束时触发
拖拽与放置事件
当给元素增加draggable属性时标签就具备被拖拽功能我们可以使用以下事件监听标签拖拽操作
dragstart拖拽操作开始时触发drag在拖拽过程中持续触发dragend当拖拽操作结束时触发dragenter被拖拽的元素进入目标元素时触发dragover被拖拽元素在目标元素上移动时触发dragleave被拖拽的元素离开目标元素时触发drop拖拽的元素在目标元素上释放时触发
移动设备事件
移动事件类似鼠标操作
touchstart当用户触摸屏幕时触发touchmove在用户滑动触摸屏幕时持续触发touchend当用户停止触摸屏幕时触发touchcancel在触摸事件被取消时触发
剪切板事件
剪切板事件是当用户选中文本时在标签上操作剪切板的动作
cut用户执行剪切操作时触发copy用户执行复制操作时触发paste用户执行粘贴操作时触发。
错误事件
错误事件一般出现在加载文件资源音视频链接等地方
error当资源加载或操作过程中出现错误时触发
过渡、动画事件
当标签使用过渡或者动画时会触发以下事件
animationstart当CSS动画开始时触发animationend当CSS动画结束时触发animationiteration当CSS动画重复播放时触发transitionstart当CSS过渡开始时触发transitionend当CSS过渡结束时触发
事件监听
事件监听有两种方式分别是onevent和addEventListener(event)两种方式event表示上面的事件名称
onevent
onevent可以直接在HTML标签中使用添加参数event可以将事件对象传递到函数中
button onclickhandleClick(event)点击/button
button onclickhandleClick()点击2/button
scriptconst handleClick (e) {console.log(e);}
/script
在JS中也可以通过element.onevent的方式给标签添加事件监听
bodybutton idbtn3点击3/buttonscriptconst handleClick (e) {console.log(e);}btn3.onclick handleClick/script
/body
在JS中使用onevent的方式给标签添加事件监听时后面的监听函数会覆盖前面的当我们要取消监听时直接给onevent赋值null即可思考下面的代码
bodybutton idbtn3点击3/buttonscriptconst handleClick (e) {e.target.onclick handleClick2console.log(handleClick);}const handleClick2 (e) {e.target.onclick nullconsole.log(handleClick2);}btn3.onclick (e) {console.log(onclick);e.target.onclick handleClick}/script
/body
addEventListener(event)
当我们使用onevent给标签添加事件时后定义的函数会覆盖前面的这就会导致函数耦合度变高维护性降低举个例子下面的代码中点击btn3时就会触发三个fn此时如果我需要解除fn1的执行只能修改onclick函数的逻辑如何解决这种问题呢
bodybutton onclickhandleClick(event)点击/buttonbutton onclickhandleClick()点击2/buttonbutton idbtn3点击3/buttonscriptbtn3.onclick (e) {fn1()fn2()fn3()}const fn1 () {console.log(111);}const fn2 () {console.log(222);}const fn3 () {console.log(333);}/script
/body
JS提供了element.addEventListener(event,fn)的方式用于给标签添加事件监听使用addEventListener函数可以给标签添加多个事件钩子函数
bodybutton idbtn1点击/buttonbutton idbtn2点击2/buttonscriptbtn1.addEventListener(click, handleClick1)btn1.addEventListener(click, handleClick3)btn2.addEventListener(click, handleClick2)function handleClick1(e) {console.log(e);console.log(handleClick1);}function handleClick2(e) {console.log(e);console.log(handleClick2);}function handleClick3(e) {console.log(e);console.log(handleClick3);}/script
/body
通过removeEventListener移除某个事件的监听思考下面的代码我实现了一个事件的once功能执行一次后立即注销事件
bodybutton idbtn1点击/buttonscriptbtn1.addEventListener(click, handleClick1)function handleClick1(e) {console.log(handleClick1);btn1.removeEventListener(click, handleClick1)}/script
/body
addEventListener第二个参数除了可以是函数外还可以传入一个对象当其为对象类型时可以传入一个handleEvent属性充当事件函数
btn1.addEventListener(click, {handleEvent: handleClick2
})
addEventListener的第三个参数是一个布尔值或配置对象用于指定更多选项当其类似是布尔时true表示监听捕获阶段反之则是监听冒泡当这个参数传入的是一个对象时里面包含以下配置
capture布尔值指定事件是否在捕获阶段触发true还是在冒泡阶段触发falseonce布尔值指定事件是否仅在第一次触发时调用监听器passive 布尔值指定监听器是否为 passively如果为 true则浏览器知道监听器不会调用 preventDefault()
bodybutton idbtn1点击/buttonscriptbtn1.addEventListener(click, handleClick3, {once: true,passive: true,capture: true})function handleClick3(e) {console.log(handleClick3);}/script
/body
这三个配置默认值都是false
事件触发
事件触发有两种方式分别是用户操作或者浏览器触发的和手动使用触发器触发手动触发的两种方式分别使用element的event名和dispatchEvent进行触发事件
第一种是使用event名直接调用标签的操作比如click()focus()等
bodybutton idbtn1按钮1/buttonbutton idbtn2按钮2/buttonbutton idbtn3按钮3/buttonscriptbtn1.addEventListener(click, (e) {console.log(点击按钮1);btn2.click()})btn2.addEventListener(click, (e) {console.log(点击按钮2);btn3.click()})btn3.addEventListener(click, (e) {console.log(点击按钮3);})/script
/body
第二种是使用dispatchEvent进行事件抛发
// 创建自定义点击事件
const clickEvent new Event(click);
// 手动触发自定义事件
btn3.dispatchEvent(clickEvent);
完整代码
bodybutton idbtn1按钮1/buttonbutton idbtn2按钮2/buttonbutton idbtn3按钮3/buttonscriptbtn1.addEventListener(click, (e) {console.log(点击按钮1);btn2.click()})btn2.addEventListener(click, (e) {console.log(点击按钮2);// 创建自定义点击事件const clickEvent new Event(click);// 手动触发自定义事件btn3.dispatchEvent(clickEvent);})btn3.addEventListener(click, (e) {console.log(点击按钮3);})/script
/body
事件流程
一个完整的事件流程包括三个阶段分别是捕获Captur目标Target和冒泡Bubbling过程如下图。
任何在以下三种阶段注册的事件监听器会在每个阶段被触发。 捕获阶段
事件首先从根元素通常是html向下传播到目标元素的过程。在这个阶段事件会依次经过DOM树中的每个祖先元素直到达到事件的目标元素。
在捕获阶段增加的事件监听函数会在事件的捕获阶段触发在上文我们提到了给addEventListener增加配置项可以使handler在事件捕获时调用思考下面的代码
bodydiv idoutBoxdiv idinBoxdiv idtargetBox点击/div/div/divscriptoutBox.addEventListener(click, (e) {console.log(outBox);}, true)inBox.addEventListener(click, (e) {console.log(inBox);}, true)targetBox.addEventListener(click, (e) {console.log(targetBox);}, true)/*outBoxinBoxtargetBox*//script
/body
目标阶段
一旦事件达到了目标元素就会在目标元素上触发事件。这是事件的目标通常是用户交互的对象。
冒泡阶段
事件从目标元素开始然后向上冒泡到根元素的过程。在这个阶段事件会依次经过DOM树中的每个祖先元素直到达到根元素。
冒泡阶段与捕获相反在冒泡阶段增加的事件监听函数会在事件的冒泡阶段触发将addEventListener的capture配置项改成false或者默认不传配置参数就会使handler回调在事件冒泡时触发思考下面的代码
bodydiv idoutBoxdiv idinBoxdiv idtargetBox点击/div/div/divscriptoutBox.addEventListener(click, (e) {console.log(outBox);})inBox.addEventListener(click, (e) {console.log(inBox);})targetBox.addEventListener(click, (e) {console.log(targetBox);})/*targetBoxinBoxoutBox*//script
/body
tips使用on属性监听标签的事件时不支持在捕获阶段的监听
事件对象
事件对象是指事件的钩子函数的event参数常用的属性有
type表示事件的类型如click、keydown等target表示触发事件的元素即事件的目标元素currentTarget表示当前正在处理事件的元素通常是事件监听器所附加的元素preventDefault()该方法用于取消事件的默认行为例如阻止点击链接跳转或提交表单stopPropagation()该方法用于停止事件的传播阻止事件冒泡或捕获只会执行目标阶段的handlereventPhase表示事件所处的阶段可以是捕获阶段、目标阶段或冒泡阶段timeStamp表示事件的时间戳通常是事件发生时的毫秒数clientX和clientY表示事件发生时的鼠标指针在视口浏览器窗口中的坐标pageX和pageY表示事件发生时的鼠标指针在页面文档中的坐标keyCode和key表示键盘事件的按键代码和按键的名称targetTouches和changedTouches表示触摸事件中涉及的触摸点信息。
总结
浏览器事件机制是前端开发中非常重要的一部分本文深入探讨了浏览器事件机制的各个方面包括不同类型的事件、事件监听的方式、事件触发方式、事件流程以及事件对象的使用。对于开发者来说熟悉浏览器事件机制是非常重要的它可以帮助开发者实现各种交互和动态效果提升用户体验。
以上就是文章全部内容了感谢你看到了最后如果觉得文章不错的话还望三连支持一下谢谢
相关代码
myCode: 基于js的一些小案例或者项目 - Gitee.com
