jquery事件操作_H5之家 - 中国HTML5教程资源分享第一站

当前位置 : 首页> 脚本专栏

jquery事件操作

jquery第十五课,jquery对象绑定事件,事件处理,事件委派,以及事件的切换

参考共用代码

<!doctype html public -//w3c//dtd html 4.0 transitional//en>

<html><head><title>jquery事件操作</title>

<style>

.www {height:100px;background-color:#ff0;}

.forasp {height:50px;}

.cn {height:80px;}

</style>

$(function(){

});

</script>

<body>

<div id=1 class=www>jquery</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类似，但有以下三个主要区别：

* 第一，他不会触发浏览器默认事件。 %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>新添加元素</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对象每次点击后依次调用函数。如果调用完了再从第一个开始调用.

更多脚本专栏信息请查看：脚本专栏