jQuery学习笔记（事件）
1. 加载DOM
jQuery用$(document).ready()方法来代替传统JavaScrpt的window.onload方法。但它们执行时机有所不同，window.onload在网页所有元素装载完毕之后触发；而$(document).ready()则是在DOM载入就绪时触发。并且window.onload只能执行一次；而$(document).ready()则可以被多次调用。
// 下面三种写法都可以 $(document).ready(function(){ // your code }) $().ready(function(){ // your code }) $(function(){ // your code })
2. 事件绑定
bind()方法的调用格式为：
bind(type [,data], fn);
type - 事件类型，包括：blur,focus,load,resize,scroll,unload,click,dbclick,mousedown,mouseup,mousemove,mouseout,mouseenter,mouseleave,change,
select,submit,keydown,keypress,keyup和error等，也可以是自定义的名称。
data - 可选参数，作为event.data属性值传递给事件对象的额外对象。
fn - 用来绑定的处理函数。
$(function(){ $("#panel h5.head").mouseover(function(){ $(this).next().show(); }).mouseout(function(){ $(this).next().hide(); }) })
3. 事件合成
hover()方法，用于模拟光标悬停事件，hover()相当于替代bind("mouseenter"),bind("mouseleave")。语法为：
hover(enter, leave);
上面事件绑定中的代码可以简写为如下代码：
$(function(){ $("#panel h5.head").hover(function(){ $(this).next().show(); },function(){ $(this).next().hide(); }) })
toggle()方法，用于模拟鼠标连续单击事件。第1次单击触发函数fn1，第2次单击触发函数fn2，...第n次单击触发函数fnN；然后循环轮番调用。语法为：
toggle(fn1,fn2,...fnN);
上面事件绑定中的代码可以简写为如下代码：
$(function(){ $("#panel h5.head").toggle(function(){ $(this).next().show(); },function(){ $(this).next().hide(); }) })
另外，toggle()方法在jQuery中还有另外一个作用：切换元素的可见状态。上面的代码还可以更改为：
$(function(){ $("#panel h5.head").toggle(function(){ $(this).next().toggle(); },function(){ $(this).next().toggle(); }) })
4. 事件冒泡
4.1 什么是冒泡？
<body> <div id="content"> 外层div元素 <span>内层span元素</span> 外层div元素 </div> <div id="msg"></div> </body>
$(function(){ // 为span元素绑定click事件 $('span').bind("click",function(){ var txt = $('#msg').html() + "<p>内层span元素被点击.<p/>"; $('#msg').html(txt); }); // 为div元素绑定click事件 $('#content').bind("click",function(){ var txt = $('#msg').html() + "<p>外层div元素被点击.<p/>"; $('#msg').html(txt); }); // 为body元素绑定click事件 $("body").bind("click",function(){ var txt = $('#msg').html() + "<p>body元素被点击.<p/>"; $('#msg').html(txt); }); })
如上代码在单击span、div、body时，会触发不同的事件。单击span会触发三个事件，单击div触发二个事事件，单击body触发一个事件。这就是事件的冒泡。
4.2 如何停止冒泡事件？
使用stopPropagation()方法来停止冒泡事件。
// 为span元素绑定click事件 $('span').bind("click",function(event){ var txt = $('#msg').html() + "<p>内层span元素被点击.<p/>"; $('#msg').html(txt); event.stopPropagation(); // 阻止事件冒泡 });
4.3 如何阻止默认行为？
网页中的元素有自己的默认的行为，比如：单击超链接后会跳转，单击“提交”按钮表单会提交，有时需要阻止元素的默认行为。这就用到了preventDefault()方法。
$(function(){ $("#sub").bind("click",function(event){ var username = $("#username").val(); //获取元素的值 if(username==""){ //判断值是否为空 $("#msg").html("<p>文本框的值不能为空.</p>"); //提示信息 event.preventDefault(); //阻止默认行为 ( 表单提交 ) } }) })
如果想同时对事件对象停止冒泡和默认行为，可以在事件处理函数中返回false。这是对在事件对象上同时调用stopPropagation()方法和preventDefault()方法的一种简写方式。
$(function(){ $("#sub").bind("click",function(event){ var username = $("#username").val(); //获取元素的值 if(username==""){ //判断值是否为空 $("#msg").html("<p>文本框的值不能为空.</p>"); //提示信息 return false; } }) })
5. 事件对象的属性
event.type，获取到事件的类型；
event.target，获取触发事件的元素；
event.pageX，event.pageY，获取到光标相对于页面的x坐标和y坐标；
event.which，获取鼠标单击事件中的左、中、右键；1=左键、2=中键、3=右键；
通过上述代码可以查看event各属性。另外还有两个方法已经介绍了：stopPropagation()与preventDefault()。
更多信息参考：http://learn.jquery.com/events/event-basics/
<a id="mya">test1</a><a id="myb">test2</a><a id="myc">test3</a><a href='http://google.com'>click me .</a><input />
$(function(){ $("input").keyup(function(e){ alert(e.which); $(this).blur(); }) $("#mya").click(function(event) { alert("Current mouse position: " + event.pageX + ", " + event.pageY );//获取鼠标当前相对于页面的坐标 return false;//阻止链接跳转 }); $("#myb").mousedown(function(e){ alert(e.which) // 1 = 鼠标左键 ; 2 = 鼠标中键; 3 = 鼠标右键 return false;//阻止链接跳转 }) $("#myc").click(function(event) { alert(event.type);//获取事件类型 return false;//阻止链接跳转 }); $("a[href='http://google.com']").click(function(event) { var tg = event.target; //获取事件对象 alert( tg.href ) ; return false;//阻止链接跳转 }); })
6. 移除事件
方式一，全部移除：
$(function(){ $('#btn').bind("click", function(){ $('#test').append("<p>我的绑定函数1</p>"); }).bind("click", function(){ $('#test').append("<p>我的绑定函数2</p>"); }).bind("click", function(){ $('#test').append("<p>我的绑定函数3</p>"); }); $('#delAll').click(function(){ $('#btn').unbind("click"); }); })
方式二，只移除指定函数：
$(function(){ $('#btn').bind("click", myFun1 = function(){ $('#test').append("<p>我的绑定函数1</p>"); }).bind("click", myFun2 = function(){ $('#test').append("<p>我的绑定函数2</p>"); }).bind("click", myFun3 = function(){ $('#test').append("<p>我的绑定函数3</p>"); }); $('#delTwo').click(function(){ $('#btn').unbind("click",myFun2); }); })
7. 模拟操作
常用模拟：
$('#btn').trigger("click");
触发自定义事件：
$(function(){ $('#btn').bind("myClick", function(event, message1, message2){ $('#test').append( "<p>"+message1 + message2 +"</p>"); }); $('#btn').click(function(){ $(this).trigger("myClick",["我的自定义","事件"]); }).trigger("myClick",["我的自定义","事件"]); })
8. 其他方法
8.1 绑定多个事件类型
$(function(){ $("div").bind("mouseover mouseout", function(){ $(this).toggleClass("over"); }); })
8.2 添加事件命名空间，便于管理
$(function(){ $("div").bind("click.plugin",function(){ $("body").append("<p>click事件</p>"); }); $("div").bind("mouseover.plugin", function(){ $("body").append("<p>mouseover事件</p>"); }); $("div").bind("dblclick", function(){ $("body").append("<p>dblclick事件</p>"); }); $("button").click(function() { $("div").unbind(".plugin"); }) })
8.3 相同事件名称，不同命名空间执行方法
<div >test.</div> <button >根据命名空间，触发事件</button>
$(function(){ $("div").bind("click",function(){ $("body").append("<p>click事件</p>"); }); $("div").bind("click.plugin", function(){ $("body").append("<p>click.plugin事件</p>"); }); $("button").click(function() { $("div").trigger("click!"); // 注意click后面的感叹号 }); })
单击div触发两个事件，单击button则仅触发click事件。
注意：trigger("click!")后面的感叹号的作用是匹配所有不包含在命名空间中的click方法；如果去掉感叹号，则两个事件都触发。
