首页 > 代码库 > 第四章 jQuery中的事件
第四章 jQuery中的事件
1.加载DOM
jQuery中，在$(document).ready()方法内注册的事件，只要DOM就绪就会被执行，此时可能元素的关联文件未下载完。
jQuery中的 load()方法，会在元素的onload事件中绑定一个处理函数。比如$(window).load(function(){...}),等价于JavaScript中的window.onload=function(){...}，该方法需要等网页所有元素都加载完（包括管理文件）。
2.事件绑定
在文档装载完之后，可以为元素绑定事件来完成一些操作。可以使用bind()方法来对匹配元素进行特定的事件绑定。
语法： bind(type,[data],fn);
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title>4-2-3</title><script src=http://www.mamicode.com/"../../scripts/jquery-1.3.1.js" type="text/javascript"></script><link rel="stylesheet" type="text/css" href=http://www.mamicode.com/"../../css/style.css" /><script type="text/javascript">$(function(){ $("#panel h5.head").bind("click",function(){ var $content = $(this).next(); if($content.is(":visible")){ $content.hide(); }else{ $content.show(); } })})</script></head><body><div id="panel"> <h5 class="head">什么是jQuery?</h5> <div class="content"> jQuery是继Prototype之后又一个优秀的JavaScript库，它是一个由 John Resig 创建于2006年1月的开源项目。jQuery凭借简洁的语法和跨平台的兼容性，极大地简化了JavaScript开发人员遍历HTML文档、操作DOM、处理事件、执行动画和开发Ajax。它独特而又优雅的代码风格改变了JavaScript程序员的设计思路和编写程序的方式。 </div></div></body></html>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title>4-2-4</title><script src=http://www.mamicode.com/"../../scripts/jquery-1.3.1.js" type="text/javascript"></script><link rel="stylesheet" type="text/css" href=http://www.mamicode.com/"../../css/style.css" /><script type="text/javascript">$(function(){ $("#panel h5.head").bind("mouseover",function(){ $(this).next().show(); }); $("#panel h5.head").bind("mouseout",function(){ $(this).next().hide(); })})</script></head><body><div id="panel"> <h5 class="head">什么是jQuery?</h5> <div class="content"> jQuery是继Prototype之后又一个优秀的JavaScript库，它是一个由 John Resig 创建于2006年1月的开源项目。jQuery凭借简洁的语法和跨平台的兼容性，极大地简化了JavaScript开发人员遍历HTML文档、操作DOM、处理事件、执行动画和开发Ajax。它独特而又优雅的代码风格改变了JavaScript程序员的设计思路和编写程序的方式。 </div></div></body></html>
3.合成事件
jQuery中有2个合成事件，hover()方法与toggle()方法。
hover() 语法：hover(enter,leave); 用来模拟光标悬停事件。
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title>4-3-1</title><script src=http://www.mamicode.com/"../../scripts/jquery-1.3.1.js" type="text/javascript"></script><link rel="stylesheet" type="text/css" href=http://www.mamicode.com/"../../css/style.css" /><script type="text/javascript">$(function(){ $("#panel h5.head").hover(function(){ $(this).next().show(); },function(){ $(this).next().hide(); })})</script></head><body><div id="panel"> <h5 class="head">什么是jQuery?</h5> <div class="content"> jQuery是继Prototype之后又一个优秀的JavaScript库，它是一个由 John Resig 创建于2006年1月的开源项目。jQuery凭借简洁的语法和跨平台的兼容性，极大地简化了JavaScript开发人员遍历HTML文档、操作DOM、处理事件、执行动画和开发Ajax。它独特而又优雅的代码风格改变了JavaScript程序员的设计思路和编写程序的方式。 </div></div></body></html>
toggle()语法：toggle(fn1,fn2,...fnN); 用来模拟鼠标连续单击事件。
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title>4-3-3</title><script src=http://www.mamicode.com/"../../scripts/jquery-1.3.1.js" type="text/javascript"></script><link rel="stylesheet" type="text/css" href=http://www.mamicode.com/"../../css/style.css" /><script type="text/javascript">$(function(){ $("#panel h5.head").toggle(function(){ $(this).next().toggle(); },function(){ $(this).next().toggle(); })})/*$(function(){ $("#panel h5.head").click(function(){ $(this).next().toggle(); })})*/</script></head><body><div id="panel"> <h5 class="head">什么是jQuery?</h5> <div class="content"> jQuery是继Prototype之后又一个优秀的JavaScript库，它是一个由 John Resig 创建于2006年1月的开源项目。jQuery凭借简洁的语法和跨平台的兼容性，极大地简化了JavaScript开发人员遍历HTML文档、操作DOM、处理事件、执行动画和开发Ajax。它独特而又优雅的代码风格改变了JavaScript程序员的设计思路和编写程序的方式。 </div></div></body></html>
4.事件冒泡
意思就是说，页面上有多个元素响应同一个事件。事件会按照DOM的层次结构像水泡一样不断往上至顶。
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>4-4-1</title> <style type="text/css"> * { margin: 0; padding: 0; } body { font-size: 13px; line-height: 130%; padding: 60px; } #content { width: 220px; border: 1px solid #0050D0; background: #96E555; } span { width: 200px; margin: 10px; background: #666666; cursor: pointer; color: white; display: block; } p { width: 200px; background: #888; color: white; height: 16px; } </style> <script src="../../scripts/jquery-1.3.1.js" type="text/javascript"></script> <script type="text/javascript"> $(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); }); }) </script></head><body> <div id="content"> 外层div元素 <span>内层span元素</span> 外层div元素 </div> <div id="msg"> </div></body></html>
停止冒泡
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>Panel</title> <style type="text/css"> * { margin: 0; padding: 0; } body { font-size: 13px; line-height: 130%; padding: 60px; } #content { width: 220px; border: 1px solid #0050D0; background: #96E555; } span { width: 200px; margin: 10px; background: #666666; cursor: pointer; color: white; display: block; } p { width: 200px; background: #888; color: white; height: 16px; } </style> <script src="../../scripts/jquery-1.3.1.js" type="text/javascript"></script> <script type="text/javascript"> $(function () { // 为span元素绑定click事件 $(‘span‘).bind("click", function (event) { var txt = $(‘#msg‘).html() + "<p>内层span元素被点击.<p/>"; $(‘#msg‘).html(txt); event.stopPropagation(); // 阻止事件冒泡 }); // 为div元素绑定click事件 $(‘#content‘).bind("click", function (event) { var txt = $(‘#msg‘).html() + "<p>外层div元素被点击.<p/>"; $(‘#msg‘).html(txt); event.stopPropagation(); // 阻止事件冒泡 }); // 为body元素绑定click事件 $("body").bind("click", function () { var txt = $(‘#msg‘).html() + "<p>body元素被点击.<p/>"; $(‘#msg‘).html(txt); }); }) </script></head><body> <div id="content"> 外层div元素 <span>内层span元素</span> 外层div元素 </div> <div id="msg"> </div></body></html>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>4-4-4</title> <style type="text/css"> * { margin: 0; padding: 0; } body { font-size: 13px; line-height: 130%; padding: 60px; } #content { width: 220px; border: 1px solid #0050D0; background: #96E555; } span { width: 200px; margin: 10px; background: #666666; cursor: pointer; color: white; display: block; } p { width: 200px; background: #888; color: white; height: 16px; } </style> <script src="../../scripts/jquery-1.3.1.js" type="text/javascript"></script> <script type="text/javascript"> $(function () { // 为span元素绑定click事件 $(‘span‘).bind("click", function (event) { var txt = $(‘#msg‘).html() + "<p>内层span元素被点击.<p/>"; $(‘#msg‘).html(txt); return false; }); // 为div元素绑定click事件 $(‘#content‘).bind("click", function (event) { var txt = $(‘#msg‘).html() + "<p>外层div元素被点击.<p/>"; $(‘#msg‘).html(txt); return false; }); // 为body元素绑定click事件 $("body").bind("click", function () { var txt = $(‘#msg‘).html() + "<p>body元素被点击.<p/>"; $(‘#msg‘).html(txt); }); }) </script></head><body> <div id="content"> 外层div元素 <span>内层span元素</span> 外层div元素 </div> <div id="msg"> </div></body></html>
阻止默认行为
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title></title> <script src="../../scripts/jquery-1.3.1.js" type="text/javascript"></script> <script type="text/javascript"> $(function () { $("#sub").bind("click", function (event) { var username = $("#username").val(); //获取元素的值 if (username == "") { //判断值是否为空 $("#msg").html("<p>文本框的值不能为空.</p>"); //提示信息 event.preventDefault(); //阻止默认行为 ( 表单提交 ) } }) }) </script></head><body> <form action="test.html"> 用户名：<input type="text" id="username" /> <br /> <input type="submit" value="提交" id="sub" /> </form> <div id="msg"> </div></body></html>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title></title> <script src="../../scripts/jquery-1.3.1.js" type="text/javascript"></script> <script type="text/javascript"> $(function () { $("#sub").bind("click", function (event) { var username = $("#username").val(); //获取元素的值 if (username == "") { //判断值是否为空 $("#msg").html("<p>文本框的值不能为空.</p>"); //提示信息 return false; } }) }) </script></head><body> <form action="test.html"> 用户名：<input type="text" id="username" /> <br /> <input type="submit" value="提交" id="sub" /> </form> <div id="msg"> </div></body></html>
5.事件对象的属性
jQuery对事件对象常用的属性进行了封装。
(1)event.type 可以获取事件的类型
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head> <title></title> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <!-- 引入jQuery --> <script src="../../scripts/jquery-1.3.1.js" type="text/javascript"></script> <script> $(function () { $("a").click(function (event) { alert(event.type); //获取事件类型 return false; //阻止链接跳转 }); }) </script></head><body> <a href=‘http://google.com‘>click me .</a></body></html>
(2)event.target 可以获取出发事件的元素
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head> <title></title> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <!-- 引入jQuery --> <script src="../../scripts/jquery-1.3.1.js" type="text/javascript"></script> <script> $(function () { $("a[href=http://google.com]").click(function (event) { alert(event.target.href); //获取触发事件的<a>元素的href属性值 return false; //阻止链接跳转 }); }) </script></head><body> <a href=‘http://google.com‘>click me .</a></body></html>
(3)event.pageX和event.pageY 可以获取光标相对于页面的x坐标与y坐标。
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head> <title></title> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <!-- 引入jQuery --> <script src="../../scripts/jquery-1.3.1.js" type="text/javascript"></script> <script> $(function () { $("a").click(function (event) { alert("Current mouse position: " + event.pageX + ", " + event.pageY); //获取鼠标当前相对于页面的坐标 return false; //阻止链接跳转 }); }) </script></head><body> <a href=‘http://google.com‘>click me .</a></body></html>
(4)event.which 可以在鼠标单击事件中获取鼠标的左中右键，也可以获取键盘键。
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head> <title></title> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <!-- 引入jQuery --><script src="../../scripts/jquery-1.3.1.js" type="text/javascript"></script> <script>$(function(){ $("a").mousedown(function(e){ alert(e.which) // 1 = 鼠标左键 left; 2 = 鼠标中键; 3 = 鼠标右键 return false;//阻止链接跳转 })}) </script></head><body><a href=‘http://google.com‘>click me .</a></body></html>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head> <title></title> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <!-- 引入jQuery --> <script src="../../scripts/jquery-1.3.1.js" type="text/javascript"></script> <script> $(function () { $("input").keyup(function (e) { alert(e.which); }) }) </script></head><body> <input /></body></html>
6.移除事件
unbind([type],[data])方法用来移除事件。
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>4-6-2</title> <style type="text/css"> * { margin: 0; padding: 0; } body { font-size: 13px; line-height: 130%; padding: 60px; } p { width: 200px; background: #888; color: white; height: 16px; } </style> <script src="../../scripts/jquery-1.3.1.js" type="text/javascript"></script> <script type="text/javascript"> $(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"); }); }) </script></head><body> <button id="btn"> 点击我</button> <div id="test"> </div> <button id="delAll"> 删除所有事件</button></body></html>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>Panel</title> <style type="text/css"> * { margin: 0; padding: 0; } body { font-size: 13px; line-height: 130%; padding: 60px; } p { width: 200px; background: #888; color: white; height: 16px; } </style> <script src="../../scripts/jquery-1.3.1.js" type="text/javascript"></script> <script type="text/javascript"> $(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); }); }) </script></head><body> <button id="btn"> 点击我</button> <div id="test"> </div> <button id="delTwo"> 删除第二个事件</button></body></html>
one(type,[data],fn)方法可以为元素绑定处理函数，当处理函数触发一次后立即删除。
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>4-6-4</title> <style type="text/css"> * { margin: 0; padding: 0; } body { font-size: 13px; line-height: 130%; padding: 60px; } p { width: 200px; background: #888; color: white; height: 16px; } </style> <script src="../../scripts/jquery-1.3.1.js" type="text/javascript"></script> <script type="text/javascript"> $(function () { $(‘#btn‘).one("click", function () { $(‘#test‘).append("<p>我的绑定函数1</p>"); }).one("click", function () { $(‘#test‘).append("<p>我的绑定函数2</p>"); }).one("click", function () { $(‘#test‘).append("<p>我的绑定函数3</p>"); }); }) </script></head><body> <button id="btn"> 点击我</button> <div id="test"> </div></body></html>
7.模拟操作
jQuery中可以使用trigger()方法完成模拟操作。
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title></title> <style type="text/css"> * { margin: 0; padding: 0; } body { font-size: 13px; line-height: 130%; padding: 60px; } p { width: 200px; background: #888; color: white; height: 16px; } </style> <script src="../../scripts/jquery-1.3.1.js" type="text/javascript"></script> <script type="text/javascript"> $(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>"); }); $(‘#btn‘).trigger("click"); }) </script></head><body> <button id="btn"> 点击我</button> <div id="test"> </div></body></html>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title></title> <style type="text/css"> * { margin: 0; padding: 0; } body { font-size: 13px; line-height: 130%; padding: 60px; } p { width: 200px; background: #888; color: white; height: 16px; } </style> <script src="../../scripts/jquery-1.3.1.js" type="text/javascript"></script> <script type="text/javascript"> $(function () { $(‘#btn‘).bind("myClick", function (event, message1, message2) { $(‘#test‘).append("<p>" + message1 + message2 + "</p>"); }); $(‘#btn‘).click(function () { $(this).trigger("myClick", ["我的自定义", "事件"]); }).trigger("myClick", ["我的自定义", "事件"]); }) </script></head><body> <button id="btn"> 点击我</button> <div id="test"> </div></body></html>
PS：参考文献《锋利的jQuery》
第四章 jQuery中的事件
声明：以上内容来自用户投稿及互联网公开渠道收集整理发布，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任，若内容有误或涉及侵权可进行投诉： 投诉/举报 工作人员会在5个工作日内联系你，一经查实，本站将立刻删除涉嫌侵权内容。