jQuery基礎–事件處理
- 2019 年 10 月 10 日
- 筆記
2. jQuery事件機制
JavaScript中已經學習過了事件，但是jQuery對JavaScript事件進行了封裝，增加並擴展了事件處理機制。jQuery不僅提供了更加優雅的事件處理語法，而且極大的增強了事件的處理能力。
2.1. jQuery事件發展歷程(了解)
簡單事件綁定>>bind事件綁定>>delegate事件綁定>>on事件綁定(推薦)
簡單事件註冊 click(handler) 單擊事件 mouseenter(handler) 鼠標進入事件 mouseleave(handler) 鼠標離開事件 缺點：不能同時註冊多個事件 bind方式註冊事件
//第一個參數：事件類型 //第二個參數：事件處理程序 $("p").bind("click mouseenter", function(){ //事件響應方法 });
缺點：不支持動態事件綁定
<!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8"> <title>Title</title> <style> #box { width: 500px; height: 500px; background-color: pink; } </style> </head> <body> <!--點擊按鈕，在div裏面創建一個新的p元素--> <input type="button" value="按鈕" id="btn"> <div id="box"> <div> <span>呵呵</span> <p>11111</p> <p>22222</p> <p>33333</p> <p>44444</p> </div> </div> <script src="jquery-1.12.4.js"></script> <script> //$("div").children("p").click(function(){}) $(function () { // //bind方式 // $("p").bind({ // click:function () { // alert("呵呵") // }, // mouseenter:function () { // alert("哈哈") // } // }); $("#btn").click(function () { $("<p>我是新增加的p元素</p>").appendTo("div"); }); //簡單事件，給自己註冊的事件 // $("div").click(function () { // alert("哈哈"); // }); //delegate:代理，委託 //1. 給父元素註冊委託事件，最終還是有子元素來執行。 //要給div註冊一個委託事件,但是最終不是由執行，而是有p執行 //第一個參數：selector:事件最終由誰來執行。 //第二個參數：事件的類型 //第三個參數：函數，要做什麼 //1. 動態創建的也能有事件 :缺點：只能註冊委託事件 $("#box").delegate("p", "click", function () { //alert("呵呵"); console.log(this); }); //註冊簡單事件，缺點：一次只能註冊一個事件 // $("p").click(function () { // alert("呵呵"); // }); }); </script> </body> </html>
delegate註冊委託事件
// 第一個參數：selector，要綁定事件的元素 // 第二個參數：事件類型 // 第三個參數：事件處理函數 $(".parentBox").delegate("p", "click", function(){ //為 .parentBox下面的所有的p標籤綁定事件 });
缺點：只能註冊委託事件，因此註冊時間需要記得方法太多了
on註冊事件
2.2. on註冊事件(重點)
jQuery1.7之後，jQuery用on統一了所有事件的處理方法。 最現代的方式，兼容zepto(移動端類似jQuery的一個庫)，強烈建議使用。
on註冊簡單事件
// 表示給$(selector)綁定事件，並且由自己觸發，不支持動態綁定。 $(selector).on( "click", function() {});
on註冊委託事件
// 表示給$(selector)綁定代理事件，當必須是它的內部元素span才能觸發這個事件，支持動態綁定 $(selector).on( "click",「span」, function() {});
on註冊事件的語法：
// 第一個參數：events，綁定事件的名稱可以是由空格分隔的多個事件（標準事件或者自定義事件） // 第二個參數：selector, 執行事件的後代元素（可選），如果沒有後代元素，那麼事件將有自己執行。 // 第三個參數：data，傳遞給處理函數的數據，事件觸發的時候通過event.data來使用（不常使用） // 第四個參數：handler，事件處理函數 $(selector).on(events[,selector][,data],handler);
<!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <input type="button" value="增加" id="btn"> <div> <p>111111</p> <p>111111</p> <p>111111</p> <p>111111</p> </div> <script src="jquery-1.12.4.js"></script> <script> $(function () { // 這個是p自己註冊的事件（簡單事件） /*$("p").on("click", function () { alert("呵呵"); });*/ $("div").on("click", "p", function () { alert("呵呵") }); $("#btn").on("click", function () { $("<p>我是新建的p元素</p>").appendTo("div"); }); }); </script> </body> </html>
<!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8"> <title>Title</title> <style> div { height: 500px; width: 500px; background-color: pink; } </style> </head> <body> <input type="button" value="增加" id="btn"> <div> <p>111111</p> <p>111111</p> <p>111111</p> <p>111111</p> </div> <script src="jquery-1.12.4.js"></script> <script> $(function () { // 這個是p自己註冊的事件（簡單事件） $("p").on("click", function () { alert("呵呵噠"); }); //給div自己執行的 $("div").on("click", function () { alert("嗚嗚嗚"); }); //給div裏面的p執行 委託事件 $("div").on("click", "p", function () { alert("嘿嘿嘿") }); $("#btn").on("click", function () { $("<p>我是新建的p元素</p>").appendTo("div"); }); }); </script> </body> </html>
<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title></title> <style> * { padding: 0; margin: 0; } .wrap { width: 410px; margin: 100px auto 0; } table { border-collapse: collapse; border-spacing: 0; border: 1px solid #c0c0c0; } th, td { border: 1px solid #d0d0d0; color: #404060; padding: 10px; } th { background-color: #09c; font: bold 16px "΢ÈíÑźÚ"; color: #fff; } td { font: 14px "΢ÈíÑźÚ"; } td a.get { text-decoration: none; } a.del:hover { text-decoration: underline; } tbody tr { background-color: #f0f0f0; } tbody tr:hover { cursor: pointer; background-color: #fafafa; } .btnAdd { width: 110px; height: 30px; font-size: 20px; font-weight: bold; } .form-item { height: 100%; position: relative; padding-left: 100px; padding-right: 20px; margin-bottom: 34px; line-height: 36px; } .form-item > .lb { position: absolute; left: 0; top: 0; display: block; width: 100px; text-align: right; } .form-item > .txt { width: 300px; height: 32px; } .mask { position: absolute; top: 0px; left: 0px; width: 100%; height: 100%; background: #000; opacity: 0.15; display: none; } .form-add { position: fixed; top: 30%; left: 50%; margin-left: -197px; padding-bottom: 20px; background: #fff; display: none; } .form-add-title { background-color: #f7f7f7; border-width: 1px 1px 0 1px; border-bottom: 0; margin-bottom: 15px; position: relative; } .form-add-title span { width: auto; height: 18px; font-size: 16px; font-family: ËÎÌå; font-weight: bold; color: rgb(102, 102, 102); text-indent: 12px; padding: 8px 0px 10px; margin-right: 10px; display: block; overflow: hidden; text-align: left; } .form-add-title div { width: 16px; height: 20px; position: absolute; right: 10px; top: 6px; font-size: 30px; line-height: 16px; cursor: pointer; } .form-submit { text-align: center; } .form-submit input { width: 170px; height: 32px; } </style> </head> <body> <div class="wrap"> <input type="button" value="清空內容" id="btn"> <input type="button" value="添加" id="btnAdd"> <table> <thead> <tr> <th>課程名稱</th> <th>所屬學院</th> <th>操作</th> </tr> </thead> <tbody id="j_tb"> <tr> <!-- <td><input type="checkbox"/></td> --> <td>JavaScript</td> <td>傳智播客-前端與移動開發學院</td> <td><a href="javascrip:;" class="get">DELETE</a></td> </tr> <tr> <!-- <td><input type="checkbox"/></td> --> <td>css</td> <td>傳智播客-前端與移動開發學院</td> <td><a href="javascrip:;" class="get">DELETE</a></td> </tr> <tr> <!-- <td><input type="checkbox"/></td> --> <td>html</td> <td>傳智播客-前端與移動開發學院</td> <td><a href="javascrip:;" class="get">DELETE</a></td> </tr> <tr> <td>jQuery</td> <td>傳智播客-前端與移動開發學院</td> <td><a href="javascrip:;" class="get">DELETE</a></td> </tr> </tbody> </table> </div> <script src="jquery-1.12.4.js"></script> <script> $(function () { //1. 找到清空按鈕，註冊點擊事件，清空tbody $("#btn").on("click", function () { $("#j_tb").empty(); }); //2. 找到delete，註冊點擊事件 // $(".get").on("click", function () { // $(this).parent().parent().remove(); // }); $("#j_tb").on("click", ".get", function () { $(this).parent().parent().remove(); }); //3. 找到添加按鈕,註冊點擊事件 $("#btnAdd").on("click", function () { $('<tr> <td>jQuery111</td> <td>傳智播客-前端與移動開發學院111</td> <td><a href="javascrip:;" class="get">DELETE</a></td> </tr>').appendTo("#j_tb"); }); }); </script> </body> </html>
觸發事件
<!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <input type="button" value="觸發" id="btn"> <p>我是一個p元素</p> <script src="jquery-1.12.4.js"></script> <script> $(function () { $("p").on("click", function () { alert("呵呵"); }) //toggle：切換 trigger：觸發 $("#btn").on("click",function () { //觸發p元素的點擊事件 //$("p").click(); //$("p").trigger("click"); }); }); </script> </body> </html>
on的data傳值問題
<!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <div>這是一個div</div> <p>這是一個p元素</p> <script src="jquery-1.12.4.js"></script> <script> $(function () { //100，註冊的時候的時候，把100傳到事件裏面去。 var money = 100; //on(types, selector, data, callback) //使用on方法的時候，可以給data參數傳一個值，可以在事件裏面通過e.data獲取到。 $("div").on("click",100, function (e) { console.log(e); console.log("哈哈，我有"+e.data); }); money = 0; $("p").on("click", function () { console.log("嗚嗚，我有"+0); }) }); </script> </body> </html>
阻止瀏覽器默認行為
<!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <a href="http://web.itcast.cn" id="link">呵呵</a> <script src="jquery-1.12.4.js"></script> <script> $(function () { $("#link").on("click", function (e) { //阻止 默認 //e.preventDefault(); //e.stopPropagation(); //alert("呵呵"); //return false;//既能阻止事件冒泡，也能阻止瀏覽器的默認行為。 //console.log(e.cancelBubble); //alert("呵呵"); }); $("body").on("click", function () { alert("嘻嘻"); }) }); </script> </body> </html>
2.3. 事件解綁
unbind方式（不用）
$(selector).unbind(); //解綁所有的事件 $(selector).unbind("click"); //解綁指定的事件
undelegate方式（不用）
$( selector ).undelegate(); //解綁所有的delegate事件 $( selector).undelegate( 「click」 ); //解綁所有的click事件
off方式（推薦）
// 解綁匹配元素的所有事件 $(selector).off(); // 解綁匹配元素的所有click事件 $(selector).off("click");
2.4. 觸發事件
$(selector).click(); //觸發 click事件 $(selector).trigger("click");
2.5. jQuery事件對象
jQuery事件對象其實就是js事件對象的一個封裝，處理了兼容性。
//screenX和screenY 對應屏幕最左上角的值 //clientX和clientY 距離頁面左上角的位置（忽視滾動條） //pageX和pageY 距離頁面最頂部的左上角的位置（會計算滾動條的距離） //event.keyCode 按下的鍵盤代碼 //event.data 存儲綁定事件時傳遞的附加數據 //event.stopPropagation() 阻止事件冒泡行為 //event.preventDefault() 阻止瀏覽器默認行為 //return false:既能阻止事件冒泡，又能阻止瀏覽器默認行為。
【案例：鋼琴版導航（加強）.html】
