1.JS事件的基本知識 JS事件的學習和JS方法的學習揉雜在一起,JS相對於Java等語言,方法定義和使用上比較隨意和簡單,但是還是有一些區別,需要理清楚. 2.jQuery方式綁定事件 這裡多多贅述一點,由於jQuery可以理解為是對JS的一種高級封裝,這種封裝是單向的,所以我們可以在JS中加入j ...
1.JS事件的基本知識
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>js事件基本知識</title> <script type="text/javascript" src="js/jQuery.js"></script> <script type="text/javascript"> //這個事件可以添加到第一個button標簽上,因為第一個button標簽知道fn1是什麼. function fn1() { alert("fn1"); } //這段代碼不會被執行,因為頁面是從上往下執行,在這裡獲取不到"#i1". //如果想要解決這個問題,可以將下麵的這些代碼放到body後面. var obj = document.getElementById("i1"); obj.onclick = function () { alert("fn2"); //不能直接給對象添加已有事件,必須在將已有的事件添加到DOM對象的新的方法中. fn1(); } </script> </head> <body> <input type="button" class="dd" value="點擊我" onclick="fn1();"> <input type="button" class="dd" id="i1" value="點擊我"> </body> </html>
JS事件的學習和JS方法的學習揉雜在一起,JS相對於Java等語言,方法定義和使用上比較隨意和簡單,但是還是有一些區別,需要理清楚.
2.jQuery方式綁定事件
//jQuery方式綁定事件 $(function () { var obj = $(".dd"); obj.click(function () { alert("jQuery方式"); }) })
這裡多多贅述一點,由於jQuery可以理解為是對JS的一種高級封裝,這種封裝是單向的,所以我們可以在JS中加入jQuery代碼塊,但是不能將JS和jQuery完全地揉雜在一起,所以對於jQuery的塊狀代碼必須放入到一個分離的jQuery塊中.
對於jQuery的綁定事件的方法,這裡只舉例click()方法,其他的方法查閱jQuery的文檔即可.
3.事件操作和委派
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>事件操作和委派</title> <script type="text/javascript" src="js/jQuery.js"></script> <script type="text/javascript"> $(function () { //間接綁定:bind. //間接綁定,普通情況下,這種綁定方式是多餘的. //給一個或多個事件綁定函數. $("input").bind("click", function () { alert("bind間接綁定事件"); }); //委派綁定:live $(".dd").live("click", function () { alert("live委派綁定事件"); }); //我在這裡新添加一個標簽 //對於這種用JS新添加的標簽,間接綁定的事件對這種標簽沒有用處. //對於這種用JS新添加的標簽,委派綁定的事件會給符合條件的標簽添加事件. $("body").append("<input type='button' class='dd' value='我是方法生成的標簽,點擊我''>"); }) </script>> </head> <body> <input type="button" class="dd" value="點擊我"> </body> </html>
不論是bind綁定還是live綁定,都是間接綁定
4.事件切換
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>事件的切換</title> <style> .hover { background: aqua; } </style> <script type="text/javascript" src="js/jQuery.js"></script> <script type="text/javascript"> $(function () { //需求:滑鼠覆蓋變色,滑鼠移走恢復 $("#d1").hover( //滑鼠覆蓋 function () { $("#d1").addClass("hover"); }, //註意上面有一個逗號 //滑鼠移走 function () { $("#d1").removeClass("hover"); } ); }) </script> </head> <body> <div style="border:1px solid black; width: 100px; height: 100px" id="d1"> Hello hover! </div> </body> </html>
在jQuery開發文檔中,hover()函數歸類到了事件切換中,對於hover()函數的事件切換的定義,僅限於滑鼠的覆蓋和移走兩個操作,上面是一個標準的事件切換代碼.
