javascript之jquery 事件

执行时机

[javascript] view plaincopy

1. var startTime = new Date().getTime();  
2. $(document).ready(function(){  
3.         test1();  
4.         })  
5.   
6. function test1(){  
7.     var endTime2  = new Date().getTime();   
8.     var a = endTime2 - startTime;  
9.     $("<div>jQuery的ready() : "+a+" ms</div>").appendTo("body");  
10. }  
11.   
12. function test2(){  
13.     var endTime1  = new Date().getTime();  
14.     var b = endTime1 - startTime;  
15.     $("<p>JavaScript的window.onload : "+b+" ms</p>").appendTo("body");  
16. }  

$(document)也可以简写成$()

DOM准备

使用$().ready()注意很可能大量的图片未加载完,此时的图片的高度和宽度的属性不一定有效,可以使用load方法,绑定在window上,则会在所有内容加载完毕后触发

$(window).load(function(){});

绑定在元素上,则会在元素的内容加载完毕后触发.

[javascript] view plaincopy

1. document.getElementById("panel").onclick=function(){  
2.     alert( "元素已经加载完毕 !");  
3. }  
4. /* 
5.    执行错误，为什么？ 
6.    因为dom还未加载完毕。 
7.  */  
8. document.getElementById("panel").onclick=function(){  
9.     alert( "元素已经加载完毕 !");  
10. }  
11. /*正确执行*/  
12. window.onload = function(){  
13.     document.getElementById("panel").onclick=function(){  
14.         alert( "元素已经加载完毕 !");  
15.     }  
16. }  
17. $(document).ready(function(){  
18.         document.getElementById("panel").onclick=function(){  
19.         alert( "元素已经加载完毕 !");  
20.         }  
21.         })  
22. function one(){  
23.     alert("one");  
24. }  
25. function two(){  
26.     alert("two");  
27. }   
28. window.onload = one ;  
29. window.onload = two ;  
30. function one(){  
31.     alert("one");  
32. }  
33. function two(){  
34.     alert("two");  
35. }   
36. $(document).ready(function(){  
37.         one();  
38.         })  
39. $(document).ready(function(){  
40.         two();  
41.         })  

事件绑定

[javascript] view plaincopy

1. $("#panel h5.head").bind("click",function(){  
2.         $(this).next().show();  
3.         })  
4. $("#panel h5.head").bind("click",function(){  
5.         var $content = $(this).next();  
6.         if($content.is(":visible")){  
7.         $content.hide();  
8.         }else{  
9.         $content.show();  
10.         }  
11.         })  
12. $("#panel h5.head").bind("mouseover",function(){  
13.         $(this).next().show();  
14.         }).bind("mouseout",function(){  
15.             $(this).next().hide();  
16.             })  
17. $("#panel h5.head").mouseover(function(){  
18.         $(this).next().show();  
19.         }).mouseout(function(){  
20.             $(this).next().hide();  
21.             })  

合成事件

[javascript] view plaincopy

1. $("#panel h5.head").hover(function(){  
2.         $(this).next().show();  
3.         },function(){  
4.         $(this).next().hide();     
5.         })  
6. $("#panel h5.head").toggle(function(){  
7.         $(this).next().show();  
8.         },function(){  
9.         $(this).next().hide();  
10.         })  
11. $("#panel h5.head").toggle(function(){  
12.         $(this).next().toggle();  
13.         },function(){  
14.         $(this).next().toggle();  
15.         })  
16. $("#panel h5.head").toggle(function(){  
17.         $(this).addClass("highlight");  
18.         $(this).next().show();  
19.         },function(){  
20.         $(this).removeClass("highlight");  
21.         $(this).next().hide();  
22.         });  

事件冒泡

[javascript] view plaincopy

