一步一步学习 JQuery (七) JQuery 中的事件处理 / 憋错料

一、加载 DOM

在页面加载完毕后, 浏览器会通过 JavaScript 为 DOM 元素添加事件. 在常规的 JavaScript 代码中, 通常使用 window.onload 方法, 在 jQuery 中使用$(document).ready() 方法.

<span style="font-size:14px;"><!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
		<title>Untitled Document</title>

		<script type="text/javascript" src="scripts/jquery-1.9.1.js"></script>
		<script type="text/javascript">

			//加载 DOM 的两种方式: jQuery 的 和 window.onlaod

			/*
			window.onload = function(){
				alert("1");
			}

			window.onload = function(){
				alert("2");
			}
			只能执行 2 ,相当于 前一个window.onload 被后面的覆盖
			*/

			/*
			$(document).ready(function(){
				alert(1);
			});
			$(document).ready(function(){
				alert(2);
			});
			*/

			//$(document).ready(function(){})可以同时写多个,window只能一个
			//$(document).ready(function(){}); 缩写  $(function(){});
			/* $(function(){

			}); */

		</script>

	</head>
	<body>
		<p>你喜欢哪个城市?</p>
		<ul id="city">
			<li id="bj">北京</li>
			<li>上海</li>
			<li id="dj">东京</li>
			<li id="se">首尔</li>
		</ul>

		<br><br>
		<p>你喜欢哪款单机游戏?</p>
		<ul id="game">
			<li id="rl">红警</li>
			<li>实况</li>
			<li>极品飞车</li>
			<li>魔兽</li>
		</ul>

		<br><br>
		<p>你喜欢哪种开发语言?</p>
		<ul id="language">
			<li>C</li>
			<li>Java</li>
			<li>.NET</li>
			<li>PHP</li>
		</ul>

		<br><br>
		gender:
			<input type="radio" name="gender" value="male"/>Male
			<input type="radio" name="gender" value="female"/>Female

		<br><br>
		name: <input type="text" name="username" value="at"/>

	</body>
</html>	</span>

二、事件绑定 And 和合成事件

对匹配的元素进行特定的事件绑定: bind()

使用 jQuery 的 is() 方法判断元素是否可见

hover(): 模拟光标悬停事件. 当光标移动到元素上时, 会触发指定的第一个函数, 当光标移出这个元素时, 会触发指定的第二个函数.

toggle(): 用于模拟鼠标连续单击事件. 第一次单击元素, 触发指定的第一个函数, 当再一次单击同一个元素时, 则触发指定的第二个函数, 如果有更多个函数, 则依次触发, 直到最后一个.

toggle() 的另一个作用: 切换元素的可见状态.

