jquery的事件机制

最新推荐文章于 2022-08-09 15:33:36 发布

道法—自然

最新推荐文章于 2022-08-09 15:33:36 发布

阅读量151

点赞数 1

分类专栏：前端页面

本文链接：https://blog.csdn.net/wyqwilliam/article/details/103553043

版权

前端页面专栏收录该内容

38 篇文章 0 订阅

订阅专栏

<html>
	<head>
		<title>jQuery的事件机制</title>
		<meta charset="UTF-8"/>
		<!--
			jQuery的事件机制：
				问题：
					目前使用事件机制需要在HTML元素上使用属性进行声明和调用。
					但是这样造成如果需要更换事件，就需要改变源码。事件和HTML源码的
					耦合性过高。
				解决:
					使用js代码的方式进行事件的添加和应用
				实现:
					jquery
				使用：
					事件绑定
						元素对象名.bind("事件名",fn)//给对象添加指定的事件，并执行指定的函数。
						特点：
							解耦
							可以给一个事件添加多个函数，不会覆盖。
					事件解绑
						元素对象名.unbind("事件名")//将元素对象的指定事件解除。
					一次性事件
						元素对象名.one("事件名",fn)//添加一次性事件，事件触发立即失效。
					直接事件添加:
						元素对象名.事件名(fn)//给指定的对象添加指定的事件
					jQuery页面加载：
						$(document).ready(fn)//页面加载成功指定指定的函数
						$(fn)
		-->
		<!--引入jQuery文件-->
		<script src="js/jquery-1.9.1.js" type="text/javascript" charset="utf-8"></script>
		<script type="text/javascript">
			//事件绑定
				function testBind(){
					
				}
			//事件解绑
				function testUnBind(){
					//获取元素对象
					var btn=$("#btn");
					//解绑事件
					btn.unbind("click");	
				}
			//one事件
				function testOne(){
					//获取元素对象
					var btn=$("#btn");
					//一次事件添加
					btn.one("click",function(){
						alert("一次性事件");
					})
				}
			//事件直接添加
				function testClick(){
					//获取元素对象
					var btn=$("#btn");
					//添加单击事件
					btn.click(function(){
						alert("我是单击");
					})
				}
			//jQuery的页面加载
				$(document).ready(function(){
					$("#btn").click(function(){
						alert("点击事件");
					})
					$("#bind").click(function(){
						//获取元素对象
						var btn=$("#btn");
						//添加事件
						btn.bind("click",function(){
							alert("我是单击");
						})
						btn.bind("click",function(){
							alert("我是单击2");
						})
					})
					
				})
			
				$(function(){
					$("#uname").blur(function(){
						//获取用户数据
						var uname=$("#uname").val();
						//获取Span
						var span=$("#unameSpan");
						//校验
							//正则
							var reg=/^[\u4e00-\u9fa5]{2,4}$/;
							//开始校验
							if(uname==""){
								span.html("*用户名不能为空").css("color","red");
							}else if(reg.test(uname)){
								span.html("*用户名OK").css("color","green");
							}else{
								span.html("*用户名不符合规则").css("color","red");
							}
					})
				})
		</script>
	</head>
	<body>
		<h3>jQuery的事件机制</h3>
		<input type="button" name="" id="bind" value="测试bind添加事件"/>
		<input type="button" name="" id="" value="测试unbind解绑事件" onclick="testUnBind()" />
		<input type="button" name="" id="" value="测试one一次性事件" onclick="testOne()" />
		<input type="button" name="" id="" value="测试直接添加事件--click" onclick="testClick()" />
		<hr />
		<input type="button" name="" id="btn" value="测试"/>
		<hr />
		用户名: <input type="text" name="uname" id="uname" value="" /><span id="unameSpan"></span>
	</body>
</html>

道法—自然

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
jquery的事件机制

<html> <head> <title>jQuery的事件机制</title> <meta charset="UTF-8"/> <!-- jQuery的事件机制：问题：目前使用事件机制需要在HTML元素上使用属性进行声明和调用。但是这样造成如果需要更换事件，就需要改变源码。事...
复制链接

扫一扫