DOM事件

元信息

目标：掌握事件模型的标准操作面——EventTarget 三方法（绑定/移除/触发）与三种事件声明写法；会用事件对象（如鼠标坐标）与 this/event.target 两类引用，理解焦点竞争为何推荐文档元素 UI
关键概念：EventTarget、addEventListener、事件声明写法、事件对象、事件来源、this、event.target、焦点
关联阶段：cp3
常见误区：分不清三类取元素模式（选择器=编辑时、this=上下文、event.target=运行时）；提示信息滥用 alert()（窗口与页面争焦点，输入框拿不回焦点）；不知道事件也可能由程序调用触发（click() 方法、自定义事件 dispatch）

DOM 事件

为了使得DOM文档支持交互，DOM定义了事件模型及相关操作（监听和触发）。所有的节点对象都支持EventTarget接口，主要包括三个实例方法

addEventListener：绑定事件的监听函数
removeEventListener：移除事件的监听函数
dispatchEvent：触发事件

其他一些需要事件通信的浏览器内置对象（比如XMLHttpRequest、AudioNode、AudioContext）也支持该接口

事件声明写法一

<!DOCTYPE html>
<html>
<head>
  <title>Parcel Sandbox</title>
  <meta charset="UTF-8" />
  <link rel="stylesheet" href="/styles.css" />
</head>
<body>
  <h1>Hello world</h1>
</body>
</html>

Open Sandbox

事件声明写法二

<!DOCTYPE html>
<html>
<head>
  <title>Parcel Sandbox</title>
  <meta charset="UTF-8" />
  <link rel="stylesheet" href="/styles.css" />
</head>
<body>
  <h1>Hello world</h1>
</body>
</html>

Open Sandbox

事件声明写法三

<!DOCTYPE html>
<html>
<head>
  <title>Parcel Sandbox</title>
  <meta charset="UTF-8" />
  <link rel="stylesheet" href="/styles.css" />
</head>
<body>
  <h1>Hello world</h1>
</body>
</html>

Open Sandbox

事件来源

文档事件：指由于文档元素(document对象)的变化所引发的事件，如load、change、submit等
窗口事件：指浏览器窗口(window对象)的变化所引发的事件，如load、resize、close等
输入事件：指键盘、鼠标等所发出的事件，如keyup、keydown、click、mouseover等
系统事件：指来自系统内部的事件，如定时器 http://www.runoob.com/js/js-timing.html
程序调用：如对元素调用 HTMLElement.click() 方法，或者定义一些自定义事件，再使用 EventTarget.dispatchEvent()等

事件对象

希望制作一个鼠标特效（魔术棒），当鼠标移动时，该魔术棒也随之移动。请问如何获知鼠标的当前位置座标?

import "./styles.css";

document.getElementById("app").innerHTML = `
<h1>Hello world</h1>
`;

Open Sandbox

答案：当事件发生时，浏览器会将相关的环境信息(如鼠标座标)打包为一个事件对象，供开发者代码在事件处理函数中使用

DHTML示例：动态CRUD

利用DOM和DOM事件实现了表格元素的动态增删改

示例：可编辑的表格

this 引用

<!DOCTYPE html>
<html>
<head>
  <title>Parcel Sandbox</title>
  <meta charset="UTF-8" />
  <link rel="stylesheet" href="/styles.css" />
</head>
<body>
  <h1>Hello world</h1>
</body>
</html>

Open Sandbox

this 是什么？

javascript中获取某节点或元素的三类编程模式

使用 id 等选择器直接获取节点元素，绝对模式，编辑时
使用 this 获取当前对象的引用(即指向某个节点元素)，上下文模式，编译时
使用 event.target 事件对象的属性来获取当前事件关联的元素，交互模式，运行时

关于焦点：窗口与文档

当用户输入的信息错误或为空时，请观察：使用弹出框窗口提示和使用页面元素信息提示的区别！

alert()函数弹出的是一个窗口window，它与浏览器自身的窗口属于同级（都是由操作系统管理），两者之间将展开对输入焦点的竞争，难以被页面脚本代码所控制，从而使得焦点无法回到表单控件输入框
<div class="info">error!</div> 则属于文档元素，不涉及对焦点的争夺

在Web前端应用中，尽量使用文档元素来构建各类UI元素，从而拥有较自由的控制

一些兼容性问题

IE的兼容性问题: event

import "./styles.css";

document.getElementById("app").innerHTML = `
<h1>Hello world</h1>
`;

Open Sandbox

firefox的兼容性问题： blue bug

import "./styles.css";

document.getElementById("app").innerHTML = `
<h1>Hello world</h1>
`;

Open Sandbox

参考

https://developer.mozilla.org/zh-CN/docs/Web/Events
html dom 事件 http://www.runoob.com/js/js-htmldom-events.html
事件详解1 http://blog.jobbole.com/52430/
事件详解2 http://www.codeceo.com/article/javascript-event-anay.html

高级

以setTimeout来聊聊Event Loop https://xianyulaodi.github.io/2017/02/26/%E4%BB%A5setTimeout%E6%9D%A5%E8%81%8A%E8%81%8AEvent%20Loop/
firefox blue bug https://javascript.info/focus-blur
change 事件 https://www.cnblogs.com/littlesummer/p/6428116.html

DOM事件 ​

元信息 ​

DOM 事件 ​

事件声明写法一 ​

事件声明写法二 ​

事件声明写法三 ​

事件来源 ​

事件对象 ​

DHTML示例：动态CRUD ​

this 引用 ​

javascript中获取某节点或元素的三类编程模式 ​

关于焦点：窗口与文档 ​

一些兼容性问题 ​

参考 ​

高级 ​

DOM事件

元信息

DOM 事件

事件声明写法一

事件声明写法二

事件声明写法三

事件来源

事件对象

DHTML示例：动态CRUD

this 引用

javascript中获取某节点或元素的三类编程模式

关于焦点：窗口与文档

一些兼容性问题

参考

高级