一丶事件
事件(Event)是 JavaScript 应用跳动的心脏 ，进行交互，使网页动起来。当我们与浏览器 中 Web 页面进行某些类型的交互时，事件就发生了。事件可能是用户在某些内容上的点击、 鼠标经过某个特定元素或按下键盘上的某些按键。事件还可能是 Web 浏览器中发生的事情， 比如说某个 Web 页面加载完成，或者是用户滚动窗口或改变窗口大小。 通过使用 JavaScript ，你可以监听特定事件的发生，并规定让某些事件发生以对这些事件 做出响应。
1.作用:
（1）验证用户输入的数据。
（2）增加页面的动感效果。
（3）增强用户的体验度
2.关键词:
关键词: eg:闯红灯
事件源: 谁触发的事件 事件源:车
事件名: 触发了什么事件 事件名:闯
事件监听: 谁管这个事情，谁监视？ 事件监听:摄像头
事件处理:发生了怎么办 事件处理:扣分罚款
3.事件类型
当我们用户在页面中进行的点击动作，鼠标移动的动作，网页页面加载完成的动作等，都 可以称之为事件名称，即：click、mousemove、load 等都是事件名称，具体的执行代码处理， 响应某个事件的函数。
JavaScript 可以处理的事件类型为：鼠标事件、键盘事件、HTML 事件。
Window 事件属性 :针对 window 对象触发的事件（应用到 标签）
Form 事件 :由 HTML 表单内的动作触发的事件（应用到几乎所有 HTML 元素，但最常用 在 form 元素中）
Keyboard 事件 : 键盘事件 Mouse 事件 :由鼠标或类似用户动作触发的事件
Media 事件 :由媒介（比如视频、图像和音频）触发的事件（适用于所有 HTML 元素，但 常见于媒介元素中，比如 、、、 以及 ）
几个常用的事件： onclick 、onblur 、onfocus 、onload 、onchange、onmouseover、onmouseout、 onkeyup、onkeydown
onload：当页面或图像加载完后立即触发
onblur：元素失去焦点
onfocus：元素获得焦点
onclick：鼠标点击某个对象
onchange：用户改变域的内容
onmouseover：鼠标移动到某个元素上
onmouseout：鼠标从某个元素上离开
onkeyup：某个键盘的键被松开
onkeydown：某个键盘的键被按下
4.事件流和事件模型
DOM 事件流: 是指页面接受事件的顺序,即事件在元素节点与根节点之间特定的传播顺序，是该事件的传播过程.
事件顺序： 冒泡和捕获其实都是事件流的不同表现
事件冒泡:即事件开始时由最具体的元素接受，然后逐级向上传播到较为 不具体的节点（文档）。
事件冒泡顺序:1、
事件捕获:事件捕获的思想是不太具体的节点应该更早 接收到事件，而最具体的节点应该最后接收到事件。
事件捕获的用意在于在事件到达预定目标 之前捕获它。
事件捕获顺序:1、document 2、 3、 4、
DOM 事件流 :
“DOM2 级事件”规定的事件流包括三个阶段：
事件捕获阶段:首先发生的是事件捕获阶段，为截获事件提供了机会。
处于目标阶段:然后是实际的目标接收到事件。
事件冒泡 阶段:最后一个阶段是冒泡阶段，可以在这个阶段对事件做出响应。
5. 事件处理程序
HTML 事件处理程序:某个元素支持的每种事件，都可以用一个与相应事件处理程序同名的 HTML 特性来指定。
DOM0 级事件处理程序 : 是将一个函数赋值给一个事件处理程序 属性,只能为同一个元素 的同一个事件设定一个处理程序（覆盖）
DOM2 级事件处理程序 :定义了两个方法，用于处理指定和删除事件处理程序的操作： addEventListener()和 removeEventListener()。所有 DOM 节点都包含这两个方法，并且 他们都接受 3 个参数：要处理的事件名、作为事件处理程序的函数和一个布尔值。最后这个布 尔值参数如果是 true，则表示在捕获阶段调用事件处理程序；如果是 false 则表示在冒泡阶段 调用事件处理程序。
可以为同一个元素的同一个事件添加多个处理函数。还可删除事件处理函数，注 意，在删除的时候，不能删除匿名处理函数。
二、BOM
1. Window 对象
window 对象方法
1）系统对话框 浏览器通过（实际是 window 对象的方法）alert()、confirm()、prompt()方法可以调用系 统对话框向用户显示消息。
消息框:alert， 常用。 alert() 方法用于显示带有一条指定消息和一个 OK 按钮的警告框。
输入框:prompt，返回提示框中的值。 prompt() 方法用于显示可提示用户进行输入的对话框。 参数（可选）： 第一个参数：要在对话框中显示的纯文本。 第二个参数：默认的输入文本。
确认框:confirm，返回 true/false. confirm() 方法用于显示一个带有指定消息和 OK 及取消按钮的对话框。
2）打开窗口 window.open()方法既可以导航到一个特定的 URL 也可以用来打开一个新的窗口
_self、_parent、_top、_blank
3）关闭窗口 window.close()：关闭窗口。
4）时间函数 setTimeout() : 在指定的毫秒数后调用函数或计算表达式。通过返回的标识也可以 cliearTimeout(id) 来清除指定函数的执行
在 times 毫秒后执行 function 指定的方法，执行之前也可以取消 setInterval():可按照指定的周期（以毫秒计）来调用函数或计算表达式，也可根据 返回的标识用来结束。该方法会不停地调用函数，直到 clearInterval() 被调用或窗口被关闭
2. histroy 对象
history 对象是历史对象。包含用户（在浏览器窗口中）访问过的 URL。
history 对象是 window 对象的一部分，可通过 window.history 属性对其进行访问。
history 对象的属性：length，返回浏览器历史列表中的 URL 数量。
history 对象的方法：
back()：加载 history 列表中的前一个 URL。
forward()：加载历史列表中的下一个 URL。当页面第一次访问时，还没有下一个 url。
go(number|URL): URL 参数使用的是要访问的 URL。而 number 参数使用的是要访 问的 URL 在 History 的 URL 列表中的相对位置。go(-1)，到上一个页面
3. location 对象
location 对象是 window 对象之一，提供了与当前窗口中加载的文档有关的信息，还提供 了一些导航功能。也可通过 window.location 属性来访问。
location 对象的属性 href：设置或返回完整的 URL
location 对象的方法
reload()：重新加载当前文档。
replace()：用新的文档替换当前文档
4. document 对象 : 该对象作为 DOM 中的核心对象
每个载入浏览器的 HTML 文档都会成为 Document 对象。
Document 对象使我们可以从脚 本中对 HTML 页面中的所有元素进行访问。
Document 对象是 Window 对象的一部分，也可通 过 window.document 属性对其进行访问。
document 对象的 body 属性，提供对元素的直接访问，
cookie 属性，用来设置 或返回与当前文档有关的所有 cookie，
write()方法，向文档写 HTML 表达式或 JavaScript 代码。
该对象作为 DOM 中的核心对象
DOM：Document Object Model 文档对象模型 ,dom 提供了用程序动态控制 html 接口
每个载入浏览器的 HTML 文档都会成为 Document 对象。Document 对象使我们可以从脚 本中对 HTML 页面中的所有元素进行访问。Document 对象是 Window 对象的一部分，可通过 window.document 属性对其进行访问。
一、节点
对于页面中的元素，可以解析成以下几种类 型的节点：
节点类型 HTML 内容 例如
文档节点 文档本身 整个文档 document
元素节点 所有的 HTML 元素 、
属性节点 HTML 元素内的属性 id、href、name、class
文本节点 元素内的文本 hello
注释节点 HTML 中的注释
二、元素节点的操作
1. 获取节点
在进行增、删、改的操作时，都需要指定到一个位置，或者找到一个目标，此时我们就可 以通过 Document 对象提供的方法，查找、定位某个对象（也就是我们说的节点）。
注意：操作 dom 必须等节点初始化完毕后，才能执行。
处理方式两种:
（1）把 script 调用标签移到 html 末尾即可；
（2）使用 onload 事件来处理 JS，等待 html 加载完毕再加载 onload 事件里的 JS
获取方式如下： 方法 描述
getElementById() 根据 id 获取 dom 对象，如果 id 重复，那么以第一个为准
getElementsByTagName() 根据标签名获取 dom 对象数组
getElementsByClassName() 根据样式名获取 dom 对象数组
getElementsByName() 根据 name属性值获取 dom 对象数组，常用于多选获取值