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 })
原文地址：https://www.cnblogs.com/lzc978/p/10113066.html
时间： 2024-10-14 08:25:09