第133篇:事件处理与常用事件_驱动网
- 首页
- 移动通信
- 内容
第133篇:事件处理与常用事件
来源:博客园
好家伙,本篇为《JS高级程序设计》第十七章"事件"学习笔记
1.DOM0事件处理程序
在 JavaScript 中指定事件处理程序的传统方式是把一个函数赋值给(DOM 元素的)一个事件处理程 序属性。
【资料图】
添加点击事件:
<正文>
<脚本> let button_1 = document.createElement( " button " ) 按钮_1。id = " button_1 " let div_1 = document.getElementById( " div_1 " ) div_1.appendChild(button_1) button_1.onclick =函数() { console.log( this.id ) } 脚本>
移除事件
button_1.onclick = null;
2.DOM2事件处理程序
DOM2 Events 为事件处理程序的赋值方法:addEventListener()
这个方法暴露在所有 DOM 节点上,它们接收 3 个参数:
(1)事件名、
(2)事件处理函数
(3)一个布尔值:true 表示在捕获阶段调用事件处理程序,
false(默认值)表示在冒泡阶段调用事 件处理程序
添加事件:
button_1.addEventListener("click", () => { console.log("成功添加");}, false);button_1.addEventListener("click", () => { console.log(this.id);}, false);
使用DOM2的优势:
支持添加多个事件处理程序:DOM2事件模型可以为同一元素的同一事件添加多个事件处理程序,不会覆盖原有的事件处理程序,而DOM0事件模型只支持为同一元素的同一事件添加一个事件处理程序。
支持事件捕获和事件冒泡:DOM2事件模型支持事件的捕获和冒泡阶段,可以更精细地控制事件的传递和处理顺序,而DOM0事件模型只支持事件冒泡。
支持更多的事件类型:DOM2事件模型支持更多的事件类型,包括鼠标滚轮事件、键盘按键事件、文本输入事件等,而DOM0事件模型只支持少数的事件类型。
支持事件对象的属性和方法:DOM2事件模型的事件对象具有更多的属性和方法,可以更方便地获取事件的相关信息,而DOM0事件模型的事件对象比较简单,只有少数的属性和方法。
总之,DOM2事件模型相对于DOM0事件模型更加灵活、功能更加强大,可以满足更多的需求,是现代Web开发中不可或缺的一部分。
移除事件处理程序
button_1.addEventListener("click", () => { console.log(this.id);}, false);button_1.removeEventListener("click", () => { console.log(this.id);}, false);
注意,此处事件移除无效,匿名函数是无法取消的
let afterclick = function(){ console.log(this.id)} button_1.addEventListener("click", afterclick(), false);button_1.removeEventListener("click", afterclick(), false);
3.事件类型
常用事件类型如下:
3.1.用户界面事件(UIEvent):涉及与 BOM 交互的通用浏览器事件。
常用事件:
(1) load:在 window 上当页面加载完成后触发,在窗套()上当所有窗格() 都加载完成后触发,在元素上当图片加载完成后触发,在元素上当相应对象加 载完成后触发。
(2) resize:在 window 或窗格上当窗口或窗格被缩放时触发。
(3) scroll:当用户滚动包含滚动条的元素时在元素上触发。元素包含已加载页面的滚动条。 大多数 HTML 事件与 window 对象和表单控件有关。
3.2.焦点事件(FocusEvent):在元素获得和失去焦点时触发。
常用:
(1) blur:当元素失去焦点时触发。这个事件不冒泡,所有浏览器都支持。
(2) focus:当元素获得焦点时触发。这个事件不冒泡,所有浏览器都支持。
(3) focusin:当元素获得焦点时触发。这个事件是 focus 的冒泡版。
(4) focusout:当元素失去焦点时触发。这个事件是 blur 的通用版。
3.3.鼠标事件(MouseEvent):使用鼠标在页面上执行某些操作时触发。
(1)click:在用户单击鼠标主键(通常是左键)或按键盘回车键时触发。这主要是基于无障碍的考 虑,让键盘和鼠标都可以触发 onclick 事件处理程序。
(2)mousedown:在用户按下任意鼠标键时触发。这个事件不能通过键盘触发。
(3)mouseenter:在用户把鼠标光标从元素外部移到元素内部时触发。这个事件不冒泡,也不会在 光标经过后代元素时触发。mouseenter 事件不是在 DOM2 Events 中定义的,而是 DOM3 Events 中新增的事件。
(4)mouseleave:在用户把鼠标光标从元素内部移到元素外部时触发。这个事件不冒泡,也不会在 光标经过后代元素时触发。mouseleave 事件不是在 DOM2 Events 中定义的,而是 DOM3 Events 中新增的事件。
(5)mousemove:在鼠标光标在元素上移动时反复触发。这个事件不能通过键盘触发。
3.4.键盘与输入事件(KeyboardEvent):使用键盘在页面上执行某些操作时触发。
(1) keydown,用户按下键盘上某个键时触发,而且持续按住会重复触发。
(2) keypress,用户按下键盘上某个键并产生字符时触发,而且持续按住会重复触发。Esc 键也会 触发这个事件。DOM3 Events 废弃了 keypress 事件,而推荐 textInput 事件。
(3) keyup,用户释放键盘上某个键时触发。
关键词:
-
14 最长公共前缀编写一个函数来查找字符串数组中的最长公共前缀。如果不存在公共前缀,返回空字符串""...
-
好家伙,本篇为《JS高级程序设计》第十七章"事件"学习笔记1 DOM0事件处理程序在JavaScript中指定事件处...
-
9月15日,Figma的CEODylanField发布消息:今天,Figma宣布接受Adobe的收购 Adobe以约200亿美元收购Figma,这也是Adobe
-
前戏:1 你是否在夜深人静的时候,想看一些会让你更睡不着的图片却苦于没有资源 2 你是否在节假...