浏览器事件
事件是编程时系统内发生的动作或者发生的事情，系统响应事件之后，如果需要，可以某种方式对事件作出回应
每个可用的事件都有一个事件触发时会运行的代码块，也就是时间处理器或者事件监听器。
添加事件的方式：
- 使用onXxx等事件处理器属性,相同元素上多次定义相同属性的事件，后者会覆盖前者
- 行内事件处理器（不推荐使用）
- addEventListener() 和 removeEventListener()，相同元素上多次定义相同属性的事件，触发时都会执行
事件对象：
在事件处理函数内部，会有一个参数，以提供额外的功能和信息
事件冒泡及捕获：
当一个事件发生在具有父元素的元素上，现代浏览器运行两个不同的阶段--捕获和冒泡
捕获：
- 浏览器检查元素的最外层
<html>是否在捕获阶段中注册了一个onclick事件处理程序，如果是，则运行它 - 然后移动到
<html>中单击元素的下一个祖先元素，并执行相同的操作，然后是再下一个祖先元素，依次类推，直到到达实际点击的元素
冒泡：
- 浏览器检查实际点击的元素是否在冒泡阶段注册了一个
onclick事件处理程序，如果是，则运行它 - 然后移动到下一个直接的祖先元素，并做同样的事情。。。直到它到达
<html>元素
事件委托：
事件冒泡为浏览器中的事件委托提供了基础，我们可以将事件处理程序绑定到父节点上，只要事件发生在任何子节点（包括它们的任何子节点）上，就会执行该处理程序
网上有个🌰：
<ul id="parent-list">
<li id="post-1">Item 1</li>
<li id="post-2">Item 2</li>
<li id="post-3">Item 3</li>
<li id="post-4">Item 4</li>
<li id="post-5">Item 5</li>
<li id="post-6">Item 6</li>
</ul>
document.getElementById("parent-list").addEventListener("click", function(e) {
// e.target is the clicked element!
// If it was a list item
if(e.target && e.target.nodeName == "LI") {
// List item found! Output the ID!
console.log("List item ", e.target.id.replace("post-"), " was clicked!");
}
});
这样其实就有个好处，当li增加或者删除的时候，我们并不需要在新增的li上面重新添加事件，这样方便很多
