`

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事件函数共4页.pdf.zip

    本篇文章将深入探讨jQuery中的事件函数,帮助开发者更高效地处理用户交互。 一、事件绑定:`$(selector).on()` 在jQuery中,`on()`方法是最核心的事件绑定函数,它可以绑定多种类型的事件。基本语法为: ```...

    jquery事件

    jQuery提供了多种方式来绑定事件处理函数,最常用的是`$(selector).on(event, handler)`。例如,`$("#myButton").click(function() {...})`用于监听ID为`myButton`的元素的点击事件。此外,`bind()`、`live()`(已...

    JQuery事件Demo

    事件处理函数可以接收一个事件对象作为参数,这个对象包含了关于事件的详细信息。例如,`event.target`表示触发事件的元素,`event.preventDefault()`可以阻止默认行为,`event.stopPropagation()`则阻止事件冒泡。 ...

    jQuery事件处理

    如果想解绑特定的事件处理函数,需要提供额外的参数: ```javascript var handler = function() { console.log('事件被触发了'); }; $('#myElement').on('click', handler); // 后来... $('#myElement')....

    jquery.easydrag.handler.beta2.js

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

    深入理解jQuery 事件处理

    随着jQuery库的广泛应用,它提供的事件处理机制简化了事件管理的工作,并且使得事件处理更加高效和便捷。在本文中,我们将深入理解jQuery的事件处理机制,包括事件绑定、命名空间的使用、事件对象的属性、事件处理器...

    jquery下为Event handler传递动态参数的代码

    以上两种方法都是有效的方式,用于在jQuery事件处理中传递动态参数。对于不熟悉这些技术的人来说,这部分知识可能比较难以掌握。但是对于希望深入理解jQuery事件处理机制和提高jQuery使用效率的开发者来说,这些知识...

    为jQuery添加自定义事件机制

    为了实现更复杂的事件机制,可以利用jQuery的`proxy`方法来改变事件处理函数的上下文(`this`关键字指向的对象)。同时,可以使用`off`方法移除已绑定的事件,以避免内存泄漏。 ```javascript var handler = ...

    jquery事件绑定例子

    这里,`selector`是用于选择要绑定事件的元素的jQuery选择器,`event`是想要监听的事件名称(如`click`、`mouseover`等),而`handler`则是当事件发生时要执行的函数。 例如,如果我们想要在点击按钮时显示一条消息...

    [jQuery入门到精通]第5章:事件与事件对象[收集].pdf

    在jQuery中,事件对象会作为参数传递给事件处理函数,这与DOM标准一致,无需像原生JavaScript那样在IE中通过`window.event`或非标准方式获取。例如,处理点击事件的函数可以这样写: ```javascript $(document).on...

    JQuery详解jQuery的bind方法

    - **`handler`**:可选参数,如果提供了这个参数,则只移除特定的事件处理函数。 如果希望根据命名空间来解除绑定,可以通过以下方式: ```javascript $(selector).unbind('.myCustomRoutine'); ``` 这会解除所有...

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

    然后,将当前的事件处理器(`handler`)添加到`handlers`列表中,并将`handleEvent()`函数绑定到目标元素的事件类型上。这样,当事件触发时,`handleEvent()`函数就会被调用。 `removeEvent()`函数的作用是删除指定...

    在ashx中利用反射+jquery轻松处理ajax

    **jQuery** 是一个广泛使用的JavaScript库,它简化了DOM操作、事件处理、动画和AJAX交互。在处理AJAX请求时,jQuery提供了`$.ajax()`函数,可以方便地发送异步HTTP请求,并处理服务器返回的数据。使用jQuery可以使得...

    jQuery源码分析之Event事件分析

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

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

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

    json+jquery+ashx轻量MVC实例.rar

    2. **jQuery的$.getJSON**:在JavaScript中,使用`$.getJSON`来发起一个AJAX请求,其参数通常包括URL(指向ASHX处理程序的路径)、一个回调函数(当数据加载完成时执行)以及可选的设置参数。回调函数接收三个参数,...

    jquery简单用法大全

    jQuery事件处理如`$(element).on('event', handler)`,允许在指定元素上绑定事件处理器。`off()`用来取消事件绑定。 **jQuery工具方法** jQuery还提供了一系列工具方法,如`$.each()`, `$.trim()`, `$.grep()`, `$...

    preg-match绕过-02-jquery常用的事件.ev4.rar

    语法结构为`$(selector).on(event, handler)`, 其中`event`是事件类型(如'click', 'mouseover'等),`handler`是事件触发时执行的函数。 2. `.click()`: 专门用于绑定点击事件,当用户点击元素时触发指定的函数。 ...

    在ashx中利用反射+jquery轻松处理ajax的源码

    "jquery"是一个广泛使用的JavaScript库,简化了DOM操作、事件处理、动画和AJAX交互,使得前端开发更为便捷。"ajax"即异步JavaScript和XML,是一种在不刷新整个网页的情况下,能够更新部分网页的技术,提高了用户体验...

Global site tag (gtag.js) - Google Analytics