jQuery的"特别事件"扩展
2010-08-18 10:00
459 查看
特别事件
翻译自http://brandonaaron.net/blog/2009/03/26/special-events原作者:Brandon Aaron
jQuery自1.2.2版开始引入称为"特别事件"的扩展API。These events are special because they have the ability to do some extra work for specific events and even the option to bypass some of the internal jQuery event system. 有了这些特别事件你可以创建需要一些setup work的自定义事件,甚至你可以完全重载标准jQuery事件的行为。
We use special events in jQuery to create the “mouseenter” and “mouseleave” events. In addition to those two events we used it to make the “ready” event and I use it to normalize the “mousewheel” event in the mouse wheel plugin.
一个例子: “tripleclick”三次点击
我们打算建立一个新事件,该事件当用户对某个元素点击三次以后触发。传统上我们应该建立类似jQuery.fn.tripleclick这样的jQuery插件. 但在这里我们不这么做, 我们想要利用标准jQuery事件系统的bind语法及其它好处比如event normalization, data, and namespaces.首先我们要建立这个特殊事件。每个特殊事件需要定义
setup和
teardown方法。方法
setup在事件被bind时调用而方法
teardown则在解除bind时调用。注意:这两个方法对每个元素只会被调用一次,因为jQuery事件系统会管理多次bind的事件处理器等所有繁琐的事情。
In jQuery 1.3 there is a new special event type called “Special All” that operates for all handlers but has a slightly different behavior. However, that is for another article.(这个特性已经被取消,不应该再使用Special All了,可以改用add/remove钩子,参见最后的延伸阅读部分)
我们的“tripleclick”插件大概骨架如下:
jQuery.event.special.tripleclick = { setup: function(data, namespaces) { var elem = this; }, teardown: function(namespaces) { var elem = this; } };
[/code]
Notice that the
setupevent gets passed the data and namespaces that were used when binding the event. Also that the
teardownevent gets passed the namespaces that were used when unbinding the event. Although, they are only marginally useful here since this is the data and namespaces associated with the very first event handler bound to a particular element. But you could use the data to configure the event for all the handlers of that type for an element. The scope, or the value of
this, for these two methods is the element the event is being bound to.
Behind the scenes we are actually going to utilize the native “click” event to keep track of the number of clicks on an element. We’ll also need a handler that actually does the heavy work of keeping track. I’m going to add a third method called
handlerto the
tripleclickspecial event. To make the code a little more simple I’m going to track the number of clicks on an element by using the jQuery data API.
The updated
tripleclickspecial event looks like this.
jQuery.event.special.tripleclick = { setup: function(data, namespaces) { var elem = this, $elem = jQuery(elem); $elem.bind('click', jQuery.event.special.tripleclick.handler); }, teardown: function(namespaces) { var elem = this, $elem = jQuery(elem); $elem.unbind('click', jQuery.event.special.tripleclick.handler); }, handler: function(event) { var elem = this, $elem = jQuery(elem), clicks = $elem.data('clicks') || 0; clicks += 1; if ( clicks === 3 ) { clicks = 0; // set event type to "tripleclick" event.type = "tripleclick"; // let jQuery handle the triggering of "tripleclick" event handlers jQuery.event.handle.apply(this, arguments) } $elem.data('clicks', clicks); } };
[/code]
To quickly break down the handler code. First we get the number of clicks via the data API and increment the number by 1. Then we check to see if it has been clicked 3 times. If so, we then need to reset the number of clicks and trigger the other event handlers as the comment indicates. Finally, we store the new value for the number clicks on the element via the data API.
The handler has to set the event type to “tripleclick” because behind the scenes we actually use a click event. jQuery uses the event type to know which handlers it should call and we want it to call the event handlers for our “tripleclick” event.
The Example
We can now use our special event just like we’d use any other event via thebindmethod. For example to bind a “tripleclick” event to all divs we’d write the following code.
jQuery('div').bind('tripleclick', function(event) { alert('triple clicked'); });
[/code]
You can see an example of this new special event in action here.
You could enhance this event by requiring all three clicks to be within a certain timeframe. You could achieve this by also storing the
event.timeStampproperty of the previous click and comparing the distance between it and the latest click.
返回值
前面我说过特别事件能够bypass到内部的jQuery事件系统。The functionality that can be skipped is the actual binding of the event to the element using theaddEventListeneror
attachEventmethods. This functionality is skipped based on the return value. 返回任何非
false的值会阻止jQuery将该事件通过DOM实际bind到元素上。换句话说,如果从方法setup和
teardown中
return false的话,jQuery将调用DOM API将事件bind到元素上。在我们的tripleclick插件中,我们不希望在元素上bind这个"tripleclick"事件(并不存在这样的DOM事件),所以我们没有返回任何值(就是说,返回了undefined)。
延伸阅读
jQuery 1.4为特别事件新增的add和remove钩子: http://brandonaaron.net/blog/2009/06/4/jquery-edge-new-special-event-hooksAutomating with Special Events: http://brandonaaron.net/blog/2009/06/17/automating-with-special-events
Special Events: The changes in jQuery 1.4.2: http://brandonaaron.net/blog/2010/02/25/special-events-the-changes-in-1-4-2
相关文章推荐
- jQuery的"特别事件"扩展
- jquery $("form").submit事件实例
- 当使用JQuery的"$",抛异常Uncaught TypeError: Object #<Object> has no method 'ajax'
- "棱镜门事件"的思考:黑客是什么,如何成为黑客?[更新:2015-05-09]
- "开源框架完美组合之Spring.NET + NHibernate + ASP.NET MVC + jQuery + easyUI 中英文双语言小型企业网站Demo"项目分析
- jquery编写web页面头部分类的选中事件$.cookie("currentIndex", index, { path: '/'});
- "AJAX与服务端事件"理解
- Jquery中的事件绑定$("#btn").bind("click",function(){ })
- jquery 获取页面点击事件 $("body").click()
- 使用JavaScript或Jquery获取标准下拉框的"选中值"和"选中文本"
- 使用用JavaScript或Jquery获取标准下拉框的"选中值"和"选中文本"
- error PRJ0019: 工具从"正在执行生成后事件..."
- C#的委托与Delphi中的"事件委托"
- 数据窗口用键盘上的"上下方向"键移动选中行, selectrow函数触发rowfocuschanged事件
- "爱说说"技术原理:与TXT交互及MDataTable对Json的功能扩展(二)
- C#的委托与Delphi中的"事件委托"
- "男子看守所受伤"事件衍生网络流行语"躲猫猫" “李乔明之死”的真相是否在和我们“躲猫猫”?
- jquery同一标签绑定多个事件的几种方式 && js实时监听input中值变化
- jquery事件绑定$('.next')bind("click",function(){ });和$(".next").live("click",function(){});
- jquery filter使用""和''效果是一样的