jQuery事件冒泡：
click mouseenter 等事件没有绑定 也会触发，只是触发后没有任何结果
子元素触发事件后，会把触发事件传递给父元素，那么父元素也会被触发。
不管有没有绑定事件，都会触发事件，只是没有结果，事件冒泡传递还是会发生
系统自动产生的event事件对象
function传的第一个参数就是event事件对象
event.stopPropagation(); // 阻止事件冒泡
event.preventDefault() // 阻止默认行为 比如submit阻止表单提交 // 上面两个阻止 可以合并写成
return false;
事件委托：
事件委托就是利用冒泡的原理，把事件加到父级上，通过判断事件来源的子集，执行相应的操作，事件委托首先可以极大减少事件绑定次数，提高性能；其次可以让新加入的子元素也可以拥有相同的操作。
基本实现：
$(function(){
var $li = $('.list li');
var $list = $('.list');
// 多次绑定，性能堪忧
// $li.click(function(){
// $(this).css({'background':'red'});
// })
// 事件委托方式 delegate(发生事件的元素, 事件属性, 匿名函数)
$list.delegate('li','click',function(){
$(this).css({'background':'red'});
})
})
上述代码不能很好的体现事件委托的优势，下面引入Dom操作 综合体现事件委托的优势。
Dom操作：
Dom操作也叫做元素节点操作，它指的是改变html的标签结构，它有两种情况：
1、移动现有标签的位置
2、将新创建的标签插入到现有的标签中
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<script src="js/jquery-1.12.4.min.js"></script>
<script>
$(function(){
var $div01 = $('#div01');
var $p01 = $('#p01');
var $h01 = $('#h01');
var $p02 = $('#p02'); // 当前元素里面的后面要放另外一个元素
// $div01.append($p01); // 当前元素要放到另外一个元素的里面的后面
$p01.appendTo($div01); // 当前元素里面的前面要放另外一个元素
// $div01.prepend($h01); // 当前元素要放到另外一个元素里面的前面
$h01.prependTo($div01); // 当前元素外面的后面要放另外一个元素
// $div01.after($p02); // 当前元素要放到另外一个元素的外面的后面
$p02.insertAfter($div01); // 创建一个空div标签
var $newdiv01 = $('<div>'); // 创建一个有内容的div标签
var $newdiv02 = $('<div>新创建的第二个div</div>'); // 当前元素外面的前面要放另外一个元素
$div01.before( $newdiv01 ); // 当前元素要放到另外一个元素的外面的前面
$newdiv02.insertBefore($div01); // 删除标签
$newdiv01.remove(); $p01.remove(); }) </script>
</head>
<body>
<p id="p01">这是div01外面的p标签</p>
<h2 id="h01">这是div01外面的h2标题</h2>
<p id="p02">这是div01外面的第二个p标签</p>
<div id="div01">
<h3>这是div01里面的h3</h3>
<p>这是div01里面的p标签</p>
</div>
</body>
</html>
下面这个例子能体现事件委托的优势
$(function(){
var $txt = $('#txt1');
var $btn = $('#btn1');
var $list = $('#list');
// 增加计划
$btn.click(function(){
var sVal = $txt.val();
// 清空输入框
$txt.val('');
// 判断输入框是否为空
if(sVal==''){
alert('请输入内容！');
return;
}
// 创建一个包含计划内容的li标签
var $li = $('<li><span>'+ sVal +'</span><a href="javascript:;" class="up"> ↑ </a><a href="javascript:;" class="down"> ↓ </a><a href="javascript:;" class="del">删除</a></li>');
$li.appendTo($list);
/*
var $del = $li.find('.del');
$del.click(function(){
$(this).parent().remove();
});
*/
})
// 删除功能：
/*
var $del = $('.del');
$del.click(function(){
$(this).parent().remove();
})
*/
// 事件委托
$list.delegate('a','click',function(){
if($(this).hasClass('del')){
$(this).parent().remove();
}else if($(this).hasClass('up')){
if($(this).parent().prev().length==0){
alert('到顶了已经');
return false;
}
$(this).parent().insertBefore($(this).parent().prev());
}else{
if($(this).parent().next().length==0){
alert('到底了已经');
return false;
}
$(this).parent().insertAfter($(this).parent().next());
}
})
})