jQuery學習之旅 Item8 DOM事件操作 · 你不知道的jQuery

### 1、jquery頁面載入事件 **1、傳統加載事件** ~~~ <body onload=”函數名()”> 頁面全部html和css代碼加載完成之后再調用指定的onload函數 window.onload = function(){ 加載過程 } ~~~ **2、jquery實現加載事件** ~~~ ① $(document).ready(function(){加載代碼}); ② $().ready(function(){加載代碼}); ③ $(function(){加載代碼}); ----- jQuery.fn.init ~~~ 第三種方式是對前兩種方法封裝的簡便實用方法 ~~~ //jquery加載事件 //第一種使用 $(document).ready(function(){ //加載過程代碼 alert('abc'); }); //第二種使用 $().ready(function(){ alert('hello'); }); //第三種使用 $(function(){ alert('china'); }); $(function(){ alert('beijing'); }); ~~~ **3、jquery加載與傳統加載區別** ① jquery加載事件可以同時使用多個，傳統只有一個 1. 多個人可以定義各自的加載事件 1. jquery加載事件都放入一個數組里邊，遍歷數組 1. 傳統方式加載事件是存入一個變量里邊，多次使用變量值被覆蓋 ② jquery加載事件比傳統加載事件執行速度快 1. jquery加載事件執行時間點，dom樹結構在內存中繪制完畢就執行加載 1. 傳統方式加載執行時間點，全部內容在瀏覽器里邊呈現出來才會執行 ![這里寫圖片描述](https://box.kancloud.cn/2016-04-28_57218a0aa80c1.jpg "") jquery加載事件捕捉的時間點不一樣 - 內容繪制完畢之后就捕捉時間 DOMContentLoaded - 傳統方式是內容在瀏覽器顯示完畢之后再來捕捉window.onload jquery內部原理模擬： ~~~ //模擬jQuery的加載事件行為 document.addEventListener("DOMContentLoaed", function(){alert("abcd")}); ~~~ 給當前應用設置一個事件DOMContentLoaded，dom樹結構在內存繪制完畢就執行一些過程。 ### 2、jquery事件綁定（bind的省略） **1、原生js的時間綁定** ~~~ <input type=”text” onclick=”f1()” /> 缺點：結構和行為沒有分離 document.getElementById(‘id’).onclick=f1; 結構和行為分離 document.getElementById(‘id’).addEventListener(‘click’, function(){}); 主流瀏覽器 .attachEvent(“onclick”,fucntion(){}); IE事件綁定 ~~~ **2、jquery事件綁定**(input框設置點擊事件click) ~~~ $(“input”).click(function(){}); $(“input”).mouseover(function(){}); ~~~ 在jquery里邊把普通時間名字的on去掉，就是jquery對應的事件方法名字注意： ~~~ $(“input”).click(fn); 給input框設置事件 $(“input”).click(); 觸發input框的click事件執行 $(“div”).mouseover(); 觸發div的鼠標移入事件執行 ~~~ ~~~ $(function(){ $("#result").click(function(){ console.log('click'); }); $("#result").mouseover(function(){ //觸發點擊事件一并執行 $(this).click(); console.log('mouseover'); }); }); ~~~ 鼠標移入div后會觸發點擊事件執行 ### 3、jquery事件綁定（bind綁定）上述講的事件綁定方法有： ~~~ <input onclick=”f1()”> document.getElementById(“#apple”).click = function(){} document.getElementById(“#pear”).addEventListener(‘click’,function(){}); $(選擇器).click(function(){});//bind的省略形式 ~~~ jQuery定義了bind()方法作為統一的接口，用來為每一個匹配元素綁定事件處理程序。其基本語法： ~~~ bind(type,[data],fn); ~~~ 其中參數type表示事件類型，參數data是可選參數,它可以作為event.data屬性值傳遞給事件對象的額外數據對象。參數fn表示事件處理函數。 bind方法與之前事件綁定不同之處： **1．事件綁定和取消** （1）可以為多個不同的事件類型，綁定同一個處理過程 ~~~ a) $(“#apple”).bind(“click mouseover mouseout”,function(){事件處理}); b) 多個不同類型事件中間使用單個空格分隔。 ~~~ （2）. 可以為同一個對象同時綁定多個不同類型事件 ~~~ a) $(“#apple”).bind({click:fn, mouseover:fn, mouseout:fn}); b) bind(json對象) ~~~ （3）. 可以為同一個對象的同一類型事件綁定多個處理過程 ~~~ a) $(“#apple”).bind(‘click’,fn1); b) $(“#apple”).bind(‘click’,fn2); ~~~ （4）. 可以靈活取消事件綁定 ~~~ a) 全部事件都取消 i. $(“#apple”).unbind(); b) 可以取消指定類型取消 i. $(“#apple”).unbind(‘click’); c) 可以取消指定類型指定處理過程事件 i. $(“#apple”).unbind(‘click’,fn1); d) 第三項事件取消注意： $(“div”).bind(‘click’,function(){}); 不靈 function f1(){} $(“div”).bind(‘click’,f1); 有效 ~~~ 示例： ~~~ <script> function a(){ alert("ok, I see"); } function b(){ alert("ok, you see"); } function f1(){ //$("div").bind(事件類型[,事件傳遞參數],事件處理); //①綁定多個同類型事件 //事件可以使用匿名函數表達式，也可以使用函數指針 $("div").bind('click',a); $("div").bind('click',b); //② 同時為多個事件綁定相同的處理過程 $("div").bind("click mouseover mouseout",function(){ $("#result").append('hello'); }); //③ 同時綁定不同事件 $("div").bind({ click:function(){ $("#result").append('click') }, mouseover:function(){ $("#result").append('over') }, mouseout:function(){ $("#result").append('out') } }); } function del(){ //全部取消 //$("div").unbind(); //取消指定事件 //$("div").unbind('mouseover'); //取消指定事件具體處理程序 $("div").unbind("click",a); } </script> <body> <div>bread and milk</div> <input type="button" value="觸發" onclick="f1()"/> <input type="button" value="取消" onclick="del()"/> <span id="result"></span> </body> ~~~ **2．事件綁定參數** ~~~ $(“div”).bind(‘click’,{json對象參數}, function(evt){ //參數具體使用 evt.data.對象屬性名稱； }); ~~~ 示例： ~~~ <script> function f1(){ //$("div").bind(事件類型[,事件傳遞參數],事件處理); var name = "tom"; $("div").bind('click',{name:'tom',age:33},function(evt){ //evt就是event事件對象 alert(evt.data.name);//tom alert(evt.data.age);//33 }); //name被復制了一份傳遞給nm $("div").bind('click',{nm:name},function(evt){ //evt就是event事件對象 alert(name); alert(evt.data.nm); //tom }); name = "jack"; //name被復制了一份傳遞給nm $("#btn").bind('click',{nm:name},function(evt){ //使用參數name alert(name); alert(evt.data.nm); //jack }); } //tom jack //jack jack //內存中只有一個name值為jack // div設置事件的時候，內部并沒有執行函數（只是做了一個聲明），name也沒有被訪問 // 等待事件被觸發的時候，name的值已經變為jack </script> <body> <div>bread and milk</div> <input type="button" value="元素" id="btn" /> <input type="button" value="觸發" onclick="f1()"/> <span id="result"></span> </body> ~~~ **3．事件觸發模擬** 用戶出發觸發事件執行： ~~~ $(“form”).submit(); ~~~ 模擬用戶觸發事件執行trigger()：具體用法： trigger（type, [data]）===>只需將你的type設置為自定義的事件即可。 ~~~ $(“form”).trigger(‘submit’); $(“form”).triggerHandler(‘submit’);(沒有瀏覽器默認動作) ~~~ triggerHandler() 只會執行具體事件，沒有瀏覽器默認動作例如：表單有提交事件表單通過按鈕真實被提交后發生的事情 ① 執行“ok，馬上出發”彈出框(提交事件的處理程序執行) ② 瀏覽器需要提交給下個頁面(瀏覽器默認動作) ~~~ $(function(){ $("form").bind("submit",function(){ alert("ok, i go quickly"); }); }); function f1(){ //trigger 觸發器 $("form").trigger("submit"); $("form").trigger("submit");//觸發指定事件執行，同時有瀏覽器默認動作 //$("form").triggerHandler("submit"); $("form").triggerHandler("submit");//觸發指定事件執行,不會執行瀏覽器默認動作 } ~~~ trigger()還可以出發自定義時間 ### 4、阻止瀏覽器默認動作瀏覽器默認動作：表單提交，頁面重定向， `<a>`標簽的超鏈接利用提交事件可以實現表單域驗證，通過頁面就跳轉，否則頁面要停止跳轉阻止瀏覽器默認動作有兩種方式： ① return false; //也可以阻止事件冒泡 ② event.preventDefault(); //推薦使用 ~~~ $(function(){ //表單提交需要驗證表單域，正確就可以提交走，否則沒有瀏覽器默認動作 $("form").bind('submit',function(evt){ //對表單域進行驗證， //用戶名不正確 alert('用戶名不正確'); //return false; evt.preventDefault();//阻止瀏覽器默認動作 }); }); ~~~ ### 5、阻止事件冒泡 html —>head ———>body —————–>div ————————>input input和div都有點擊事件，由于事件冒泡作用，input框被點擊觸發事件之后，div的點擊事件也要被觸發。有的時候根據需要不要進行事件冒泡，需要對其進行阻止事件冒泡阻止： ① return false; 容易與“瀏覽器默認動作阻止“混淆 ② event.stopPropagation(); 阻止事件冒泡 ~~~ $(function(){ $("div").bind('click',function(){ alert("divdiv"); }); $("input").bind('click',function(evt){ alert("inputinput"); //阻止事件冒泡 //return false; evt.stopPropagation(); }); }); ~~~ ### 6、事件委派與解除委派事件委派與事件綁定效果一致，解除委派與時間取消類似。 ~~~ $().bind(type,fn); $().live(type,fn); $().die(type,fn);//不帶參數就是解除live事件，如果帶了參數type，那會移除相應的live事件，如果同時指定了第二個參數，則只能移除指定事件的處理函數。 ~~~ “事件委派“較比”事件綁定“不同之處： **使用事件委派，后增加的兄弟元素也有相同的事件被設置。** ~~~ <script type="text/javascript"> $(function(){ //使用live事件委派，增加的元素也有與兄弟一樣的事件 $("li").live('click',function(){ //li被點擊輸出自己的文本內容 alert($(this).html()); }); }); //方法聲明要在加載事件外部，否則會訪問不到 function f1(){ $("ul").append("<li>北京</li>"); } </script> <style type="text/css"> div {width:300px; height:200px; background-color:pink;} </style> <body> <ul> <li>天</li> <li>角</li> <li>涯</li> <li>海</li> </ul> <input type="button" value="增加" onclick="f1()" /> </body> ~~~ ### 7、事件合并 Query有兩個合成事件—-hover()和toggle(),這兩個方法都是jQuery自定義的方法 **1、hover()方法** 語法結構為 hover(enter,leave) hover()方法用于模擬光標懸停事件。當光標移動到元素上時，會觸發指定的第一個函數，離開時觸發第二個函數。這個函數很好理解，而且實際開發中會有很多妙用。 ~~~ <ul> <li>天</li> <li>角</li> <li>涯</li> <li>海</li> </ul> ~~~ 鼠標移動在每個li身上，有高亮效果本質：每個li都有鼠標移入和移出事件，有三種實現方法 1、第一種方式： ~~~ $(“li”).each(function(){ $(this).mouseover(fn); $(this).mouseout(fn); }); ~~~ 第二種方式： ~~~ $(“li”).mouseover(fn) $(“li”).mouseout(fn) ~~~ 第三種方式：hover() 該方法就是對mouseover和mouseout兩個事件封裝的簡便使用 ~~~ $(“li“).hover(兩個函數參數：移入和移出函數); $(“li”).hover( function(){}, function(){} ); ~~~ ~~~ <script> $(function(){ $("li").hover( function() { $(this).css('background-color','lightblue'); }, function() { $(this).css("background-color",""); } ); }); </script> <style type="text/css"> div {width:300px; height:200px; background-color:pink;} </style> <body> <ul> <li>天</li> <li>角</li> <li>涯</li> <li>海</li> </ul> </body> ~~~ **2、toggle()方法** 語法結構 `toggle(fn1,fn2,fn3...fnN)` toggle()方法用于模擬鼠標連續單擊事件，第一次單擊事件觸發指定的第一個函數，第二次就觸發第二個函數…. 如果有更多的函數則依次觸發，直到最后一個。隨后的每次單擊都是對這幾個函數的輪番調用。看到這個方法第一想到的是toggleClass() 用于給元素對象切換樣式。 toggle方法也是挺好理解的，以前項目中倒是沒有應用過。舉個例子： ~~~ <html> <head> <title> unbind() </title> <script src="jquery-1.8.3.js" type="text/javascript"></script> <script type="text/javascript">  </script> </head> <body> <h1>三國殺變態武將</h1> <div > <ul> </ul> </div> <input type="button" value="連續點擊按鈕可切換事件" > </body> </html></span> ~~~ 注意：在上例中引用的jquery庫不是以前常用的jquery-2.1.0.min.js了，是因為在jquery1.9版本中將toggle()的切換功能去掉了,現在toggle這個功能只能控制元素的顯隱。 ### 8、事件命名空間 jQuery支持事件命名空間以方便管理事件。例如，在下面示例中為div元素綁定多個事件類型，然后使用命名空間進行規范，從而方便管理。所謂事件命名空間，就是在事件類型后面以點語法附加一個別名，以便于引用事件，如，click.a ，其中a就是click當前事件的別名。 ~~~ <html> <head> <title> jQuery命名空間 </title> <script src="jquery-2.1.0.min.js" type="text/javascript"></script> <script type="text/javascript">  </script> </head> <body > <div id="" class=""> jQuery命名空間 </div> </body> </html> ~~~ 我們為div綁定的幾個事件都指定了命名空間，這樣在刪除事件的時候，就可以直接指定命名空間即可。例如調用下面一行代碼就可以把上面綁定的事件全部刪除： ~~~ $("div").unbind(".a"); ~~~ 同樣，假如我們為click事件類型指定了不同的命名空間，那么當我們只想刪一個的時候只要指定它的命名空間即可。