什么是"jQuery.event.special"?

Ale*_*nik 17 javascript jquery

我是jQuery的新手,我一直在尝试查找bootstrap transition.js(第50行)代码并弄清楚它是如何工作的.我偶然发现了以下情况:

$.event.special.bsTransitionEnd = {
      bindType: $.support.transition.end,
      delegateType: $.support.transition.end,
      handle: function (e) {
        if ($(e.target).is(this)) return e.handleObj.handler.apply(this, arguments)
      }
Run Code Online (Sandbox Code Playgroud)

我已经阅读了文档,但除了以下内容之外,我真的不太了解:

 bindType: // the event you want to bind with 
 delegateType: // the event you want to delegate with
Run Code Online (Sandbox Code Playgroud)

经过一些研究,我发现了以下内容:

这些是转换结束事件的特殊属性,可供以后在transition.js中使用.

我试图通过阅读这篇文章来弄清楚事情,但我想知道的是......什么是$.event.special这条线的使用是 什么?它的常见用法是什么?

PS:我确实在SO上阅读了这个问题,但它有更多的外部链接而不是答案本身.我希望我们能够有一个关于最基本用途的明确的规范问答$.event.special

pot*_*ngs 11

这条线的使用是什么?

我假设你的意思是你问题的第一行代码.它基本上将bsTransitionEnd定义为转换结束事件的别名(转换结束事件可能因浏览器而异 - 这就是transitionEnd()函数的作用:确定浏览器的正确转换结束事件.我在这里使用了webkitTransitionEnd在,但它可能是其他东西,取决于浏览器)

为什么要使用别名?它隔离了Bootstrap使用这个别名附加的任何处理程序(例如$('myBootstrapDialog').on('bsTransitionEnd',Bootstrap的处理程序)来自任何$('myBootstrapDialog').off('webkitTransitionEnd')其他代码(例如,你的代码或可能是另一个库) - 所以Bootstrap过渡结束动画仍然可以工作!

为什么你或其他图书馆会这样做?webkitTransitionEnd是一个标准事件,所以假设您决定将过渡结束动画添加到引导对话框中 - 您可能会执行$('myBootstrapDialog').on('webkitTransitionEnd',您的处理程序)以及稍后您决定删除你应该去的处理程序$('myBootstrapDialog').off('webkitTransitionEnd',你的处理程序),但你把它误编码为$('myBootstrapDialog').off('webkitTransitionEnd') - 这将删除所有转换结束事件: - (.

但是由于Bootstrap使用'bsTransitionEnd'附加了它的处理程序,你可以搞乱引导程序的唯一方法就是做$('myBootstrapDialog').off('bsTransitionEnd') - 不是你会意外做的事情:-).瞧!由于您的一些小错误编码,Bootstrap莫名其妙地停止工作的错误已经一去不复返了.

bindType和delegateType基本上声明bsTransitionEnd是直接附加的转换事件的别名,以及委派的(气泡).句柄基本上是一个过滤函数 - 所有触发的事件基本上都会在调用附加的Bootstrap事件处理程序之前完成(如果它们是)

什么是$ .event.special?

我相信你已经知道了大部分内容 - 这是一种挂钩jQuery的事件处理机制的方法,允许你在页面上的每个附加的点击事件上做大规模的魔术,比如做X(想象一下一个一个,每个并且你附加了一个onclick事件的每一个地方),定义你自己的事件(带有所有泡沫的好处以及随之而来的所有事件),通过修改事件对象等来挂钩和欺骗事件.

它的常见用法是什么?

我认为这是修辞性的:-) - 你已经在Ben Alman博客文章中找到了几个非常好的例子

(释义) - 假设你做了一个AJAX提交并希望禁用页面上的所有点击(你可能不希望用户点击并通过菜单导航到其他页面,或更改复选框等)和$ .event.special.click应该可以帮助你(当然,只是覆盖一个透明/部分透明的div与提交...动画或者什么或者什么也不做任何事情可能更容易/传统 - 毕竟,大多数用户都在等待确保提交成功,至少是正常的:-))

另一个用例是你在bootstrap代码中看到的用例,但是就像你提到的那样,你通常不必进入并使用它,除非你正在编写一个库或者你打算公开发布的东西.