事件
事件：就是文档或浏览器窗口中发生的一些特定的交互瞬间。对于 Web 应用来说，有下面这些代表性的事件：点击某个元素、将鼠标移动至某个元素上方、关闭弹窗等等。
JavaScript 是以事件驱动为核心的一门语言。JavaScript 与 HTML 之间的交互是通过事件实现的。
事件的三要素
事件的三要素：事件源（引发后续事件的html标签）、事件、事件驱动程序（DOM）。
<body>
<div id="box1"></div>
<script type="text/javascript">
// 1、获取事件源
var div = document.getElementById("box1");
// 2、绑定事件
div.onclick = function () {
// 3、书写事件驱动程序
alert("我是弹出的内容");
}
</script>
</body>
元素节点的获取
三种方式可以获取DOM节点：
var div1 = document.getElementById("box1"); //方式一：通过 id 获取 一个 元素节点（为什么是一个呢？因为 id 是唯一的）
var arr1 = document.getElementsByTagName("div"); //方式二：通过 标签名 获取 元素节点数组，所以是Elements
//方式三：通过 类名 获取 元素节点数组
var arr2 = document.getElementsByClassName("inner");
或者
var arr2 = document.querySelector('.inner')
既然方式二、方式三获取的是标签数组，那么习惯性是先遍历之后再使用。
特殊情况：数组中的值只有1个。即便如此，这一个值也是包在数组里的。这个值的获取方式如下：
document.getElementsByTagName("div1")[0]; //取数组中的第一个元素
document.getElementsByClassName("hehe")[0]; //取数组中的第一个元素
DOM节点的操作
上一段的内容：节点的访问关系都是属性。
本段的内容：节点的操作都是函数（方法）。
创建节点
格式如下：
let li = document.createElement("li");
比如，如果我们想创建一个li标签，或者是创建一个不存在的adbc标签，可以这样做：
<script type="text/javascript">
var a1 = document.createElement("li"); //创建一个li标签
var a2 = document.createElement("adbc"); //创建一个不存在的标签
console.log(a1);
console.log(a2);
console.log(typeof a1);
console.log(typeof a2);
</script>
插入节点
插入节点有两种方式，它们的含义是不同的。
方式1：
父节点.appendChild(新的子节点);
解释：父节点的最后插入一个新的子节点。
方式2：
父节点.insertBefore(新的子节点,作为参考的子节点)
解释：
- 在参考节点前插入一个新的节点。
- 如果参考节点为null，那么他将在父节点里面的最后插入一个子节点。
删除节点
格式如下：
父节点.removeChild(子节点);
解释：用父节点删除子节点。必须要指定是删除哪个子节点。
添加删除class
btn.classList.add('active'); btn.classList.remove('active');
复制节点（克隆节点）
格式如下：
要复制的节点.cloneNode(); //括号里不带参数和带参数false，效果是一样的。
要复制的节点.cloneNode(true);
括号里带不带参数，效果是不同的。解释如下：
-
不带参数/带参数false：只复制节点本身，不复制子节点。
-
带参数true：既复制节点本身，也复制其所有的子节点。
获取节点的属性值
方式1：
元素节点.属性名;var src = myNode.src
元素节点[属性名]; var src = myNode["src"]
元素节点.getAttribute("属性名称"); myNode.getAttribute("src")
设置节点的属性值
myNode.src = "images/2.jpg" //修改src的属性值
myNode.className = "image2-box"; //修改class的name
元素节点.setAttribute("属性名", "新的属性值"); myNode.setAttribute("src","images/3.jpg");
xxx.addEventlistener(onclick,function(){
}) 队列 可以重复监听
优于
xxx.onclick = function (){
} 它会覆盖之前的代码
DOM节点类型
文本节点 3 元素节点 1 属性节点 2 注释8 document——9 DocumentFragment——11
通过nodeType属性来查看这个节点的类型
事件捕获和冒泡
两个概念都是为了解决页面中事件流（事件发生顺序）的问题。如果触发的事件既有捕获又有冒泡，那么 按照程序代码写的顺序执行。
冒泡
事件冒泡(event bubbling) 事件会从最内层的元素开始发生，一直向上传播，直到document对象。
捕获
事件捕获(event capturing)。与事件冒泡相反，事件会从最外层开始发生，直到最具体的元素。
一些问题
浏览器事件有哪些过程? 为什么一般在冒泡阶段, 而不是在捕获阶段注册监听?
addEventListener 参数分别是什么 ?
target.addEventListener(type, listener, options);//MDN element.addEventListener(event, function, useCapture) //Runoob
- type:字符串，指定事件名。 注意: 不要使用 "on" 前缀。 例如，使用 "click" ,而不是使用 "onclick"。
- function:指定要事件触发时执行的函数。 当事件对象会作为第一个参数传入函数。 事件对象的类型取决于特定的事件。例如， "click" 事件属于 MouseEvent(鼠标事件) 对象。
- useCapture:可选。第三个参数 布尔值，指定事件是否在捕获或冒泡阶段执行。 可能值: true - 事件句柄在捕获阶段执行 false- false- 默认。事件句柄在冒泡阶段执行
阻止冒泡和默认事件
1，e.stopPropagation()
2，e.preventDefault()，
3，return false
document.getElementById("myBtn").addEventListener("click", function(){
document.getElementById("demo").innerHTML = "Hello World";
});
使用 removeEventListener() 方法来移除 addEventListener() 方法添加的事件句柄。
.怎样添加、移除、移动、复制、创建和查找节点？
1）创建新节点 createDocumentFragment() //创建一个DOM片段 createElement() //创建一个具体的元素 createTextNode() //创建一个文本节点 2）添加、移除、替换、插入 appendChild() //添加 removeChild() //移除 replaceChild() //替换 insertBefore() //插入 3）查找 getElementsByTagName() //通过标签名称 getElementsByName() //通过元素的Name属性的值 getElementById() //通过元素Id，唯一性
事件委托（event delegation）。
事件委托是将事件监听器添加到父元素。当触发子元素时，事件会冒泡到父元素，监听器就会触发。这种技术的好处是：
内存占用减少，因为只需要一个父元素的事件处理程序，而不必为每个后代都添加事件处理程序。 无需从已删除的元素中解绑处理程序，也无需将处理程序绑定到新元素上。
参考文章：
