jQuery中的事件

1.加载DOM

在常规的JavaScript中,使用window.onload方法;而在jQuery中,使用$(document).ready()方法。

window.onload与$(document).ready()的不同:

● 执行时间

window.onload必须等到页面内包括图片的所有元素加载完毕后才能执行。
$(document).ready()是DOM结构绘制完毕后就执行,不必等到加载完毕。

● 编写个数不同

window.onload不能同时编写多个,如果有多个window.onload方法,只会执行一个 。它会默认用后面的函数覆盖前面的函数。
$(document).ready()可以同时编写多个,并且都可以得到执行

● 简化写法

window.onload没有简化写法
$(document).ready(function(){})可以简写成$(function(){});

2.事件绑定

在文档加载完成后,如果打算为元素绑定事件来完成某些操作,可以使用bind()方法对匹配元素进行特定事件的绑定。

bind()的调用格式:

bind(type [,data] ,fn);

type:代表事件类型,类型包括:blur、focus、load、resize、scroll、unload、click、dblclick、mousedown、mouseup、mousemove、mouseover、mouseout、mouseinter、mouseleave、change、select、submit、keydown、keypress、keyup和error等。

data:可选参数,作为event.data属性值传递给事件对象的额外数据对象

fn:有来绑定处理的函数

 

<body>
<!-- 第1种效果-->
<div id="panel">
	<h5 class="head">什么是jQuery?</h5>
	<div class="content" style="display: none">
		jQuery是一个兼容多浏览器的javascript库,核心理念是write less,do more(写的更少,做的更多)。
	jQuery在2006年1月由美国人John Resig在纽约的barcamp发布,吸引了来自世界各地的众多JavaScript
	高手加入,现在由Dave Methvin率领团队进行开发。如今,jQuery已经成为最流行的javascript库,
	在世界前10000个访问最多的网站中,有超过55%在使用jQuery。
	</div>
</div>
<hr />
<!-- 第2种效果-->
<div id="panel_2">
	<h5 class="head">什么是jQuery?</h5>
	<div class="content" style="display: none">
		jQuery是一个兼容多浏览器的javascript库,核心理念是write less,do more(写的更少,做的更多)。
	jQuery在2006年1月由美国人John Resig在纽约的barcamp发布,吸引了来自世界各地的众多JavaScript
	高手加入,现在由Dave Methvin率领团队进行开发。如今,jQuery已经成为最流行的javascript库,
	在世界前10000个访问最多的网站中,有超过55%在使用jQuery。
	</div>
</div>
<script type="text/javascript"> 
	//光标滑过时显示,离开隐藏
	$("#panel h5.head").bind("mouseover", function(){
		$(this).next("div.content").show();
	});
	$("#panel h5.head").bind("mouseout", function(){
		$(this).next("div.content").hide();
	});
	//单击以改变是否显示
	$("#panel_2 h5.head").bind("click", function(){
		if($(this).next("div.content").is(":visible")){//如果显示
			$(this).next("div.content").hide();
		}else{
			$(this).next("div.content").show();
		}
	});
</script>
</body>

3.合成事件

● hover()方法

hover()方法的语法结构:

hover(enter, leave);

hover()方法用于模拟光标悬停事件。当光标移动到元素上时,会触发enter函数;当光标移出这个元素时,会触发leave函数。

● toggle()方法

toggle()方法的语法结构:

toggle(fn1, fn2,...,fnN);

toggle()方法用于模拟鼠标连续单击事件。第一次单击元素时,触发fn1函数,当再次单元素时,触发fn2函数;如果有更多函数,则依次触发,直到最后一个。

4.事件冒泡

事件冒泡现象重现:

 

<body>
<div id="content">
	外层div元素
	<span>内层span元素</span>
	外层div元素
</div>
<div id="msg"></div>
<script type="text/javascript"> 
	//为span元素绑定事件
	$("#content span").bind("click", function(){
		var txt = $("#msg").html() + "<p>span元素被单击</p>";
		$("#msg").html(txt)
	});
	//为span元素绑定事件
	$("#content").bind("click", function(){
		var txt = $("#msg").html() + "<p>div元素被单击</p>";
		$("#msg").html(txt)
	});
	//为span元素绑定事件
	$("body").bind("click", function(){
		var txt = $("#msg").html() + "<p>body元素被单击</p>";
		$("#msg").html(txt)
	});
</script>
</body>

停止事件冒泡:

 

<script type="text/javascript"> 
	//为span元素绑定事件
	$("#content span").bind("click", function(event){
		var txt = $("#msg").html() + "<p>span元素被单击</p>";
		$("#msg").html(txt);
		event.stopPropagation();
	});
	//为span元素绑定事件
	$("#content").bind("click", function(event){
		var txt = $("#msg").html() + "<p>div元素被单击</p>";
		$("#msg").html(txt);
		event.stopPropagation();
	});
	//为span元素绑定事件
	$("body").bind("click", function(event){
		var txt = $("#msg").html() + "<p>body元素被单击</p>";
		$("#msg").html(txt);
		event.stopPropagation();
	});
</script>

当单击元素时,事件对象event就被创建了。这个事件对象只有在事件处理函数才能访问到。事件处理函数执行完毕后,事件对象就被毁弃。

5.事件对象的属性

6.移除事件:unbind()

7.模拟事件:使用trigger()方法模拟事件

● 常用模拟

模拟单击事件:$("#btn").trigger("click");(简化:$("#btn").click();)

● 触发自定义事件

 

<script type="text/javascript"> 
	//为Button绑定单击事件
	$("#btn").bind("myClick", function(){
		$("#test").append("<p>我自定义的事件<p>");
	});
	//触发自定义事件
	#("#btn").trigger("myClick");
</script>

● 传递数据

 

<script type="text/javascript"> 
	//为Button绑定单击事件
	$("#btn").bind("myClick", function(event, message1, message2){
		$("#test").append("<p>"+message1+message2+<p>");
	});
	//触发自定义事件
	#("#btn").trigger("myClick" ,["我自定义的", "事件"]);//传递两个参数
</script>

8.添加事件命名空间,便于管理

 

<script type="text/javascript">
	$("#btn").bind("click.plugin", function(event, message1, message2){
		$("#test").append("<p>"+message1+message2+<p>");
	});
	$("#btn").bind("mouseover.plugin", function(event, message1, message2){
		$("#test").append("<p>"+message1+message2+<p>");
	});
	$("#btn").bind("myClick", function(event, message1, message2){
		$("#test").append("<p>"+message1+message2+<p>");
	};
	#("#btn").unbind(".plugin");//移除plugin命名空间下的事件
</script>




评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值