jquery第十五课,jquery对象绑定事件,事件处理,事件委派,以及事件的切换
参考共用代码
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML><HEAD><TITLE>jquery事件操作</TITLE>
<script language="javascript" src="jquery-1.4.2.min.js"></script>
<style>
.www {height:100px;background-Color:#ff0;}
.forasp {height:50px;}
.cn {height:80px;}
</style>
<SCRIPT language="javascript">
$(function(){
<!--jquery文档处理代码区-->
});
</SCRIPT>
<BODY>
<div id="1" class="www">jquery</div>
<div id="2">事件</div>
<div id="3">处理</div>
</BODY>
</HTML>
1.页面载入,也就是Dom中的onload.当DOM载入就绪可以查询及操纵时绑定一个要执行的函数。
jquery中页面载入已经用了很多次了$(function(){code}); 这个是jquery载入的简写形式,下面说一下jquery页面载入代码.
全写代码:$(document).ready(function(){code});
使用 $(document).ready() 的简写，同时内部的 jQuery 代码依然使用 $ 作为别名，而不管全局的 $ 为何。
简写形式:jQuery(function(){code});或者$(function(){code});
2.jQuery事件处理
(1).bind(type,[data],fn);用来对jQuery元素进行事件的绑定.我们逐步来说.
第一种简单绑定: $("#1").bind("click",function(){alert("jquery在id=1绑定的click事件已经触发")});
获取id为1的jQuery对象,然后绑定click事件,当点击(触发click)事件,则弹出"jquery在id=1绑定的click事件已经触发"对话框.
第二种多事件绑定 $("#2").bind("mouseover mouseout",function(){if(event.type=='mouseover'){alert("触发mouseover事件");}else if(event.type=="mouseout"){alert("触发mouseout事件");}});
当鼠标移动到id=2层上触发mouseover事件,当鼠标移动到层外面时,触发mouseout事件.
第三种是第二种延续,是不同事件调用不同函数的方法
$("#3").bind({mouseover:function(){alert("jquery触发mouseover事件");},mouseout:function(){alert("jQuery触发mouseout事件");}}); 这样就不用判断事件类型来调用不同函数.
第四种是传递了[date]参数的.
var temp="jQuery参数操作";
$("#1").bind("click",{canshu:temp},function(event){alert("jQuery传递参数事件:"+event.data.canshu);}); 这样就可以传递参数,也可多个参数,用,隔开
(2).one(type,[data],fn); 只调用一次的事件处理.
$("#2").one('click',function({alert('仅处理一次的事件');}));当第一次点击可以用,以后再点击就已经消失了,其他多事件绑定跟.bind一样的.
(3).trigger(type,[data]);在每一个匹配的元素上触发某类事件。也就是触发事件
举例:$("#1").trigger("click"); 当jquery运行到这里则id=1的层触发了click事件,用jquery代替鼠标等.
如果有参数时,$("#1").bind('click',function(event,canshu1,canshu2){});
执行$("#1").trrgger("click",['参数1','参数2']);
(4).triggerHandler(type,[data]);这个特别的方法将会触发指定的事件类型上所有绑定的处理函数。但不会执行浏览器默认动作，也不会产生事件冒泡。
这个方法的行为表现与trigger类似，但有以下三个主要区别：
* 第一，他不会触发浏览器默认事件。 http://%77%77%77%2E%66%6F%72%61%73%70%2E%63%6E
* 第二，只触发jQuery对象集合中第一个元素的事件处理函数。
* 第三，这个方法的返回的是事件处理函数的返回值，而不是据有可链性的jQuery对象。此外，如果最开始的jQuery对象集合为空，则这个方法返回 undefined 。
使用方法跟trigger一样.
(5).unbind([type],[fn]);bind()的反向操作，从每一个匹配的元素中删除绑定的事件.
jquery举例:$("#1").unbind();删除了所有绑定事件$("#1").unbind("click");删除了click事件,$("#1").unbind("click",functionname);删除了绑定的click事件中的functionname函数.
3.jQuery事件委派
(1).live(type,[data],fn);jQuery 给所有匹配的元素附加一个事件处理函数，即使这个元素是以后再添加进来的也有效.这个的用法跟bind一样.不同的是,新加上来的匹配元素,也会加上事件.
$(".www").live("click",function(){alert("测试新添加的元素");});
$("body").append("<div class='www'>新添加元素</div>");
虽然绑定事件实在前面发生,但是下面的新的div也有click事件.
(2)die([type],[fn]);此方法与live正好完全相反。如果不带参数，则所有绑定的live事件都会被移除。你可以解除用live注册的自定义事件。如果提供了type参数，那么会移除对应的live事件。如果也指定了第二个参数function,则只移出指定的事件处理函数。
4.事件的切换.
(1).hover(overfunction,outfunction);一个模仿悬停事件（鼠标移动到一个对象上面及移出这个对象）的方法。这是一个自定义的方法，它为频繁使用的任务提供了一种“保持在其中”的状态。鼠标在上面时触发overfunction事件,如果移出则触发outfunction事件
(2).toggle(fn, fn2, [fn3, fn4, ...]);对jquery对象每次点击后依次调用函数。如果调用完了再从第一个开始调用.
更多信息请查看IT技术专栏