<span style="font-size:14px;"><!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
		<title>Untitled Document</title>
		<link href="css/style.css" type="text/css" rel="stylesheet" />
		<script type="text/javascript" src="scripts/jquery-1.7.2.js"></script>

		<script type="text/javascript">
			//为 .head 添加 Onclick 响应函数: 若 .content 隐藏则显示, 若 .content 显示, 则隐藏
			$(function(){
				/*
				$(".head").click(function(){
					//使用 is() 方法, 来判断某个给定的 jQuery 对象是否符合指定
					//的选择器.
					var flag = $(".content").is(":hidden");

					if(flag){
						//show() 方法: 使隐藏的变为显示
						$(".content").show();
					}else{
						$(".content").hide();
					}
				});
				*/

				//bind: 为某 jQuery 对象绑定事件.
				/*
				该方法不太实用,应用于 事件是事先存储好的,比如需要 时而点击效果、时而碰触效果,比较炫
				$(".head").bind("click", function(){
					//使用 is() 方法, 来判断某个给定的 jQuery 对象是否符合指定
					//的选择器.
					var flag = $(".content").is(":hidden");

					if(flag){
						//show() 方法: 使隐藏的变为显示
						$(".content").show();
					}else{
						$(".content").hide();
					}
				});
				*/

				//mouseover: 鼠标移上去
				//mouseout: 鼠标移出.
				/*
				$(".head").mouseover(function(){
					$(".content").show();
				}).mouseout(function(){
					$(".content").hide();
				});
				*/

				//合成事件: hover: 鼠标移上去执行第一个函数, 移出执行第二个函数. 

				/* $(".head").hover(function(){
					$(".content").show();
				}, function(){
					$(".content").hide();
				}); */

				//合成事件: toggle: 第一次点击执行第一个函数, 第二次点击执行第二个
				//函数 ... 循环执行.
				 $(".head").toggle(function(){
					$(".content").show();
				}, function(){
					$(".content").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>
</span>

三、事件冒泡

事件会按照 DOM 层次结构像水泡一样不断向上只止顶端

解决: 在事件处理函数中返回 false, 会对事件停止冒泡. 还可以停止元素的默认行为.

<span style="font-size:14px;"><!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
		<title>Untitled Document</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 type="text/javascript" src="../scripts/jquery-1.9.1.js"></script>
											<!-- "../scripts ../ 返回上一层 -->
		<script type="text/javascript">

			$(function(){
				//事件的冒泡: 什么是事件的冒泡

				//如果没有return false,点击div 会弹出 div click + body click
				//点击 span 会弹出span click + div click + body click 如冒泡一样一层一层向上冒
				$("body").click(function(){
					alert("body click");
				});

				$("#content").click(function(){
					alert("div click");
				});

				$("span").click(function(){
					alert("span click");
					//如何解决事件的冒泡: 通过在响应函数的结尾返回 false, 可以阻止冒泡.
					return false;
				});
			})

		</script>
	</head>
	<body>
		<div id="content">
			外层div元素
			<span>内层span元素</span>
			外层div元素
		</div>

		<div id="msg"></div>	

		<br><br>
		<a href="http://www.hao123.com">WWW.HAO123.COM</a>
	</body>
</html></span>

四、事件对象的属性

事件对象: 当触发事件时, 事件对象就被创建了. 在程序中使用事件只需要为函数添加一个参数. 该事件对象只有事件处理函数才能访问到. 事件处理函数执行完毕后, 事件对象就被销毁了.

event.pageX, event.pageY: 获取到光标相对于页面的 x, y 坐标.

<span style="font-size:14px;"><!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
		<title>Untitled Document</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 type="text/javascript" src="scripts/jquery-1.9.1.js"></script>
		<script type="text/javascript">

			/*
			1. 事件: 当鼠标在body中移动时, 就会触发 mousemove 事件.
			2. 如何得到事件对象: 在响应函数中添加一个参数就可以.
			3. 事件对象的两个属性: pageX,pageY

			应用:比如鼠标在某图片内,鼠标碰触就会放大该图片,鼠标移动,放大的图片跟随移动
			*/
			$(function(){
				//事件的 pageX, pageY 属性
				$("body").mousemove(function(obj){
					$("#msg").text("x: " + obj.pageX
							+ ", y: " + obj.pageY);
				});
			})

		</script>
	</head>
	<body>
		<div id="content">
			外层div元素
			<span>内层span元素</span>
			外层div元素
		</div>

		<div id="msg"></div>	

		<br><br>
		<a href="http://www.hao123.com">WWW.HAO123.COM</a>
	</body>
</html>
</span>

五、移除事件

移除某按钮上的所有 click 事件: $(“btn”).unbind(“click”)

移除某按钮上的所有事件: $(“btn”).unbind();

one(): 该方法可以为元素绑定处理函数. 当处理函数触发一次后, 立即被删除. 即在每个对象上, 事件处理函数只会被执行一次.

<span style="font-size:14px;"><!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
		<title>Untitled Document</title>

		<script type="text/javascript" src="scripts/jquery-1.9.1.js"></script>
		<script type="text/javascript">

			//测试移除事件: 使用 unbind 移除事件.
			//one(): 只为某一个元素添加一次事件, 事件函数响应后, 将不再被触发响应.
			$(function(){

				$("#rl").one("click", function(){
					alert("红色警戒. ");
				});

				$("li:not(#rl)").click(function(){
					alert(this.firstChild.nodeValue);

					//对于 #bj 节点, 点击一次后, 就没有 click 响应函数了
					if(this.id == "bj") //如果不加判断,先点击其他节点,也会移除事件
						$("#bj").unbind("click");
				});

			})

		</script>

	</head>
	<body>
		<p>你喜欢哪个城市?</p>
		<ul id="city">
			<li id="bj">北京</li>
			<li>上海</li>
			<li id="dj">东京</li>
			<li id="se">首尔</li>
		</ul>

		<br><br>
		<p>你喜欢哪款单机游戏?</p>
		<ul id="game">
			<li id="rl">红警</li>
			<li>实况</li>
			<li>极品飞车</li>
			<li>魔兽</li>
		</ul>

		<br><br>
		<p>你喜欢哪种开发语言?</p>
		<ul id="language">
			<li>C</li>
			<li>Java</li>
			<li>.NET</li>
			<li>PHP</li>
		</ul>

		<br><br>
		gender:
			<input type="radio" name="gender" value="male"/>Male
			<input type="radio" name="gender" value="female"/>Female
		<br><br>
		name: <input type="text" name="username" value="at"/>
	</body>
</html>	</span>

时间： 2024-10-13 08:56:28

一步一步学习 JQuery (七) JQuery 中的事件处理

一步一步学习 JQuery (七) JQuery 中的事件处理的相关文章

从零开始学习jQuery (七) jQuery动画-让页面动起来!

（转）Maven学习总结(七)——eclipse中使用Maven创建Web项目

OpenCv学习笔记(七)---OpenCv中的基本绘图函数,圆，椭圆，线段，矩形，多边形的绘制(1)

Maven学习总结(七)——eclipse中使用Maven创建Web项目

从零开始学习jQuery (九) jQuery工具函数

一步一步学习 JQuery (一) JQuery 对象

一步一步学习 JQuery (二) 选择器: 基本选择器 && 层次选择器

一步一步写jQuery插件

jQuery一步一步实现跨浏览器的可编辑表格，支持IE、Firefox、Safari、