jquery 事件处理

nullpoint · 发表于 2013-2-8 00:30:38

<!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、3event.preventDefault() 阻止事件的默认行为，如submitevent.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>

		自动登录	找回密码
密码			立即注册