第133篇:事件处理与常用事件
好家伙,本篇为《JS高级程序设计》第十七章"事件"学习笔记
1.DOM0事件处理程序
在 JavaScript 中指定事件处理程序的传统方式是把一个函数赋值给(DOM 元素的)一个事件处理程 序属性。
添加点击事件:
<正文>
<div id = " div_1 " >
</div>
<脚本>
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 )
}
</脚本>
</body>
移除事件
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,用户释放键盘上某个键时触发。