jQuery是一款优秀的JavaScript框架,上次我讲了下jquery如何绑定事件,更多的是讲解jQuery的实现方式,这里再次介绍下jQuery的事件机制
在jquery的事件模型中,有两个基本的事件绑定函数,bind与unbind,这两个函数的含义就是匹配页面元素进行相关事件的处理。比如我们在JS中经常使用到的onfocus,onblur,onmouseover,onmousedown等事件都可以作为bind的参数进行传递。
1 |
$( "#id" ).bind( 'click' , function (){alert( 'tt!' )});
|
其中bind的第一个参数代表的含义是:事件类型(注意不需要加on),function中的代码就是你要执行的逻辑代码
多个事件绑定:bind还允许你绑定多个事件,事件名字之间用空格隔开,例如:
1 |
$( 'a' ).bind( 'click mouseover' , function (){
|
在最新的jquery1.4版本中,对bind方法进行了改进,你可以在bind方法传入一个类JSON对象来一次绑定多个事件处理函数。
2 |
click: function (){alert( 'a' );},
|
3 |
mouseover: function (){alert( 'a again!' )}
|
在function函数中,你还可以通过传递一个javaScript对象给function方法,这个事件对象通常是可以省略的。
bind中还有一个参数data,该参数一般情况下很少使用,通常为了解决在同一个方法中处理同一个变量时有很好的处理。
1 |
var productname= "Sports Shoes" ;
|
2 |
$( '#Area' ).bind( 'click' , function (){
|
5 |
productname= "necklace" ,
|
6 |
$( '#Area' ).bind( 'click' , function (){
|
由于变量productname被重新赋值,所以输出的消息都是”necklace”,这里不了解可以去查阅下关于JavaScript的变量作用域,要解决这个问题就必须使用到data参数,
1 |
var productname= "Sports Shoes" ;
|
2 |
$( '#Area' ).bind( 'click' ,{pn:productname}, function (){
|
5 |
productname= "necklace" ,
|
6 |
$( '#Area' ).bind( 'click' ,{pn:productname}, function (){
|
One
为每一个匹配元素的特定事件(像click)绑定一个一次性的事件处理函数。该方法与bind方法的参数一样,与bind方法的区别就是只对匹配元素的事件处理执行一次,执行完之后,以后再也不会执行,当然重新发起web请求时它又会执行一次。
1 |
$( 'a' ).one( 'click' , function (){
|
单击页面上的a元素后,弹出消息,除非用户发起第二次请求,否则再次点击a元素不会弹出消息对话框。
live
该方法主要是能处理动态添加的元素,给那些后添加的元素也一样绑定事件。
1 |
$( 'a' ).live('click', function (){
|
2 |
alert( 'show message!' );
|
然后如果我添加一个元素,
1 |
$( 'body' ).appnend( '<a href=#>Another Element</a>' );
|
那么该元素也会被触发事件处理函数alert。
另外,jQuery还提供了一些绑定这些标准事件类型的简单方式,比如.click()用于简化.bind(‘click’)。
JQuery一个对象绑定多个事件
- jQuery("#id").click(func1).mouseover(func2)//方法连写,func为方法的名字
- jQuery("#id").click(function(){//你的具体方法实现}),mouser(function(){//你的具体方法实现});
- jQuery("#id").bind("click mouseover",func)//两个事件中间有空格 ,func为方法的名字
- jQuery("#id").bind("load scroll",function(){//你的具体方法实现});
一共有以下这些:blur, focus, focusin, focusout, load, resize, scroll, unload, click, dblclick, mousedown, mouseup, mousemove, mouseover, mouseout, mouseenter, mouseleave, change,select, submit, keydown, keypress, keyup, error 等。
注意:在给form绑定onsubmit事件时,
写成:$("#form1").bind("onsubmit", function(){}); 一直触发不了onsubmit事件, 因为这里绑定错了, 应该绑定submit, 如:$("#form1").bind("submit", function(){});
分享到:
相关推荐
本文实例讲述了jQuery事件绑定和委托。分享给大家供大家参考。具体方法如下: jQuery事件的绑定和委托可以用多种方法实现,on() 、 bind() 、 live() 、 delegate() ,还有one()。 有时我们可能会像下面这样...
第17周-第16章节-Python3.5-JQuery 事件绑定的方式.avi
简单易懂~,绝对让你感觉到物有所值,包你满意
主要介绍了浅谈jQuery事件绑定原理,并做了简单分析,然后用实例来展示,需要的朋友可以参考下
下面小编就为大家带来一篇jQuery事件绑定方法学习总结(推荐)。小编觉得挺不错的,现在就分享给大家,也给大家做个参考。一起跟随小编过来看看吧
主要介绍了jQuery事件绑定与解除绑定实现方法,实例分析了jQuery中bind与unbind方法的使用技巧,具有一定参考借鉴价值,需要的朋友可以参考下
主要介绍了jQuery事件绑定用法,结合多个实例较为详细的分析了常见的jQuery事件绑定实现技巧与使用方法,需要的朋友可以参考下
主要介绍了jQuery事件绑定和解绑、事件冒泡与阻止事件冒泡及弹出应用,结合实例形式较为详细的分析了jQuery事件绑定、解绑、事件冒泡、阻止冒泡等相关原理与应用技巧,需要的朋友可以参考下
主要介绍了jQuery事件绑定on()与弹窗实现代码,需要的朋友可以参考下
主要为大家详细介绍了jquery事件绑定解绑机制源码,感兴趣的小伙伴们可以参考一下
下面小编就为大家带来一篇深入理解jQuery事件绑定。小编觉得挺不错的,现在就分享给大家,也给大家做个参考。一起跟随小编过来看看吧
主要介绍了jQuery事件绑定用法,结合实例形式较为详细的分析了jQuery事件绑定的实现原理与相关注意事项,并附带了相关绑定方法的使用说明,重点介绍了bind和live的区别,需要的朋友可以参考下
主要介绍了JQuery调用绑定click事件的3种写法,本文简洁清晰的给出3种写法的代码示例,可以很方便的复制使用,需要的朋友可以参考下
jquery 水平手风琴鼠标滑过标题图片滑动切换
主要详细介绍了jQuery事件绑定的三种方法,分别是on()、bind()与delegate(),十分的浅显易懂,有需要的小伙伴可以参考下。