`

jquery 事件处理handler函数的参数

阅读更多
jquery 事件处理handler函数的参数


jquery的bind函数说明

在如下的函数中,我们在处理jquery里经常使用:
$( "#foo" ).bind( "click", function() {
  alert( $( this ).text() );
});


click的handler处理函数一般为function(){},不传参数。那么,这个函数可以接收参数么,内置了什么对象,有什么返回值,怎么获得事件绑定的对象?

1、第一个参数event对象,在function函数里,实际上第一个参数是event
引用
The handler callback function can also take parameters. When the function is called, the event object will be passed to the first parameter.


2、事件参数event.data
给handler传递自己需要传入事件处理函数的参数

引用


var message = "Spoon!";
$( "#foo" ).bind( "click", {
  msg: message
}, function( event ) {
  alert( event.data.msg );
});
message = "Not in the face!";
$( "#bar" ).bind( "click", {
  msg: message
}, function( event ) {
  alert( event.data.msg );
});


3、获得事件绑定的DOM元素,
handler的this指向当前事件绑定的元素,大多数情况下,我们需要拿到该DOM元素,以便取值
或改变展示状态,这时该handler函数的this就是该dom元素。
如果不知道,我们一直在用event.target来取当取事件帮定的元素,实际经常取错,因为触发
该事件的event.target可能是实际绑定元素的内部元素,如

<div><p>点击一下</p></div>

如上所示,绑定事件到DIV上,实际P标签也能触发事件,这时event.target对象就不是原来绑定
事件的元素。
偶然发现的this指向绑定的dom原素,不得不佩服john,想得很充分,功能洽到好处。

4、事件传播和返回值
只要返回false,就代表.preventDefault()和.stopPropagation();停止事件传播。
无需再手动调用这再两个函数。
引用

Returning false from a handler is equivalent to calling both .preventDefault() and .stopPropagation() on the event object.


引用

JavaScript领域的神级人物,jQuery、《Pro JavaScript》与《JavaScript Secrets》的作者, Khan Academy计算机科学学院的院长John Resig,John Resig开发jQuery的时候还是大二的学生。

john resig 的对话

现在市面上有大量的JavaScript框架,在各自的官网上都号称是不可被击败的框架,JQuery跟他们相比,真正的优势和特点在哪,大家为什么选择用JQuery呢?
  John Resig认为JQuery最大的优势在于完全关注于DOM,都是找到对象然后控制,在提供这些功能的时候文件大小非常小。比如说现在浏览器提供了各种各样硬件加速,随着浏览器变得越来越好,JS的性能也越来越好。
  有与会者问到:jQuery的开发团队情况?
  John Resig透露:有20多个人。jQuery Core的代码提交者有3个人。大家主要使用Git、github进行合作。
  现场有同学还提了一个有趣的问题,John Resig会不会写起代码来忘我工作,会不会听摇滚乐。Resig回答,会工作到很晚,更喜欢听爵士乐。此外,不少与会者还就很多jQuery开发过程中实践情况与John Resig展开了沟通(付江)

John Resig




  • 大小: 26.6 KB
分享到:
评论

相关推荐

    jquery.easydrag.handler.beta2.js

    所以我们要修改一下源文件jquery.easydrag.handler.beta2.js:找到 function(handlerId) 这个函数, 将里面的$(“#”+handlerId)都改成$(“.”+handlerId)就可以了。好吧,这样就可以了,下面是实例,高手们请 ...

    jQuery动态添加的元素绑定事件处理函数代码

    我当时的处理方法是在添加的时候手工绑定事件处理函数。不过新版的jquery已经添加了这个功能。我们已经不需要为此烦恼了。 参考:http://api.jquery.com/live/ 以前我们定义事件,比如为元素定义单击事件是这样写的...

    浅谈jquery之on()绑定事件和off()解除绑定事件

    off()函数用于移除元素上绑定的一个或多个事件的事件处理函数。 off()函数主要用于解除由on()函数绑定的事件处理函数。 该函数属于jQuery对象(实例)。 语法 jQuery 1.7 新增该函数。其主要有以下两种形式的用法: ...

    jQuery事件的绑定、触发、及监听方法简单说明

    如果你在写文章或者 Demo,为了简单,你当然可以用事件监听函数,以及那些事件对象提供的方法等。但在实际中,有一些方法和属性是有兼容性问题的,所以我们会使用 jQuery 来消除兼容性问题。 下面简单的来说一下 ...

    jquery插件使用方法大全

    ·attribute(改进了.attr()的性能)、jQuery()核心函数、CSS(.css()性能有两倍提升)、特效和事件、DOM操作等也有显著改进 1.5 美国时间1月31日John Resig在jQuery官方博客发表文章,宣布jQuery 1.5正式版已经...

    浅析jquery unbind()方法移除元素绑定的事件

    unbind()方法可以移除元素已绑定的事件,它的...移除当前匹配元素的events事件绑定的事件处理函数handler。 用法二: jQueryObject.unbind( eventObject ) 为指定事件处理函数传入的Event对象,用于移除对应的事件处

    jQuery-Plugin-ToggleAction:一个jQuery插件,它允许绑定事件处理程序,这些事件处理程序将连续执行

    我制作了这个插件来适应jQuery 1.8中对函数的弃用描述将两个或多个处理程序绑定到匹配的元素,以在备用事件上执行。 .toggleAction( eventType [, eventData ], handler ... ) 用法每次单击元素时,将元素的背景...

    jQuery的实现原理的模拟代码 -3 事件处理

    通过注册的匿名函数来执行 jQuery.event.handle ,由于使用了闭包,所以在这个函数中的 this 就是事件源对象,通过这个事件源对象找到对象的私有扩展数据,然后在 events 中找到对应的事件处理程序列表,最后,依次...

    jquery.japanese-input-change:一个jQuery插件,当用日语IME输入的文本更改时,该插件将调用处理程序函数

    一个jQuery插件,当用日语IME输入的文本更改时,该插件将调用处理程序函数 原料药 $(selector).japaneseInputChange(handler) 当文本值从原始值更改时,将调用处理程序。 在IME具有未提交的文本期间,将不会调用该...

    jQuery-1.9.1源码分析系列(十)事件系统之事件体系结构

    又是一个重磅功能点。  在分析源码之前分析一下体系结构,有助于源码理解。实际上在jQuery出现之前,Dean Edwards的跨浏览器AddEvent()设计做... //保证每个不同的事件响应函数只有唯一一个id if (!handler.$$guid)

    jQuery源码分析之Event事件分析

    IE的event在是在全局的window下, 而mozilla的event是事件源参数传入到回调函数中。还有很多的事件处理方式也一样。 Jquery提供了一个 event的包裹,这个相对于其它的lib提供的有点简单,但是足够使用。 代码如下: /...

    jQuery中bind,live,delegate与one方法的用法及区别解析

    eventData为Map类型,给出要传递给事件处理程序的数据,handler指定触发该事件时要执行的函数,eventObject表示事件对象。 .bind()方法将事件处理程序handler附加到匹配元素集合中的每个元素的eventT

    使用jQuery避免鼠标双击的解决方案

    它附加了一个元素事件的处理程序并且每个元素只能运行一次事件处理器函数。 参数 .one( events [, selector ] [, data ], handler(eventObject) ) events 类型: String •规定添加到元素的一个或多个事件。由空格...

    jQuery 源码分析笔记(4) Ready函数

    // 单独在jQuery对象中处理 $(handler); // 以上这个形式的定义: if(jQuery.isFunction(selector) { return rootjQuery.ready(selector); } 因此实际上都归结与一个形式:jQuery.fn.ready(fn)。定义如下: 代码...

    jquery 1.4.2发布!主要是性能与API

    http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js http://ajax.microsoft.com/ajax/jQuery/jquery-1.4.2.min.js 新增方法: .delegate( selector, eventType, handler ) 这个函数的确很有用。...

    jQuery中delegate和on的用法与区别详细解析

    .delegate() 指定的元素(属于被选元素的子元素)添加一个或多个事件处理程序,并规定当这些事件发生时运行的函数。 代码如下:// jQuery 1.4.3+$( elements ).delegate( selector, events, data, handler );// jQuery ...

    读jQuery之十一 添加事件核心方法

    } … } 定义了四个参数elem、types、handler和data分别为HTMLElement、事件类型(如click)、事件响应函数、数据。此外,types 可以以空格分开传多种事件(“mouseover mouseout”)。handler 有时会是一个对象(实现...

    前端笔记.zip

    这个文档包含了HTML/css的一些基础,还有JavaScript中的基础语法、DOM、BOM还有一些学习js中面向对象、和移动web开发、AJAX...答: jQuery.on()方法可以给匹配元素(可以是多个)绑定一个或多个函数, off 可以解除绑定

    SafeProxy:将所有javascript函数设置为“安全”。 函数中的异常不会阻止您的其他代码运行

    例如,在设置事件处理程序时,即使某个事件处理程序失败,您也可能希望其他事件处理程序运行。 // A simple example use case for SafeProxy: // - binding several event handlers to the same event// - you don'...

    jQuery中delegate与on的用法与区别示例介绍

    .delegate() 指定的元素(属于被选元素的子元素)添加一个或多个事件处理程序,并规定当这些事件发生时运行的函数。 代码如下: // jQuery 1.4.3+ $( elements ).delegate( selector, events, data, handler ); // ...

Global site tag (gtag.js) - Google Analytics