事件冒泡及事件委托的理解（JQuery Dom操作）
Posted 勇敢的心
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了事件冒泡及事件委托的理解（JQuery Dom操作）相关的知识，希望对你有一定的参考价值。
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操作）的主要内容，如果未能解决你的问题，请参考以下文章