第133篇:事件处理与常用事件

Posted 2023-03-24 养肥胖虎

好家伙，本篇为《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的优势:

1. 支持添加多个事件处理程序：DOM2事件模型可以为同一元素的同一事件添加多个事件处理程序，不会覆盖原有的事件处理程序，而DOM0事件模型只支持为同一元素的同一事件添加一个事件处理程序。

2. 支持事件捕获和事件冒泡：DOM2事件模型支持事件的捕获和冒泡阶段，可以更精细地控制事件的传递和处理顺序，而DOM0事件模型只支持事件冒泡。

3. 支持更多的事件类型：DOM2事件模型支持更多的事件类型，包括鼠标滚轮事件、键盘按键事件、文本输入事件等，而DOM0事件模型只支持少数的事件类型。

4. 支持事件对象的属性和方法：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，用户释放键盘上某个键时触发。