事件冒泡事件委托jQuery元素节点操作滚轮事件与函数节流
Posted 小君君的博客
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了事件冒泡事件委托jQuery元素节点操作滚轮事件与函数节流相关的知识，希望对你有一定的参考价值。
一、事件冒泡定义
事件冒泡是指在一个对象触发某类事件（比如单击onclick事件），如果此对象定义了此事件的处理程序，那么此事件就会调用这个处理程序，如果没有定义此事件处理程序或者事件返回true，那么这个事件会向这个对象的父级对象传播，从里到外，甚至它被处理（父级对象所有同类事件都将被激活），或者它到达了对象层级的最顶层，即document对象（有些浏览器是window）.。
二、事件冒泡的作用
事件冒泡允许多个操作被集中处理（把事件处理器添加到一个父级元素上，避免把事件处理器添加到多个子级元素上），它还可以让你在对象层的不同级别捕获事件。
三、阻止事件冒泡
事件冒泡机制有时候是不需要的，需要阻止掉，通过event.stopPropagation（）来阻止
四、阻止默认行为
如：阻止右键菜单
五、合并阻止操作
实际开发中，一般把阻止冒泡和阻止默认行为合并起来写，合并写法如下：
六、事件委托
事件委托就是利用冒泡的原理，把事件加到父级上，通过判断事件来源的子集，执行相应的操作，事件委托首先可以极大减少事件绑定次数，提高性能；其次可以让新加入的子元素也可以拥有相同的操作。
1、一般绑定事件的写法：
2、事件委托的写法：（实际开发中，如果是对大量子元素进行操作时，应该用事件委托的方式，提高性能）
七、取消事件委托
用法：$("委托对象").undelegate()
八、jQuery元素节点操作
1、创建节点
2、插入节点
a、append()和appendTo() 在现存元素的内部，从后面插入元素
输出结果为：
b、prepend()和prependTo() 在现存元素的内部，从前面插入元素
输出结果：
c、after()和insertAfter() 在现存元素的外部，从后面插入元素
输出结果：
d、before()和insertBefore() 在现存元素的外部，从前面插入元素
输出结果：
3、删除节点
$(selector).remove();
4、to do list（计划列表）实例
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <link rel="stylesheet" href="../css/reset.css"> 6 <style> 7 .con{ 8 width:360px; 9 margin:30px auto; 10 } 11 .con > h3{ 12 margin-bottom:15px; 13 } 14 .con input{ 15 width:290px; 16 height:30px; 17 } 18 .con button{ 19 width:60px; 20 height:34px; 21 border:0; 22 } 23 .con ul li{ 24 display: flex; 25 margin-top:15px; 26 border-bottom:1px solid #ccc; 27 justify-content: space-between; 28 } 29 .con li p{ 30 /*清除a元素之间的间隙*/ 31 font-size:0; 32 } 33 .con li p a{ 34 color:#1b5fdd; 35 font-size:16px; 36 margin-left:10px; 37 } 38 /*弹框样式*/ 39 .pop_con{ 40 position:fixed; 41 top:0; 42 right:0; 43 bottom:0; 44 left:0; 45 background:#000; 46 display: none; 47 } 48 .pop{ 49 width:400px; 50 height:220px; 51 position:absolute; 52 left:50%; 53 margin-left:-200px; 54 top:50%; 55 margin-top:-150px; 56 background:#fff; 57 } 58 .pop .pop_title{ 59 padding:15px; 60 display: flex; 61 justify-content: space-between; 62 } 63 .pop .pop_title a{ 64 width:36px; 65 height:36px; 66 line-height:36px; 67 border-radius:50%; 68 background:#c7254e; 69 color:#fff; 70 text-align: center; 71 position:absolute; 72 top:-18px; 73 right:-18px; 74 transition: all 1s ease; 75 } 76 .pop_title h3{ 77 letter-spacing: 2px; 78 font-weight: normal; 79 } 80 .pop_title a:hover{ 81 transform: rotate(360deg); 82 } 83 .pop_message{ 84 height:110px; 85 line-height:110px; 86 text-align: center; 87 } 88 .pop_confirm{ 89 height:36px; 90 text-align: center; 91 } 92 .pop_confirm button{ 93 height:36px; 94 line-height: 36px; 95 padding:0 15px; 96 background: #c7254e; 97 border:none; 98 color:#fff; 99 outline: none; 100 } 101 </style> 102 <script src="../js/jquery-1.12.4.min.js"></script> 103 <script> 104 $(function(){ 105 //声明变量 106 var $input = $("#input"); 107 $(".pop").click(function(){ 108 return false; 109 }); 110 $(".pop_confirm").click(function(){ 111 $(".pop_con").fadeOut(); 112 }); 113 $(".close").click(function(){ 114 $(".pop_con").fadeOut(); 115 }); 116 $(".pop_con").click(function(){ 117 $(this).fadeOut(); 118 }); 119 //点击增加按钮，新增元素 120 $("#add").click(function(){ 121 var $inputVal = $input.val(); 122 //如果输入值为空，出现弹框提示 123 if($inputVal == ""){ 124 $(".pop_con").fadeIn(); 125 return false 126 } 127 $input.val(""); 128 var $li = $("<li><h3>"+$inputVal+"</h3><p><a class=\'delete\' href=\'javascript:void(0);\'>删除</a><a class=\'prev\' href=\'javascript:void(0);\'>上移</a><a class=\'next\' href=\'javascript:void(0);\'>下移</a></p></li>"); 129 $("ul").append($li); 130 }); 131 //使用事件委托写在一起，提高性能 132 $("ul").delegate("li a","click",function(){ 133 //首先判断点击的是哪个a 134 if($(this).attr("class") == "prev"){ 135 //判断是否存在该元素 136 if($(this).closest("li").prev().length ==0){ 137 $(".pop_message").html("已到顶部!"); 138 $(".pop_con").fadeIn(); 139 return false 140 } 141 $(this).closest("li").prev().before($(this).closest("li")); 142 }else if($(this).attr("class") == "next"){ 143 if($(this).closest("li").next().length ==0){ 144 $(".pop_messag以上是关于事件冒泡事件委托jQuery元素节点操作滚轮事件与函数节流的主要内容，如果未能解决你的问题，请参考以下文章