浅谈jQuery中的on()和bind()两中函数的区别

   每一个学习Javascript的程序猿,都对jQuery不陌生。因为在工作中,如果用原生的JS和DOM来编写代码,会显得代码冗余。而jQuery的出现却很好的解决了这个问题。原来书长很长的代码,现在只需几行便可轻松解决。

jQuery是一个快速、简洁的JavaScript框架,是继Prototype之后又一个优秀的JavaScript代码库(或JavaScript框架)。jQuery设计的宗旨是“write Less,Do More”,即倡导写更少的代码,做更多的事情。它封装JavaScript常用的功能代码,提供一种简便的JavaScript设计模式,优化HTML文档操作、事件处理、动画设计和Ajax交互。

在学习jQuery库时,我们会遇到on()和bind()两种给对象绑定事件处理函数的方法。

bind()--为jQuery对象内含元素添加一个或多个事件处理函数,有以下一些形式。


1.bind(eventType, function)——其中eventType为事件类型,function为事件类型触发时,执行的代码块。

example:

$("button").bind('click',function(){

console.log("hello world");

});


2.bind(eventType, data, function)——为jQuery对象内含元素添加一个事件处理函数,支持可选的data参数。

example:

var handler = function(e){

$(this).css("border","1px solid "+e.data);

};

$("img").bind('mouseenter','blue',handler).bind('mouseout','red',handler);

鼠标移入图片时加上1像素蓝色的边框,鼠标移出图片时加上1像素红色的边框。


3.bind(eventType,  function),当所选对象对应多个事件处理函数时,可以通过事件处理函数的事件类型e.type进行区分。下面这种写法和上段代码效果是一样的。

example:

var handler = function(e) {

if(e.type == 'mouseenter') {

$(this).css("border", "1px solid blue");

} else {

$(this).css("border", "1px solid red")

};

};

$("img").bind('mouseenter mouseout', handler);


4.bind(map)——使用JavaScript对象字面量map为jQuery对象内含元素一次添加多个事件处理函数。

example:

var myHandler ={  

'mouseenter':function(){console.log("我是鼠标进入")},

'click':function(){console.log("我是鼠标点击")},

'mouseout':function(){console.log("我是鼠标出来")}

};

$("img").bind(myHandler);


但是在实际开发工作中,人们往往更倾向于使用on()方法为对象添加事件处理函数,因为bind方法绑定的事件处理函数不会应用到后来添加到DOM中的新元素上。通俗的说,就是比如原来的图片已经添加上事件了,后来通过DOM操作创建出来的图片不会享有此事件。

on()——支持自动绑定事件处理函数的方法,常用方法有以下两种形式。


1.on(events,[selector],[data],function)——其中[]括号中的参数是可选的。events:一个或多个用空格分隔的事件类型和可选的命名空间。selector:一个选择器字符串用于过滤器的触发事件的选择器元素的后代。

example:

$("button").on('click',function(){

console.log("hello world");

});


2.on(map,[selector], [data]):其中map为事件对象,可以包含一个或多个事件类型。

example:

var map = {

'mouseenter':function(){

$(this).css("border","1px solid red");

},

'mouseout':function(){

$(this).css("border","none");

}

}

$(document).on(map,'img');


通过对比,可以看出.on方法比.bind方法多一个参数'selector',那么这个selector参数的好处是什么?好处就在于.on方法能够动态地为添加的元素也能绑上指定事件。例如通过on(map,'img')这种方法为图片绑定的事件,即使是后来创建出来的图片对象,也会享有此事件处理函数。

                                                                                                                            —— newArray


图片发自简书App
最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 199,519评论 5 468
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 83,842评论 2 376
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 146,544评论 0 330
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 53,742评论 1 271
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 62,646评论 5 359
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 48,027评论 1 275
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 37,513评论 3 390
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 36,169评论 0 254
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 40,324评论 1 294
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 35,268评论 2 317
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 37,299评论 1 329
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 32,996评论 3 315
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 38,591评论 3 303
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 29,667评论 0 19
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 30,911评论 1 255
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 42,288评论 2 345
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 41,871评论 2 341

推荐阅读更多精彩内容

  • 1.JQuery 基础 改变web开发人员创造搞交互性界面的方式。设计者无需花费时间纠缠JS复杂的高级特性。 1....
    LaBaby_阅读 1,316评论 0 2
  • 1.JQuery 基础 改变web开发人员创造搞交互性界面的方式。设计者无需花费时间纠缠JS复杂的高级特性。 1....
    LaBaby_阅读 1,155评论 0 1
  • $(”p”).addClass(css中定义的样式类型); 给某个元素添加样式 $(”img”).attr({sr...
    专注寒冰三千岁阅读 501评论 0 4
  • jQuery是一个快速、简洁的JavaScript框架,是继Prototype之后又一个优秀的JavaScript...
    一木_qintb阅读 986评论 0 4
  • 1.说说库和框架的区别? 库的的概念和意义是用来提供一些方法的集合,避免重复定义相同功能的函数并具有一定的模式兼容...
    我是小韩阅读 216评论 0 1