最新要闻

广告

手机

iphone11大小尺寸是多少?苹果iPhone11和iPhone13的区别是什么?

iphone11大小尺寸是多少?苹果iPhone11和iPhone13的区别是什么?

警方通报辅警执法直播中被撞飞:犯罪嫌疑人已投案

警方通报辅警执法直播中被撞飞:犯罪嫌疑人已投案

家电

第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的优势:

  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,用户释放键盘上某个键时触发。

关键词: