(20)Query - 事件处理

最新推荐文章于 2022-08-31 12:21:59 发布

有个机车梦

最新推荐文章于 2022-08-31 12:21:59 发布

阅读量298

点赞数 1

分类专栏： JQuery

本文链接：https://blog.csdn.net/Yuz_99/article/details/84992619

版权

JQuery 专栏收录该内容

21 篇文章 0 订阅

订阅专栏

jQuery 中的事件-- 加载 DOM
在页面加载完毕后, 浏览器会通过 JavaScript 为 DOM 元素添加事件. 在常规的 JavaScript 代码中, 通常使用 window.onload 方法, 在 jQuery 中使用$(document).ready() 方法.
在这里插入图片描述
加载 DOM 的两种方式: jQuery 的和 window.onlaod

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

输出 1 和 2

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

输出 2

（1）$(document).ready(function(){});
（1）的缩写是 -> $(function(){});

事件绑定
对匹配的元素进行特定的事件绑定: bind()
在这里插入图片描述
合成事件
hover(): 模拟光标悬停事件. 当光标移动到元素上时, 会触发指定的第一个函数, 当光标移出这个元素时, 会触发指定的第二个函数. toggle(): 用于模拟鼠标连续单击事件. 第一次单击元素, 触发指定的第一个函数, 当再一次单击同一个元素时, 则触发指定的第二个函数, 如果有更多个函数, 则依次触发, 直到最后一个. toggle() 的另一个作用: 切换元素的可见状态.

				//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();
				});

事件冒泡
事件会按照 DOM 层次结构像水泡一样不断向上只止顶端解决: 在事件处理函数中返回 false, 会对事件停止冒泡. 还可以停止元素的默认行为.
事件对象的属性
事件对象: 当触发事件时, 事件对象就被创建了. 在程序中使用事件只需要为函数添加一个参数. 该事件对象只有事件处理函数才能访问到. 事件处理函数执行完毕后, 事件对象就被销毁了. event.pageX, event.pageY: 获取到光标相对于页面的 x, y 坐标.
1. 事件: 当鼠标移动时, 就会触发 mousemove 事件.
2. 如何得到事件对象: 在响应函数中添加一个参数就可以.
3. 事件对象的两个属性: pageX,pageY

<!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.7.2.js"></script>
		<script type="text/javascript">
		
			/*
			1. 事件: 当鼠标移动时, 就会触发 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>

移除事件
移除某按钮上的所有 click 事件: $(“btn”).unbind(“click”)
移除某按钮上的所有事件: $(“btn”).unbind(); one(): 该方法可以为元素绑定处理函数. 当处理函数触发一次后, 立即被删除. 即在每个对象上, 事件处理函数只会被执行一次.
在这里插入图片描述


<!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.7.2.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" name="BeiJing">北京</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="atguigu"/>
		
	</body>
</html>

有个机车梦

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
(20)Query - 事件处理

jQuery 中的事件-- 加载 DOM在页面加载完毕后, 浏览器会通过 JavaScript 为 DOM 元素添加事件. 在常规的 JavaScript 代码中, 通常使用 window.onload 方法, 在 jQuery 中使用$(document).ready() 方法.加载 DOM 的两种方式: jQuery 的和 window.onlaod $(document).rea...
复制链接

扫一扫