jQuery事件冒泡：
click mouseenter 等事件没有绑定 也会触发，只是触发后没有任何结果
子元素触发事件后，会把触发事件传递给父元素，那么父元素也会被触发。
不管有没有绑定事件，都会触发事件，只是没有结果，事件冒泡传递还是会发生
系统自动产生的event事件对象
function传的第一个参数就是event事件对象
1 event.stopPropagation(); // 阻止事件冒泡2 event.preventDefault() // 阻止默认行为 比如submit阻止表单提交3 4 // 上面两个阻止 可以合并写成5 return false;
事件委托：
事件委托就是利用冒泡的原理，把事件加到父级上，通过判断事件来源的子集，执行相应的操作，事件委托首先可以极大减少事件绑定次数，提高性能；其次可以让新加入的子元素也可以拥有相同的操作。
基本实现：
1 $(function(){ 2 ????var $li = $(‘.list li‘); 3 ????var $list = $(‘.list‘); 4 ?5 ????// 多次绑定，性能堪忧 6 ????// $li.click(function(){ 7 ????// ????$(this).css({‘background‘:‘red‘}); 8 ????// }) 9 ????10 ????// 事件委托方式 delegate(发生事件的元素, 事件属性, 匿名函数)11 ????$list.delegate(‘li‘,‘click‘,function(){12 ????????$(this).css({‘background‘:‘red‘});13 ????})14 15 })上述代码不能很好的体现事件委托的优势，下面引入Dom操作 综合体现事件委托的优势。
Dom操作：
Dom操作也叫做元素节点操作，它指的是改变html的标签结构，它有两种情况：
1、移动现有标签的位置
2、将新创建的标签插入到现有的标签中
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 ????<meta charset="UTF-8"> 5 ????<meta name="viewport" content="width=device-width, initial-scale=1.0"> 6 ????<meta http-equiv="X-UA-Compatible" content="ie=edge"> 7 ????<title>Document</title> 8 ????<script src="js/jquery-1.12.4.min.js"></script> 9 ????<script>10 ????????$(function(){11 ????????????var $div01 = $(‘#div01‘);12 ????????????var $p01 = $(‘#p01‘);13 ????????????var $h01 = $(‘#h01‘);14 ????????????var $p02 = $(‘#p02‘);15 ???????????16 ????????????// 当前元素里面的后面要放另外一个元素17 ????????????// $div01.append($p01);18 19 ????????????// 当前元素要放到另外一个元素的里面的后面20 ????????????$p01.appendTo($div01);21 22 ????????????// 当前元素里面的前面要放另外一个元素23 ????????????// $div01.prepend($h01);24 25 ????????????// 当前元素要放到另外一个元素里面的前面26 ????????????$h01.prependTo($div01);27 28 29 ????????????// 当前元素外面的后面要放另外一个元素30 ????????????// $div01.after($p02);31 32 ????????????// 当前元素要放到另外一个元素的外面的后面33 ????????????$p02.insertAfter($div01);34 35 ????????????// 创建一个空div标签36 ????????????var $newdiv01 = $(‘<div>‘);37 38 ????????????// 创建一个有内容的div标签39 ????????????var $newdiv02 = $(‘<div>新创建的第二个div</div>‘);40 41 42 ????????????// 当前元素外面的前面要放另外一个元素43 ????????????$div01.before( $newdiv01 );44 45 ????????????// 当前元素要放到另外一个元素的外面的前面46 ????????????$newdiv02.insertBefore($div01);47 48 ????????????// 删除标签49 ????????????$newdiv01.remove();50 51 ????????????$p01.remove();52 53 ????????})54 ????55 ????56 ????</script>57 </head>58 <body>59 ????<p id="p01">这是div01外面的p标签</p>60 ????<h2 id="h01">这是div01外面的h2标题</h2>61 ????<p id="p02">这是div01外面的第二个p标签</p>62 ????<div id="div01">63 ????????<h3>这是div01里面的h3</h3>64 ????????<p>这是div01里面的p标签</p> ?????65 ????</div>66 </body>67 </html>下面这个例子能体现事件委托的优势
1 $(function(){ 2 ????var $txt = $(‘#txt1‘); 3 ????var $btn = $(‘#btn1‘); 4 ????var $list = $(‘#list‘); 5 ?6 ????// 增加计划 7 ????$btn.click(function(){ 8 ????????var sVal = $txt.val(); 9 10 ????????// 清空输入框11 ????????$txt.val(‘‘);12 13 ????????// 判断输入框是否为空14 ????????if(sVal==‘‘){15 ????????????alert(‘请输入内容！‘);16 ????????????return;17 ????????}18 ????????19 ????????// 创建一个包含计划内容的li标签20 ????????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>‘);21 ????????$li.appendTo($list);22 23 ????????/*24 ????????var $del = $li.find(‘.del‘);25 ????????$del.click(function(){26 ????????????$(this).parent().remove();27 ????????});28 ????????*/29 ????})30 31 32 ????// 删除功能：33 ????/*34 ????var $del = $(‘.del‘); ???????????35 ????$del.click(function(){36 ????????$(this).parent().remove();37 ????})38 ????*/39 40 ????// 事件委托 41 ????$list.delegate(‘a‘,‘click‘,function(){42 ????????if($(this).hasClass(‘del‘)){43 ????????????$(this).parent().remove();44 ????????}else if($(this).hasClass(‘up‘)){45 ????????????if($(this).parent().prev().length==0){46 ????????????????alert(‘到顶了已经‘);47 ????????????????return false;48 ????????????}49 ????????????$(this).parent().insertBefore($(this).parent().prev());50 ????????}else{51 ????????????if($(this).parent().next().length==0){52 ????????????????alert(‘到底了已经‘);53 ????????????????return false;54 ????????????}55 ????????????$(this).parent().insertAfter($(this).parent().next());56 ????????}57 ????})58 })事件冒泡及事件委托的理解（JQuery Dom操作）
原文地址：https://www.cnblogs.com/lzc978/p/10113066.html