事件冒泡及事件委托的理解（JQuery Dom操作）

最新推荐文章于 2024-08-11 18:40:36 发布

weixin_34085658

最新推荐文章于 2024-08-11 18:40:36 发布

阅读量104

点赞数

文章标签： javascript ViewUI

原文链接：http://www.cnblogs.com/lzc978/p/10113066.html

版权

事件冒泡及事件委托的理解（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 })

posted on 2018-12-13 14:52 **勇敢的心阅读( ...) 评论( ...) 编辑收藏

转载于:https://www.cnblogs.com/lzc978/p/10113066.html

weixin_34085658

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
事件冒泡及事件委托的理解（JQuery Dom操作）

事件冒泡及事件委托的理解（JQuery Dom操作） jQuery事件冒泡： click mouseenter 等事件没有绑定也会触发，只是触发后没有任何结果子元素触发事件后，会把触发事件传递给父元素，那么父元素也会被触发。不管有没有绑定事件，都会触发事件，只是没有结果，事件冒泡传递还是会发生系统自动产生的event事件对象 fun...
复制链接

扫一扫