1. // 为span元素绑定click事件  
2. $('span').bind("click",function(){  
3.         var txt = $('#msg').html() + "<p>内层span元素被点击.<p/>";  
4.         $('#msg').html(txt);  
5.         });  
6. // 为div元素绑定click事件  
7. $('#content').bind("click",function(){  
8.         var txt = $('#msg').html() + "<p>外层div元素被点击.<p/>";  
9.         $('#msg').html(txt);  
10.         });  
11. // 为body元素绑定click事件  
12. $("body").bind("click",function(){  
13.         var txt = $('#msg').html() + "<p>body元素被点击.<p/>";  
14.         $('#msg').html(txt);  
15.         });  
16. // 为span元素绑定click事件  
17. $('span').bind("click",function(event){  
18.         var txt = $('#msg').html() + "<p>内层span元素被点击.<p/>";  
19.         $('#msg').html(txt);  
20.         event.stopPropagation();    //  阻止事件冒泡  
21.         });  
22. // 为div元素绑定click事件  
23. $('#content').bind("click",function(event){  
24.         var txt = $('#msg').html() + "<p>外层div元素被点击.<p/>";  
25.         $('#msg').html(txt);  
26.         event.stopPropagation();    //  阻止事件冒泡  
27.         });  
28. // 为body元素绑定click事件  
29. $("body").bind("click",function(){  
30.         var txt = $('#msg').html() + "<p>body元素被点击.<p/>";  
31.         $('#msg').html(txt);  
32.         });  
33. $("#sub").bind("click",function(event){  
34.         var username = $("#username").val();  //获取元素的值  
35.         if(username==""){     //判断值是否为空  
36.         $("#msg").html("<p>文本框的值不能为空.</p>");  //提示信息  
37.         event.preventDefault();  //阻止默认行为 ( 表单提交 )  
38.         }  
39.         })  
40. $("#sub").bind("click",function(event){  
41.         var username = $("#username").val();  //获取元素的值  
42.         if(username==""){     //判断值是否为空  
43.         $("#msg").html("<p>文本框的值不能为空.</p>");  //提示信息  
44.         return false;  
45.         }  
46.         })  
47. // 为span元素绑定click事件  
48. $('span').bind("click",function(event){  
49.         var txt = $('#msg').html() + "<p>内层span元素被点击.<p/>";  
50.         $('#msg').html(txt);  
51.         return false;  
52.         });  
53. // 为div元素绑定click事件  
54. $('#content').bind("click",function(event){  
55.         var txt = $('#msg').html() + "<p>外层div元素被点击.<p/>";  
56.         $('#msg').html(txt);  
57.         return false;  
58.         });  
59. // 为body元素绑定click事件  
60. $("body").bind("click",function(){  
61.         var txt = $('#msg').html() + "<p>body元素被点击.<p/>";  
62.         $('#msg').html(txt);  
63.         });  

事件对象的属性

[javascript] view plaincopy

1. $("a").click(function(event) {  
2.         alert(event.type);//获取事件类型  
3.         return false;//阻止链接跳转  
4.         });  
5. $("a[href='http://google.com']").click(function(event) {  
6.         var tg = event.target;  //获取事件对象  
7.         alert( tg.href ) ;  
8.         return false;//阻止链接跳转  
9.         });  
10. $("a").click(function(event) {  
11.         alert("Current mouse position: " + event.pageX + ", " + event.pageY );//获取鼠标当前相对于页面的坐标  
12.         return false;//阻止链接跳转  
13.         });  
14. $("a").mousedown(function(e){  
15.         alert(e.which)  // 1 = 鼠标左键 ; 2 = 鼠标中键; 3 = 鼠标右键  
16.         return false;//阻止链接跳转  
17.         })  
18. $("input").keyup(function(e){  
19.         alert(e.which);  
20.         })  
21. $("input").keyup(function(e){  
22.         alert( e.metaKey +" "+e.ctrlKey );  
23.         $(this).blur();  
24.         })  

移除事件

[javascript] view plaincopy

