seo建设网站,徐州市建设局官方网站,商城网站支付宝接口,提供网站建设方案ppt参考资料
事件介绍Element事件 目录 常见的事件鼠标事件键盘事件Focus events 添加事件监听方式一#xff1a;addEventListener()#xff08;推荐#xff09;方式二#xff1a;事件处理器属性方式三#xff1a;内联事件处理器#xff08;不推荐#xff09; 移除监听器方…参考资料
事件介绍Element事件 目录 常见的事件鼠标事件键盘事件Focus events 添加事件监听方式一addEventListener()推荐方式二事件处理器属性方式三内联事件处理器不推荐 移除监听器方式一removeEventListener方式二AbortController 事件的控制阻止默认行为 preventDefault事件冒泡阻止事件冒泡 stopPropagation事件捕获事件委托 常见的事件
鼠标事件
事件触发时机click鼠标的主键在一个元素上被按下和放开时dblclick在单个元素上单击两次鼠标的主按钮时contextmenu在用户尝试打开上下文菜单时mousedown鼠标按钮在元素内按下时mouseup鼠标按钮在元素内释放时mouseenter鼠标首次移动到元素的激活区域内时mouseleave鼠标指针移出某个元素时被触发mousemove鼠标的光标在元素内移动时
键盘事件
事件触发时机keypress当按下产生字符或符号值的键时已弃用keydown键盘按键按下时所有按键均会触发keyup按键被松开时触发
Focus events
事件触发时机focus元素获取焦点时blur元素失去焦点的时
添加事件监听
方式一addEventListener()推荐
语法
addEventListener(type, listener);
addEventListener(type, listener, options);
addEventListener(type, listener, useCapture);参数
参数名类型必须说明typeString是监听事件类型大小写敏感listenerFuncion是当所监听的事件类型触发时会接收到一个事件通知Event对象optionsObjcet可选一个指定有关 listener 属性的可选参数对象useCaptureBoolean可选false事件冒泡true事件捕获
options可选值
参数名类型必须说明captureBoolean可选事件捕获onceBoolean可选最多只调用一次 listenerpassiveBoolean可选表示 listener 永远不会调用 preventDefault()signalAbortSignal可选该 AbortSignal 的 abort() 方法被调用时监听器会被移除。
示例绑定input获得焦点事件
inputtypetextidinput-name
/scriptlet inputName document.querySelector(#input-name)inputName.addEventListener(focus, (event) {console.log(event)})
/script
addEventListener 方式可以在单个事件上添加多个监听器
button按钮/buttonscriptconst btn document.querySelector(button)// 添加多个事件处理器btn.addEventListener(click, () {console.log(处理器1)})btn.addEventListener(click, () {console.log(处理器2)})
/script方式二事件处理器属性
示例为div元素绑定click点击事件
style#box {width: 200px;height: 200px;background-color: gray;}
/stylediv idbox/divscriptlet box document.querySelector(#box)box.onclick (event) {console.log(event)}
/script事件处理器属性不能为一个事件添加一个以上的处理程序因为任何后续尝试都会覆写较早设置的属性
方式三内联事件处理器不推荐
inputtypetextonfocushandleFocus()
/scriptfunction handleFocus(event) {let e event || window.eventconsole.log(e)}
/script你永远不应该使用 HTML 事件处理器属性——那些已经过时了使用它们是不好的做法。
移除监听器
方式一removeEventListener
button按钮/buttonscriptfunction handleButtonClick(event) {console.log(event)}const btn document.querySelector(button)// 添加事件处理器btn.addEventListener(click, handleButtonClick)// 移除监听器btn.removeEventListener(click, handleButtonClick)
/script方式二AbortController
button按钮/buttonscriptfunction handleButtonClick(event) {console.log(event)}const controller new AbortController()const btn document.querySelector(button)// 添加事件处理器btn.addEventListener(click, handleButtonClick, {signal: controller.signal, // 向该处理器传递 AbortSignal})// 移除任何/所有与该控制器相关的事件处理器controller.abort()
/script事件的控制
阻止默认行为 preventDefault
表单中只有一个输入框默认键盘敲下回车就会提交表单可以阻止这种默认行为
!-- 表单 --
form idforminputtypetextidname/
/formscriptconst form document.querySelector(#form)form.addEventListener(submit, (e) {e.preventDefault()console.log(submit);})
/script事件冒泡
当点击button时外层容器也会接收到click事件
div idboxbutton点击/button
/divscriptconst btn document.querySelector(button)const box document.querySelector(#box)btn.addEventListener(click, (e) {console.log(btn click)})box.addEventListener(click, (e) {console.log(box click)})
/script输出顺序
btn click
box click阻止事件冒泡 stopPropagation
使用stopPropagation可以阻止事件继续传播
div idboxbutton点击/button
/divscriptconst btn document.querySelector(button)const box document.querySelector(#box)btn.addEventListener(click, (e) {e.stopPropagation() // 阻止冒泡console.log(btn click)})box.addEventListener(click, (e) {console.log(box click)})
/script事件捕获
div idboxbutton点击/button
/divscriptconst btn document.querySelector(button)const box document.querySelector(#box)btn.addEventListener(click,(e) {console.log(btn click)},{ capture: true })box.addEventListener(click,(e) {console.log(box click)},{ capture: true })
/script输出和冒泡顺序相反
box click
btn click事件委托
利用事件冒泡可以实现事件委托简化代码
简单的事件监听
div idboxbutton idbuttonA点击A/buttonbutton idbuttonB点击B/button
/divscriptconst buttonA document.querySelector(#buttonA)const buttonB document.querySelector(#buttonB)buttonA.addEventListener(click, (e) {console.log(buttonA click)})buttonB.addEventListener(click, (e) {console.log(buttonB click)})
/script使用事件委托仅用监听外层元素的事件
div idboxbutton idbuttonA点击A/buttonbutton idbuttonB点击B/button
/divscriptconst box document.querySelector(#box)box.addEventListener(click, (e) {// 事件触发元素 buttonA / buttonBconsole.log(e.target)// 获取元素id属性let targetId e.target.getAttribute(id)console.log(targetId)// 处理元素 boxconsole.log(e.currentTarget)})
/script参考文章
如何将事件作为参数传递给 JavaScript 中的内联事件处理程序
