HTML 事件

HTML 4 中新增了 HTML 事件触发浏览器行为（JavaScript 语句）。HTML 5 新增了更多的事件。

事件的使用

参考：事件介绍@MDN

使用事件处理器属性

const btn = document.getElementById("btn");
btn.onclick = function() => { console.log("123"); }

注意，这里只能绑定一个事件。或者可以通过赋值为 null 消除事件。（实际上相当于给这个东西加了一个属性，叫做 onclick）

行内处理器（不建议）

<button onclick="func()">Press</button>
  1. 不建议混写 HTML、JS
  2. 这种形式会导致维护混乱（比如如果一堆按钮）

add/removeEventListener

target.addEventListener(type, listener);
target.addEventListener(type, listener, options);
target.addEventListener(type, listener, useCapture);

target.removeEventListener(type, listener[, options]);
target.removeEventListener(type, listener[, useCapture]);

type: 事件类型（没有 on）

listener：处理器（函数）

注：删除的时候如果提供的处理器未注册，无事发生。

注2：仅能移除通过 addEventListener 添加的事件，通过上面两种不可以。

jQuery

参考：.on() @jQuery 文档

$(selector).on(event, childSelector, data, handler)

event: 必需。事件类型（不写 on）

childSelector：进一步选中子元素（可以不写）

data: 可选。被传递给 event.data 的东西

handler: 可选。规定当事件发生时运行的函数

冒泡和捕获

  1. Event.cancelBubble 是 Event.stopPropagation 的曾用名，取消冒泡
  2. 冒泡与捕获@javascript.info

事件类型

参考：HTML 事件@菜鸟教程、Events@MDN

窗口事件（由 body 标签触发）

属性描述备注
onblur当失去焦点的时候执行脚本
onfocus当获取焦点的时候执行
onerror当发生错误的时候执行
onload文档加载完成之后
onunload关闭页面的时候执行脚本
onresize窗口大小发生调整
onstorage当 Web Storage 区域更新时可以用来监控 localStorage。可以用来实现同域不同页面通信

表单事件（在 HTML 表单 form内的组件触发）

属性描述备注
onblur失去焦点
onfocus获取焦点
oncontextmenu触发上下文菜单
onforminput表单输入
onsubmit表单提交

键盘

属性描述备注
onkeydown按键按下（未完成输入内容）
onkeyup
按键抬起（此时已经完成输入内容）
onkeypress按键按下时触发（实际上是相当于有内容输入）
document.addEventListener("keyup", function () { console.log("keyup"); });
document.addEventListener("keydown", function () { console.log("keydown"); });
document.addEventListener("keypress", function () { console.log("keypress"); });

触发情况

短按： onkeydown -> onkeypress -> onkeyup

长按：onkeydown -> onkeypress -> onkeydown -> onkeypress -> ... -> onkeyup

注意：

  1. onkeypress 浏览器支持不是很好（MDN 建议使用 beforeinput和onkeydown 替代，参考链接）

  2. onkeypress 有一些问题，比如

    1. 中文不友好（无法响应中文输入）
    2. 以及无法响应系统功能键（比如 backspace, delete, insert, home, shift 等）
    3. 因为识别的是输入内容，所以 keycode 可能不一样。比如，a, A 的 keycode，在 onkeydown 里面都是 65（大写 A），而 onkeypress 里面，大写 A 是 65，小写是 97. （其他参数具体再看）
    4. 对于组合键，比如 Ctrl + A 这种，第一个 onkeydown 检测到的是 ctrl，然后第二个检测到的是 A，且 ctrlKey 标记为 true。如果组合键没有实际输入内容，不会触发 onkeypress

鼠标

属性描述备注
onmousedown
鼠标按下
onmousemove鼠标移动
onmouseenter鼠标进入当前组件区域
onmouseover鼠标在当前区域上移过
onmouseleave鼠标离开（后面附注）
onmouseout鼠标离开
onmouseup
鼠标按下的键抬起
onclick鼠标点击（当 up 之后才发生）
ondblclick双击
ondrag
拖动的时候持续触发
ondragstart拖动开始
ondragenter拖动进入目标元素
ondragover在目标元素内移动
ondragleave离开目标元素
ondragend拖动释放触发
ondrop拖动到目标元素之后触发

onmouseleave 和 onmouseenter ，不支持冒泡，也就是说，必须要由外层的区域触发才行。

onmouseout 和 onmouseover，支持冒泡，内层触发的时候也会触发

onmouseout 仅考虑可视区域（进入子元素被遮挡也会触发（MDN）），而 onmouseleave, onmouseenter, onmouseover 都是支持被炸当区域的

从绿色区域进去，然后原路出来. 绿色 1，蓝色 2
over 1（移到元素上）
enter 1（进入）
out 1（离开绿色，进入蓝色区域。不包含非可视区域）
over 2（移动到 2 上）
over 1（冒泡 2，显示为 1。添加 stopPropagation 会消失）
enter 2（进入 2）
// ===================
out 2
out 1（冒泡）
leave 2
over 1
out 1
leave 1
从蓝色区域进去
over 2
over 1
enter 1
enter 2
out 2
out 1
leave 2
over 1
// ===================
out 1
over 2
over 1
enter 2
out 2
out 1
leave 2
leave 1

<!--

实例

响应键盘按键

相应鼠标操作

劫持打开 devtools

文档加载完成

鼠标跟随

-->

© 允许规范转载
如果觉得我的文章对你有用，请随意赞赏