现在位置首页 / 前端开发 /正文

jquery/javascript动态绑定元素事件及事件e参数详细说明2

作者: IT小兵 | 2014年6月7日| 热度:℃ | 评论: |参与:

上一篇说明了javascript事件绑定的原理和一些注意事项。[jquery/javascript动态绑定元素事件及事件e参数详细说明]

今天说明怎么用jquery轻松实现事件的绑定。

jQuery中的事件

使用jQuery事件处理函数的好处是:

1.添加的是多播事件委托

我们可以为dom的click事件添加一个函数后,再次添加一个函数.

2.统一了事件名称

 添加多播委托时,ie在事件名称前加了"on",而firefox则直接使用事件名称

3.可以将对象行为全部用脚本控制

使用脚本控制元素行为,使用HTML标签控制元素内容,用CSS控制元素样式,从而达到了元素的行为、内容、样式分离的状态.

下面是基础的jQuery事件处理函数: 


bind(type,[data],fn) 为匹配元素的指定事件添加事件处理函数

data为可选参数,data为数组

function secondClick() {

    alert("second click!");

}

$("#dv1").bind("click", secondClick);

one(type,[data],fn) 为匹配元素的指定事件添加一次性事件处理函数

通过fn函数的参数的data属性可获取值

//数据通过fn的参数传递过去

//  例如fn的参数是e,则在fn内部可以通过e.data获取设定的参数

$("#dv1").one("click", { name: "zzz", age: 20 }, function (e) {

    alert(e.data.name);

});

trigger(event,[data]) 在匹配的元素上触发某类事件

此函数会导致浏览器同名的默认行为被执行

data为可选参数,data为数组 见下例

triggerHandler(event,[data]) 触发指定的事件类型上所绑定的处理函数

不会执行浏览器默认行为 见下例

unbind(type,fn) 为匹配的元素解除指定事件的处理函数

//如果没有参数,则解除匹配元素的所有事件处理函数

$("#dv1").unbind();


//如果提够了事件类型参数,则只删除该事件类型的处理函数

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


//如果把绑定时传递的处理函数作为第二个参数传递,则只删除该处理函数

$("#dv1").unbind("click", secondClick);

注意:

我们可以为同一个事件绑定多个事件处理函数,代码如下:

$("#dv1").bind("click", function () { alert("first click!"); })
    .bind("click", function () { alert("second click!"); });

先删除事件,再绑定的代码:

在绑定事件之前先unbind一下,你可以试一下。
$('.aa').unbind().bind('click', function() {
  alert('click');
});


点击阅读本文所属分类的更多文章: 前端开发 。和高手一起交流:346717337
友荐云推荐

未注明转发、原文均为本站原创。分享本文请注明 原文链接

给您更多信息和帮助

在这里您可以找到更多:

技术交流群:346717337 Jquery插件交流

投稿:[email protected]

承接:企业网站门户/微网站/微商城/CMS系统/微信公众号运营/业务咨询

echarts教程系列
本月最热文章

微信扫一扫,徜徉悠嘻网,您的休闲乐园

微信公众号:快乐每一天

随机文章
标签

技术交流群:346717337

投稿:[email protected]

专业专注:企业网站门户/微网站/微商城/CMS系统/微信公众号运营/付费问题咨询