Day-26 事件机制(2)

承前文,在事件的注册/绑定与监听中,入门者最常使用「监听CLICK事件」等侵入/非侵入式JavaScript。然而,这只是有关事件的冰山一角。兹分述如下。

网页界面事件

此类事件可以与DOM、BOM两类操作有关,包括有:

  • DOMContentLoaded事件:待网页DOM结构载入後,开始触发。
  • load事件:待网页资源(包括外部资源)全部载入,开始触发(如图片、CSS载入完毕後,所以比DOMContentLoaded事件要慢)。
  • unload或beforeunload事件:待离开网页/重新载入网页,开始触发(如跳出讯息「是否要离开?」)。
  • error事件:图片或document载入错误时,开始触发(写为 onerrer="触发行为")。
  • resize事件:浏览器视窗或元素的尺寸变更时,开始触发。
  • fullscreenchange事件:浏览器视窗切换全萤幕/切换复原时,开始触发。
  • scroll事件:浏览器视窗或元素的卷轴拉动时,开始触发。

滑鼠触发事件

  • mousedown或mouseup事件:滑鼠指标「点下」、「放开」某元素时,开始触发。
  • click事件:滑鼠指标「点下」某元素时,开始触发。
  • dblclick事件:滑鼠指标「连点两下」某元素时,开始触发。
  • mouseenter或mousemove或mouseleave或mouseover事件:滑鼠指标移入、移动、离开某元素时,依次触发。

键盘触发事件

键盘事件常注册在网页中的input标单框:

  • keydown事件:键盘「按下」时,开始触发。
  • keypress事件:除了Shift、Fn、CapsLock之外,键盘「按下」时,开始触发。「一直按下」则连续触发。
  • keyup事件:键盘「放开」时,开始触发。

表单触发事件

顾名思义,本类事件与表单元素相关,处理与input、select、textarea有关的事件。

  • input事件:凡带有contenteditable元素及input与textarea框内内容改变时,开始触发。
  • select事件:凡在input与textarea框内选取文字,即可被event.target的selectionEnd与selectionStart取得。
  • change事件:凡触发若干表单元素时,且离输入框之後,开始触发。
  • submit事件:凡form表单资料送出时(包括表单验证),开始触发。
  • reset事件:凡form表单资料重置时,开始触发。
  • focus事件:凡表单元素聚焦时,开始触发。
  • blur事件:凡表单元素失焦时,开始触发。

特殊事件

组成事件包含三种可监听事件:

  • compositionstart:在框内启动输入法且正在拼字,开始触发。
  • compositionupdate:在框内启动输入法且正在拼字/选字,开始触发。
  • compositionend:在框内启动输入法且拼字/选字完成,开始触发。

剪贴簿事件,包括操作电脑常用的:

  • cut事件:在网页中选取且剪下文字时,开始触发。
  • copy事件:在网页中选取且复制文字时,开始触发。
  • paste事件:将剪贴簿中的文字贴上时,开始触发。

阻挡事件

为了特殊设计需求,有时候必须阻挡HTML元素的预设行为(如超连结、表单送出等)。此时,可以在指定榜定行为前面,加上 event.preventDefault() 方法,阻挡预设事件。

此外,如须阻止事件向上冒泡传递(如同一事件执行两次),亦可使用 **event.stopPropogation() ** 方法加以实施。


<<:  突破自我设限

>>:  Day-27 特集:测试驱动开发 TDD

[Day14]C# 鸡础观念- 不同层次的阵列~二维阵列

既然空间有维度, 阵列也像是空间一样, 他是拥有维度的, 就让我们探索看看吧 二维阵列 就如同象棋棋...

[Day2] Vite 出小蜜蜂~动画 Animation!

Day2 Animation 动画 动画在游戏中扮演非常重要的角色, 当绘制的角色在萤幕上动起来时,...

【验证模型】3-7 「今晚,我想来点⋯⋯」动手做的餐点选择器进化!(下集)

昨天我们辛苦地完成了饲料清单的渲染与新增删除後,现在我们要将各个显示的部分与储存机制串连起来。 流程...

Day 15 ( 中级 ) 循环霹雳灯

循环霹雳灯 教学原文参考:循环霹雳灯 这篇文章会介绍如何使用「重复无限次」、「重复指定次数」、「逻辑...

Day 1 - JavaScript 的变数与基本资料型态

废话不多说~直接进入正题 变数(Variable) 变数就像一个箱子,拿来装资料,且所有变数都只能出...