`

jquery 事件处理

jQueryCSSHTML 
阅读更多 
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
 <HEAD>
  <TITLE> jquery events </TITLE>
  <script src="jquery-1.3.2.js" type="text/javascript"></script>
<script language="javascript" >

function one(){
	alert("one");
}
function two(){
	alert("two");
}
window.onload=one;
//依次给onload赋值时，后面的会覆盖前面的,只能保存对一个函数的引用
window.onload=two;
//最终绑定一个匿名函数，调用两个函数
window.onload=function(){
	alert("js");
	one();
	two();
}
//$(document).ready(function(){}),$().ready(function(){}),$(function(){})等价
//该方法内注册的函数，事件，只要dom加载完毕就可以操作，执行要早于window.onload
//多次调用该方法注册事件会在原来的基础上追加
$(document).ready(function(){
	alert("jquery");
	one();
	two();
})
$(function(){
	alert("three");
})
$().ready(function(){
	alert("four");
})
		

/*
	bind("",function(){})
	参数1是需要绑定的事件，可以是js中已经存在的事件（onclick,onmouseover,change,blur...）
	bind中作为参数时没有前面的on（"onclick"-->"click"）,也可以是
自定义事件，用trigger方法调用;
	
参数2是处理函数

*/
$(function(){
	$("#bt1").bind("click",function(){
		alert("正在计算");
	}).bind("click",function(){//bind可以多次调用
		var tm = new Date().toString();
		$(this).next("span").html(tm).show();
	}).bind("focus click",function(){
		alert("focus or click");
	})
})
//为元素绑定事件也可以这样简写
$(function(){
	$("#bt2").click(function(){
		alert("hello");
	})
})
//hover(f1,f2)两个函数参数，当光标移动到元素上时，触发第一个函数，
//当光标移出这个元素时，会触发第二个函数
$(function(){
	$("#bt3").hover(function(){
		$(this).next("span").html("in");
	},function(){
		$(this).next("span").html("leave");
	})
})
//toggle(f1,f2,f3...)，当点击绑定该事件的元素时，会循环重复调用传递的函数参数，
//如果调用到最后一个，下次点击又会从第一个开始
$().ready(function(){
	$("#bt4").toggle(
		function(){alert("1")},
		function(){alert("2")},
		function(){alert("3")}
	)
})

$(document).ready(function(){
	$("#bt5").toggle(function(){
		$(this).next("span").hide();
	},function(){
		$(this).next("span").show();
	})
})

</script>
 </HEAD>

 <BODY>
	<hr/>
	<button id="bt1">现在的时间？</button><span style="display:none"></span><br/>
	<button id="bt2">click</button><br/>
	<button id="bt3">test hover()</button><span></span><br/>
	<button id="bt4">test toggle() 1</button><br/>
	<button id="bt5">test toggle() 2</button><span>hello</span>
	<hr/>
	<div id="d1" style="background-color:red;width:100px;height:50px">
		<span id="s1" style="background-color:green;width:60px;height:30px">hello</span>	
	</div>
	<hr/>
	<button id="bt6">点击看我有几个click函数</button><br/>
	<button id="bt7">移除一个click事件</button>
	<button id="bt8">移除所有click事件</button>
	<button id="bt9">移除所有事件</button>
	<hr/>
	<div style="background-color:red;width:400px;height:50px">
		<span>hello</span>
	</div>
	<button>触发div的自定义事件</button>
 </BODY>
<script language="javascript">
/*
	分别为选择的div和span注册click事件，上面可知该span是该div的child,
	如果点击该span也相当与点击了该div，所以两个的click函数都会触发，如果当点击span时只想
	触发span的click函数，可以在其注册函数传递event参数，用event.stopPropagation()来停止事件冒泡，相当于return false;

	注册函数传递的event参数包含了一些事件信息
	event.type() 事件类型
	event.target() 触发事件的元素
	event.pageX()，event.pageY() 光标相对于页面的x和y坐标
	event.which() 鼠标单机事件中获取鼠标的左、中、右键//对应值分别是1、2、3
	event.preventDefault() 阻止事件的默认行为，如submit
	event.stopPropagation() 阻止事件冒泡
	
*/
$("div#d1").click(function(){alert("div click")});

$("span#s1").click(function(event){
	alert("span click");
	event.stopPropagation();//return false也可以
});

//为id是bt6的button注册事件
$("#bt6").bind("click",myFunc1=function(){
	alert("click func1");
}).bind("click",myFunc2 = function(){
	alert("click func2")
}).bind("click",myFunc3=function(){
	alert("click func3");
}).bind("mouseover",function(){
	$(this).css("backgroundColor","green");
}).bind("mouseout",function(){
	$(this).css("backgroundColor","");
})
/*
	unbind()函数，用来移除注册事件
	(1) 没有参数，则删除所有绑定事件
	(2)如果提供事件类型作为参数，只删除该类型的绑定事件
	(3)在（2）的基础上，传递绑定的处理函数作为第二个参数，
	   则只有这个特定的事件处理函数会被删除
*/
//点击id为bt7的button移除bt6的第一个click函数
$("#bt7").bind("click",function(){
	$("#bt6").unbind("click",myFunc1);
})
//bt8用来移除bt6所有的click函数
$("#bt8").bind("click",function(){
	$("#bt6").unbind("click"); 
})
//bt9用来移除bt6所有的注册事件
$("#bt9").bind("click",function(){
	$("#bt6").unbind(); 
})


/*
	对于只需要触发一次的事件可以用one()方法处理，
	用法类似bind()方法
*/

//模拟操作，触发事件 trigger();可以是js事件也可以是自定义事件

//选取body下的最后一个button和div元素
var $lsBt = $("body > button:last");
var $lsDv = $("body > div:last");
//为最后一个div绑定一个自定义事件hello
$lsDv.bind("hello",function(){
	$(this).append("<span>自定义绑定事件hello被调用<span>")
})
//当点击最后一个button，触发div的hello事件
$lsBt.click(function(){
	$lsDv.trigger("hello");
})

</script>
</HTML>
0
顶
0
踩
分享到：
| jquery dom 操作
评论
发表评论

您还没有登录,请您登录后再发表评论

相关推荐

Magicbox
Global site tag (gtag.js) - Google Analytics