1. $(function(){  
2.         $('#btn').bind("click", function(){  
3.             $('#test').append("<p>我的绑定函数1</p>");  
4.             }).bind("click", function(){  
5.                 $('#test').append("<p>我的绑定函数2</p>");  
6.                 }).bind("click", function(){  
7.                     $('#test').append("<p>我的绑定函数3</p>");  
8.                     });  
9.         })  
10. $(function(){  
11.         $('#btn').bind("click", function(){  
12.             $('#test').append("<p>我的绑定函数1</p>");  
13.             }).bind("click", function(){  
14.                 $('#test').append("<p>我的绑定函数2</p>");  
15.                 }).bind("click", function(){  
16.                     $('#test').append("<p>我的绑定函数3</p>");  
17.                     });  
18.         $('#delAll').click(function(){  
19.             $('#btn').unbind("click");  
20.             });  
21.         })  
22. $(function(){  
23.         $('#btn').bind("click", myFun1 = function(){  
24.             $('#test').append("<p>我的绑定函数1</p>");  
25.             }).bind("click", myFun2 = function(){  
26.                 $('#test').append("<p>我的绑定函数2</p>");  
27.                 }).bind("click", myFun3 = function(){  
28.                     $('#test').append("<p>我的绑定函数3</p>");  
29.                     });  
30.         $('#delTwo').click(function(){  
31.             $('#btn').unbind("click",myFun2);  
32.             });  
33.         })  
34. $(function(){  
35.         $('#btn').one("click", function(){  
36.             $('#test').append("<p>我的绑定函数1</p>");  
37.             }).one("click", function(){  
38.                 $('#test').append("<p>我的绑定函数2</p>");  
39.                 }).one("click", function(){  
40.                     $('#test').append("<p>我的绑定函数3</p>");  
41.                     });  
42.         })  

模拟操作

[javascript] view plaincopy

1. $(function(){  
2.         $('#btn').bind("click", function(){  
3.             $('#test').append("<p>我的绑定函数1</p>");  
4.             }).bind("click", function(){  
5.                 $('#test').append("<p>我的绑定函数2</p>");  
6.                 }).bind("click", function(){  
7.                     $('#test').append("<p>我的绑定函数3</p>");  
8.                     });  
9.         $('#btn').trigger("click");  
10.         })  
11. $(function(){  
12.         $('#btn').bind("myClick", function(){  
13.             $('#test').append("<p>我的自定义事件.</p>");  
14.             });  
15.         $('#btn').click(function(){  
16.             $(this).trigger("myClick");  
17.             }).trigger("myClick");  
18.         })  
19. $(function(){  
20.         $('#btn').bind("myClick", function(event, message1, message2){  
21.             $('#test').append( "<p>"+message1 + message2 +"</p>");  
22.             });  
23.         $('#btn').click(function(){  
24.             $(this).trigger("myClick",["我的自定义","事件"]);  
25.             }).trigger("myClick",["我的自定义","事件"]);  
26.         })  
27. $(function(){  
28.         $('#old').bind("click", function(){  
29.             $("input").trigger("focus");  
30.             });  
31.         $('#new').bind("click", function(){  
32.             $("input").triggerHandler("focus");  
33.             });  
34.         $("input").focus(function(){  
35.             $("body").append("<p>focus.</p>");  
36.             })  
37.         })  

其他用法

[javascript] view plaincopy

1. $(function(){  
2.         $("div").bind("mouseover mouseout", function(){  
3.             $(this).toggleClass("over");  
4.             });  
5.         })  
6. $("div").bind("click.plugin",function(){  
7.         $("body").append("<p>click事件</p>");  
8.         });  
9. $("div").bind("mouseover.plugin", function(){  
10.         $("body").append("<p>mouseover事件</p>");  
11.         });  
12. $("div").bind("dblclick", function(){  
13.         $("body").append("<p>dblclick事件</p>");  
14.         });  
15. $("button").click(function() {  
16.         $("div").unbind(".plugin");    
17.         })  
18. /* 
19.    click,mouseover 事件被删除， 
20.  */  
21. $("div").bind("click",function(){  
22.         $("body").append("<p>click事件</p>");  
23.         });  
24. $("div").bind("click.plugin", function(){  
25.         $("body").append("<p>click.plugin事件</p>");  
26.         });  
27. $("button").click(function() {  
28.         $("div").trigger("click!");    // 注意click后面的感叹号  
29.         });