[网页编程]-10 jQuery 事件处理

prtyaa 2023-12-27 15:55:08  50045

分类专栏：资讯

jq对象上的事件只有一次有效可以使用one()绑定方式。

一个jq对象绑定多个事件可以采用bind()绑定方式将事件和事件处理方式封装为json。

事件采用bind绑定后使用unbind()进行事件解绑。

三种页面加载执行方式

/* 页面加载完成事件操作*3 */
			$(function(){});
			
			jQuery(function(){});
			
			$(document).ready(function(){})

事件的基础绑定

$(function(){
		$("#bu1").click(function(){
			alert("单击事件")
			}) 
				
		$("#bu1").dblclick(function(){
			alert("双击事件")
		      })

bind多事件绑定

$("#bu2").bind('chick',function(){
		alert("单击事件绑定");
		})
//多事件绑定 - json风格绑定
	$("#bu2").bind({
		'chick':function(){},
		'dbclick':function(){}
	})

一次事件绑定

	$("#bu3").one('click',function(){
		alert("一次绑定事件");
	})

trigger事件操作

trigger事件是适用于,调用已经存在的函数事件,因为有的函数没有命名,所以需要trigger来帮助调用

$("#bu4").click(function(){
					$("#bu1").trigger("dblclick");
					$("#bu3").trigger("click");
				})

事件的解绑

	$("#bu5").click(function(){
		//事件的解绑
		//	$("#bu1").unbind();//啥都不写,解绑指定对象上的所有事件
		//解绑bu1对象的双击事件
			$("#bu1").unbind("click");
		}

新增按钮沿用方法(需要1.6之前jq支持)

$(".bu6").live('click',function(){
					
		alert("单击事件绑定");
					
	})
				
				
$("body").append('<input type="button" name="" id="" class="bu6" value="事件操作2" />');
				
	}

所有版本的jQuery

前端公共库CDN加速-静态资源公共库,免费CDN公共库cdnjs.net/cdn.html?name=jquery

腾讯网静态资源公共库libs.qq.com/

完整代码

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script src="js/jquery-1.9.1.js" type="text/javascript" charset="utf-8"></script>
		<script type="text/javascript">
			/* 页面加载完成事件操作*3 */
			/* $(function(){});
			
			jQuery(function(){});
			
			$(document).ready(function(){}) */
			/* ************事件的基础绑定******************* */
			$(function(){
				$("#bu1").click(function(){
					alert("单击事件")
				})
				
				$("#bu1").dblclick(function(){
					alert("双击事件")
				})
				
				
				/* **********bind多事件绑定************* */
				$("#bu2").bind('chick',function(){
					alert("单击事件绑定");
				})
				//多事件绑定 - json风格绑定
				$("#bu2").bind({
					'chick':function(){},
					'dbclick':function(){}
				})
				
				/* **************trigger事件操作******************** */
				$("#bu4").click(function(){
					$("#bu1").trigger("dblclick");
					$("#bu3").trigger("click");
				})
				
				/* **************一次事件绑定************* */
				$("#bu3").one('click',function(){
					alert("一次绑定事件");
				})
				
				/* ***************事件解绑****************** */
				$("#bu5").click(function(){
					//事件的解绑
				//	$("#bu1").unbind();//啥都不写,解绑指定对象上的所有事件
					//解绑bu1对象的双击事件
					$("#bu1").unbind("click");
				})
				
			})
			
		</script>
	</head>
	<body>
		<input type="button" name="bu1" id="bu1" value="事件绑定" />
		<input type="button" name="bu2" id="bu2" value="bind事件绑定" />
		<input type="button" name="bu3" id="bu3" value="one事件绑定" />
		<input type="button" name="bu4" id="bu4" value="trigger事件" />
		<input type="button" name="bu5" id="bu5" value="解绑事件" />
	</body>
</html>

网站声明：如果转载，请联系本站管理员。否则一切后果自行承担。

本文链接：https://www.xckfsq.com/news/show.html?id=31511

赞同 0

评论 0 条