注册 登录  
 加关注
   显示下一条  |  关闭
温馨提示!由于新浪微博认证机制调整,您的新浪微博帐号绑定已过期,请重新绑定!立即重新绑定新浪微博》  |  关闭

清风幻影的博客

Where there is love, I will be there.

 
 
 

日志

 
 
关于我

同是天涯沦落人,相逢何必曾相识. 天生我材必有用,千金散尽还复来. 天若有情天亦老,人间正道是沧桑. 月影西斜人已去, 堤上梅花情依旧, 此情故已成追忆, 美人如玉夜留香

网易考拉推荐

jQuery 事件绑定方法 bind  

2014-08-28 09:58:05|  分类: jquery资料 |  标签: |举报 |字号 订阅

  下载LOFTER 我的照片书  |

jQuery 事件绑定方法(bind hover toggle live.... )、删除事件方法(unbind, die)及 事件对象

http://www.cnblogs.com/lihuiyy/archive/2012/07/17/2595357.html

事件绑定方法:

1.<type>(function)

$("button").click(function(){
    ...
});

2.bind(map)

复制代码
$("input[type='text']").bind({
    focus: function(){
        ...
    },
    blur: function(){
        ...
    }
})
复制代码

3.bind(type, [data,] function)

  注:如果没有第二个参数,则与第一个绑定事件方法相同

复制代码
$("button").bind(
    "click",
    {
         arg1: "2012"
         arg2: "07"
    },
    function(event){
        ...
        event.data.arg1
        ...
    }
)
复制代码

4.one(type, [data,] function)

  绑定事件只执行一次,执行完之后绑定失效

5.hover(over, out)

  注:两个参数为鼠标盘旋在对象上方和离开时调用的函数

复制代码
$("div").hover(
    function(){
        ...
    },
    function(){
        ...
    }
)
复制代码

6.toogle(function1, function2, ...)

  该方法作用是单击对象时循环调用函数列表中的函数

7.live(type, function)

  该方法为整个页面生命周期内的某一类对象绑定一个事件处理程序

 

事件删除方法:

1.unbind([type] [,data])

  该方法删除匹配对象的事件处理程序,与bind方法对应,可以删除所有以bind方式绑定的自定义事件处理程序。如果所有参数都省略,将删除匹配对象的所有事件及事件处理程序;如果只有第一个type参数,将删除指定事件类型的时间处理程序。如:

$("#btn").unbind("click");

  如果同时指定两个参数,将删除指定事件类型的指定事件处理程序。如,btn绑定以下函数:

  var btnClick = function(){...};

  则删除btn的该事件处理程序的代码为:

$("#btn").unbind("click", btnClick);

2.die([tyoe] [,function])
  该方法与live方法对应,用于解除live注册的自定义事件。参数与unbind方法类似。

 

模拟操作:

  模拟操作就是模拟用户触发相应的事件,如一个事件触发另一个事件。

1.<type>()

  如触发一个按钮的单击事件:

$("button").click();

2.trigger(type [,data])

  如触发一个按钮的单击事件:

$("button").trigger("click");

3.triggerHandler(type [,data])

  与 trigger 方法不同:

  该方法只触发对象集合中的第一个元素的事件处理程序。且返回的是事件处理程序的返回值,而不是可链接的jQuery对象。该方法不会触发事件冒泡

 

jQuery事件对象:

1.事件对象的属性

  type:获得该对象的事件类型,如click, focus, mouseover等

  target:获得事件触发者(DOM对象)

  data:获得调用事件时传入的额外参数集合

  relatedTarget:获得触发鼠标事件的DOM元素

  currentTarget:获得当前DOM元素(等同于this关键字)

  pageX/pageY:获得鼠标事件中,鼠标光标相对于页面左上角的位置

  result:获得上一个事件处理函数返回的值

  timeStamp:获得事件发生的时间戳

2.事件对象的方法

函数名

说明 例子
preventDefault() 取消元素事件的默认动作
例如:
对于超级链接a来说,有href属性,那么在点击a的时候就会导航至href所指向位置.我们在a的click事件中,调用本方法,就不会导航到指定位置
//取消事件默认动作
$("a").bind("click", function (e) {
    e.preventDefault(); 
});
isDefaultPrevented() 是否调用过preventDefault()方法
e.isDefaultPrevented()
stopPropagation() 取消事件冒泡
e.stopPropgation();
isPropagationStopped() 是否调用过stopPropagation()方法
e.isPropagationStopped()
stopImmediatePropagation() 取消执行该元素该事件处理函数的后续事件处理函数,
并取消事件冒泡
$("a").bind("click", function (e) {
    e.stopImmediatePropagation();
});

//不会被执行到
$("a").click(function () {
    alert("我被点击了");
});
isImmediatePropagationStopped() 是否调用过stopImmediatePropagation()方法
$("a").bind("click", function (e) {
    e.stopImmediatePropagation();
    alert(e.isImmediatePropagationStopped());
});

例如:要在鼠标移动时获取鼠标的位置:

$(document).mouseover(function(event){
    var msg = event.pageX + " " + event.pageY;
    alert(msg);
});

 

  评论这张
 
阅读(542)| 评论(0)
推荐 转载

历史上的今天

在LOFTER的更多文章

评论

<#--最新日志,群博日志--> <#--推荐日志--> <#--引用记录--> <#--博主推荐--> <#--随机阅读--> <#--首页推荐--> <#--历史上的今天--> <#--被推荐日志--> <#--上一篇,下一篇--> <#-- 热度 --> <#-- 网易新闻广告 --> <#--右边模块结构--> <#--评论模块结构--> <#--引用模块结构--> <#--博主发起的投票-->
 
 
 
 
 
 
 
 
 
 
 
 
 
 

页脚

网易公司版权所有 ©1997-2018