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对象每次点击后依次调用函数。如果调用完了再从第一个开始调用.
公众号
事业单位
当前位置：
公考类
招聘类
各类考试
