JavaScript 事件
事件是您在编程时系统内发生的动作或者发生的事情，系统响应事件后，如果需要，您可以某种方式对事件做出回应。例如：如果用户在网页上单击一个按钮，您可能想通过显示一个信息框来响应这个动作。在这篇文章中，我们将讨论一些关于事件的重要概念，并且观察它们在浏览器上如何运行。这篇文章不会面面俱到，仅聚焦于您现阶段需要掌握的知识。
一系列事件
就像上面提到的，事件是您在编程时系统内发生的动作或者发生的事情——系统会在事件出现时产生或触发某种信号，并且会提供一个自动加载某种动作（列如：运行一些代码）的机制，比如在一个机场，当跑道清理完成，飞机可以起飞时，飞行员会收到一个信号，因此他们开始起飞。
在 Web 中，事件在浏览器窗口中被触发并且通常被绑定到窗口内部的特定部分 — 可能是一个元素、一系列元素、被加载到这个窗口的 HTML 代码或者是整个浏览器窗口。举几个可能发生的不同事件：
- 用户在某个元素上点击鼠标或悬停光标。
- 用户在键盘中按下某个按键。
- 用户调整浏览器的大小或者关闭浏览器窗口。
- 一个网页停止加载。
- 提交表单。
- 播放、暂停、关闭视频。
- 发生错误。
每个可用的事件都会有一个事件处理器，也就是事件触发时会运行的代码块。当我们定义了一个用来回应事件被激发的代码块的时候，我们说我们注册了一个事件处理器。注意事件处理器有时候被叫做事件监听器——从我们的用意来看这两个名字是相同的，尽管严格地来说这块代码既监听也处理事件。监听器留意事件是否发生，然后处理器就是对事件发生做出的回应。
事件的三要素
事件源>事件类型>事件处理程序
- 事件源： 事件被触发的对象，就是谁触发了这个事件
- 事件类型： 如何触发，什么事件，比如鼠标点击（onclick），鼠标经过，键盘按下。
- 事件处理程序： 通过一个函数赋值的方式完成
var btn = document,getElementById(“btn”)； btn.onclick = function (){ }这就是一个最简单的事件
事件执行的步骤
1、获取事件源 2、注册事件（也叫绑定事件） 3、添加事件处理程序（ 一般用function函数）
操作元素
js的dom操作可以改变网页内容，结构和样式，我们就可以利用dom操作元素来改变元素里面的内容 属性等
- 修改元素内容
element.Text和element.innerHTML element.innerText 从起始位置到终止位置的内容，但他去除了html标签同时空格和换行也会去掉 不识别HTML标签 非标准 element.innerHTML 起始位置到终止位置的全部内容，包括HTML标签，同时保留了空格和换行，识别HTML标签 属于w3c标准，用的比较多 这两个属性都是可读写的，可以获得元素里面的内容
- 修改元素属性
还是老的操作方法： 先获取元素 注册事件 处理程序 然后直接调用元素的属性赋值
DOM事件流
事件流(Event Flow)指的就是「网页元素接收事件的顺序」。事件流可以分成两种机制：
- 事件捕获(Event Capturing)
- 事件冒泡(Event Bubbling)
当一个事件发生后，会在子元素和父元素之间传播（propagation）。这种传播分成三个阶段：
- 捕获阶段：事件从window对象自上而下向目标节点传播的阶段；
- 目标阶段：真正的目标节点正在处理事件的阶段；
- 冒泡阶段：事件从目标节点自下而上向window对象传播的阶段。
- 接着就来分别介绍事件捕获和事件冒泡这两种机制。
事件捕获(Event Capturing)
事件捕获指的是「从启动事件的元素节点开始，逐层往下传递」，直到最下层节点，也就是div。
假设HTML 如下：
<html>
<head>
<title>米淇淋是个大帅哥</title>
</head>
<body>
<div>点我</div>
</body>
</html>
事件冒泡(Event Bubbling)
刚刚说过「事件捕获」机制是由上往下来传递，那么「事件冒泡」(Event Bubbling) 机制则正好相反。
假设HTML 同样如下：
<html>
<head>
<title>米淇淋是个大帅哥</title>
</head>
<body>
<div>点我</div>
</body>
</html>
一个简单的例子
让我们看一个简单的例子。前面您已经见到过很多事件和事件监听器，现在我们概括一下以巩固我们的知识。在接下来的例子中，我们的页面中只有一个 button，按下时，背景会变成随机的一种颜色。
<button>Change color</button>
JavaScript 代码如下所示：
const btn = document.querySelector('button');
function random(number) {
return Math.floor(Math.random()*(number+1));
}
btn.onclick = function() {
const rndCol = 'rgb(' + random(255) + ',' + random(255) + ',' + random(255) + ')';
document.body.style.backgroundColor = rndCol;
}
我们使用 btn 变量存储 button，并使用了Document.querySelector() 函数。我们也定义了一个返回随机数字的函数。代码第三部分就是事件处理器。btn变量指向 button 元素，在 button 这种对象上可触发一系列的事件，因此也就可以使用事件处理器。我们通过将一个匿名函数（这个赋值函数包括生成随机色并赋值给背景色的代码）赋值给“点击”事件处理器参数，监听“点击”这个事件。
只要点击事件在
