事件
HTML中与javascript交互是通过事件驱动来实现的，例如鼠标点击事件、页面的滚动事件onscroll等等，
可以向文档或者文档中的元素添加事件侦听器来预订事件。想要知道这些事件是在什么时候进行调用的，就需要了解一下“事件流”的概念。
事件流描述的是从页面中接收事件的顺序
DOM事件流
“DOM2级事件”规定的事件流包括三个阶段：
① 事件捕获阶段；
② 处于目标阶段；
③ 事件冒泡阶段
addEventListener 是DOM2 级事件新增的指定事件处理程序的操作，这个方法接收3个参数：要处理的事件名、作为事件处理程序的函数和一个布尔值。最后这个布尔值参数如果是true，表示在捕获阶段调用事件处理程序；如果是false，表示在冒泡阶段调用事件处理程序。
2、document、documentElement和document.body三者之间的关系：
document代表的是整个html页面；
document.documentElement代表的是<html>标签；
document.body代表的是<body>标签；
事件冒泡
什么是事件冒泡
在一个对象上触发某类事件（比如单击onclick事件），如果此对象定义了此事件的处理程序，那么此事件就会调用这个处理程序，如果没有定义此事件处理程序或者事件返回true，那么这个事件会向这个对象的父级对象传播，从里到外，直至它被处理（父级对象所有同类事件都将被激活），或者它到达了对象层次的最顶层，即document对象（有些浏览器是window）。
事件冒泡的作用
事件冒泡允许多个操作被集中处理（把事件处理器添加到一个父级元素上，避免把事件处理器添加到多个子级元素上），它还可以让你在对象层的不同级别捕获事件。
阻止事件冒泡
事件冒泡机制有时候是不需要的，需要阻止掉，通过 event.stopPropagation() 来阻止
阻止默认行为
//阻止表单提交 $('#form1').submit(function(event){ event.preventDefault(); })
合并阻止操作
//实际开发中，一般把阻止冒泡和阻止默认行为合并起来写，合并写法可以用 // event.stopPropagation(); // event.preventDefault(); // 合并写法： return false;
demo
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
.father{
300px;
height: 300px;
background-color: red;
}
</style>
</head>
<body>
<div class="father">
<button>按钮</button>
<a href="http://www.baidu.com">百度一下</a>
</div>
<script type="text/javascript" src="js/jquery-3.3.1.js"></script>
<script type="text/javascript">
$(function(){
// 给按钮绑定事件
// 在所有的事件回调函数中 都会有默认的事件对象
$('.father button').click(function(event){
// 原生js的事件对象
console.log(event);
alert($(this).text());
// 阻止事件冒泡
//event.stopPropagation();
});
$('a').click(function(e){
// e.preventDefault();
// e.stopPropagation();
alert('a被点击了');
//return false;
});
$('.father').click(function(event){
alert('父亲被点击了');
// event.stopPropagation();
console.log('哈哈哈哈哈');
// 既阻止了默认事件 又阻止了冒泡
//return false;
});
$('body').click(function(){
alert('body被点击了');
})
});
</script>
</body>
</html>
事件委托
定义：
事件委托就是利用冒泡的原理，把事件加到父级上，通过判断事件来源的子集，执行相应的操作。
作用：
事件委托首先可以极大减少事件绑定次数，提高性能；
其次可以让新加入的子元素也可以拥有相同的操作。
1、一般绑定事件的写法：
2、事件委托的写法：（实际开发中，如果是对大量子元素进行操作时，应该用事件委托的方式，提高性能）
demo
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<ul>
<li>xx</li>
<li class="item">yy</li>
</ul>
<button>添加</button>
<script type="text/javascript" src="js/jquery-3.3.1.js" ></script>
<script type="text/javascript">
$(function(){
/*
$('ul>li').click(function(){
alert($(this).text());
});
*/
// 事件委托 （看时机 如果是未来追加的元素 建议使用 事件委托来绑定事件）
// 原理： 利用冒泡的原理，把事件加到父级上，触发执行效果。
//如果接收到了click事件触发通知，并且这个click事件是由我们这些li元素其中之一触发的，
//就执行祖辈元素上委托绑定的事件处理函数。。
$('ul').on('click','li',function(e){
//on()支持直接在目标元素上绑定事件，也支持在目标元素的祖辈元素上委托绑定。在事件委托绑定模式下，
//即使是执行on()函数之后新添加的元素，只要它符合条件，绑定的事件处理函数也对其有效
alert($(this).text());
});
// 未来 动态的 往ul中追加了li标签
// 未来追加的li标签 自己完成不了click事件，那么这个时候考虑“事件委托(代理)”
$('button').click(function(event) {
$('ul').append('<li>zz</li>')
});
});
</script>
</body>
</html>