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>