1 <!-- 事件触发前后执行其他操作的三种方式： 2 多适用于：公众号的订阅，有订阅的可以收到文章，没有订阅的收不到文章。 3 --> 4 <!DOCTYPE html> 5 <html lang="en"> 6 <head> 7 <meta charset="UTF-8"> 8 <title>动画</title> 9 <link rel="stylesheet" href="css/base.css"> 10 <style> 11 .container { 12 width: 400px; 13 margin: 0 auto; 14 background: #f0f; 15 } 16 button { 17 width: 50%; 18 height: 30px; 19 text-align: center; 20 float: left; 21 } 22 .box { 23 width: 100%; 24 height: 400px; 25 } 26 </style> 27 </head> 28 <body> 29 <div class="container"> 30 <button class="show">显示</button> 31 <button class="hide">隐藏</button> 32 <div class="box"></div> 33 </div> 34 <script src="js/jquery.js"></script> 35 36 <!-- 第一种方式：直接在JS事件触发前后 直接进行操作 --> 37 <!-- <script> 38 //静悄悄的显示 39 var silent = { 40 show:function($ele,showCallback,shownCallback){ 41 // $ele.html("<p>我在显示之前已经显示了</p>"); 42 if (typeof showCallback === 'function') showCallback(); 43 $ele.show(); 44 if (typeof shownCallback === 'function') shownCallback(); 45 // setTimeout(function(){ 46 // $ele.html($ele.text() + "<p>我在box显示之后显示</p>") 47 // },1000) 48 }, 49 hide:function($ele){ 50 $ele.hide(); 51 } 52 }; 53 54 var $box = $('.box'); 55 var $show = $('.show'); 56 var $hide = $('.hide'); 57 //单击显示$box 58 $show.on('click',function(){ 59 silent.show($box,function(){ 60 $box.html("<p>我在显示之前已经显示了</p>"); 61 },function(){ 62 setTimeout(function(){ 63 $box.html($box.text() + "<p>我在box显示之后显示</p>") 64 },1000) 65 }); 66 67 // silent.show($box); 68 }) 69 //单击显示$box 70 $hide.on('click',function(){ 71 silent.hide($box); 72 }) 73 </script> --> 74 75 <!-- 第二种方式：事件触发前后的操作，封装成两个函数，分别放于事件触发前后 --> 76 <!-- <script> 77 //静悄悄的显示 78 var silent = { 79 show:function($ele){ 80 $ele.html("<p>我在显示之前已经显示了</p>"); 81 $ele.show(); 82 setTimeout(function(){ 83 $ele.html($ele.html() + "<p>我在box显示之后显示</p>"); 84 },1000); 85 86 }, 87 hide:function($ele){ 88 $ele.hide(); 89 } 90 }; 91 92 var $box = $('.box'); 93 var $show = $('.show'); 94 var $hide = $('.hide'); 95 //单击显示$box 96 $show.on('click',function(){ 97 silent.show($box); 98 }) 99 //单击显示$box 100 $hide.on('click',function(){ 101 silent.hide($box); 102 }) 103 </script> --> 104 </body> 105 </html> 106 <!-- 第三种方式：事件触发前后的操作，使用trigger触发已经封装好的函数 --> 107 =================== 108 <!DOCTYPE html> 109 <html lang="en"> 110 <head> 111 <meta charset="UTF-8"> 112 <title>动画</title> 113 <!-- 一定要引入jQuery.js文件，否则无法运行 --> 114 <link rel="stylesheet" href="css/base.css"> 115 <style> 116 .container { 117 width: 400px; 118 margin: 0 auto; 119 background: #f0f; 120 } 121 button { 122 width: 50%; 123 height: 30px; 124 text-align: center; 125 float: left; 126 } 127 .box { 128 width: 100%; 129 height: 400px; 130 } 131 </style> 132 </head> 133 <body> 134 <div class="container"> 135 <button class="show">显示</button> 136 <button class="hide">隐藏</button> 137 <div class="box"></div> 138 </div> 139 <script src="js/jquery.js"></script> 140 <script> 141 //静悄悄的显示 142 var silent = { 143 show:function($ele){ 144 //$ele显示之前触发$ele的show事件，所以要在外面给对象$ele绑定show事件 145 $ele.trigger('show'); 146 $ele.show(); 147 //$ele显示之后触发$ele的shown事件，所以要在外面给对象$ele绑定shown事件 148 $ele.trigger('shown'); 149 }, 150 hide:function($ele){ 151 //$ele隐藏之后触发$ele的hide事件，所以要在外面给对象$ele绑定hide事件 152 $ele.trigger('hide'); 153 $ele.hide(); 154 //$ele隐藏之后触发$ele的hiden事件，所以要在外面给对象$ele绑定hiden事件 155 $ele.trigger('hiden'); 156 } 157 }; 158 var $box = $('.box'); 159 var $show = $('.show'); 160 var $hide = $('.hide'); 161 //单击显示按钮 显示$box 162 $show.on('click',function(){ 163 silent.show($box); 164 }) 165 //单击隐藏按钮 隐藏$box 166 $hide.on('click',function(){ 167 silent.hide($box); 168 }) 169 170 //这里只是进行对象事件的绑定而已。绑定了四个事件，可以使用 e.type 进行判断具体执行哪个事件，从而执行相应的操作。 171 //该函数可以定义多次，执行其他操作。这是第一次定义：改变对象的html内容 172 //该函数定义多次，就执行多次，如console.log(e.type)就输出多次。 173 $box.on('show shown hide hiden',function(e){ 174 //两个都是$box对象，这里只能使用$box，为什么不能使用$(this)呢？ 175 console.log( $(this)); 176 console.log( $box); 177 178 //每次触发事件时，判断其类型，指定对应类型的代码 179 if (e.type === 'show') { 180 $box.html('我在显示之前已经显示了'); 181 }else if (e.type === 'shown') { 182 setTimeout(function(){ 183 $box.html($box.html() + "<p>我在显示之后再显示</p>") 184 },1000); 185 } 186 }) 187 188 //这里只是进行对象事件的绑定而已。绑定了四个事件，可以使用 e.type 进行判断具体执行哪个事件，从而执行相应的操作。 189 //该函数可以定义多次，执行其他操作。这是第二次定义：改变对象的背景颜色 190 //该函数定义多次，就执行多次，如console.log(e.type)就输出多次。 191 $box.on('show shown hide hiden',function(e){ 192 console.log(e.type); 193 //两个都是$box对象，这里只能使用$box，为什么不能使用$(this)呢？ 194 console.log( $(this)); 195 console.log( $box); 196 197 //每次触发事件时，判断其类型，指定对应类型的代码 198 if (e.type === 'show') { 199 $box.css({background:'#f0f'}); 200 }else if (e.type === 'shown') { 201 setTimeout(function(){ 202 $box.css({background:'#00f'}); 203 },2000); 204 }else if (e.type === 'hide') { 205 alert('在隐藏$box之前，跳出一个提示框'); 206 }else if (e.type === 'hiden') { 207 setTimeout(function(){ 208 var p = document.createElement('div'); 209 var textNode = document.createTextNode('这是隐藏$box，1秒后显示的内容'); 210 p.appendChild(textNode); 211 document.getElementsByTagName('body')[0].appendChild(p); 212 },1000); 213 } 214 }) 215 </script> 216 </body> 217 </html>