如何调试jQuery$.proxy事件侦听器？

技术

我正在使用jQuery1.9.1和twitter引导程序2.3.1

上下文

我目前正面临twitter引导程序typeahead插件中的一个错误，它阻止您在打开“自动完成”下拉列表时在输入[type=“text”]中输入“&”字符（与符返回键码38，向上箭头为键码38）

我希望能够查看附加到输入[type=“text”]的所有事件，并找出导致问题的原因

问题

// bootstrap typeahead plugin
// bootstrap.js:2126
this.$element
  .on('focus',    $.proxy(this.focus, this))
  .on('blur',     $.proxy(this.blur, this))
  .on('keypress', $.proxy(this.keypress, this))
  .on('keyup',    $.proxy(this.keyup, this))

// bootstrap.js:2171
move: function (e) {
  if (!this.shown) return

  switch(e.keyCode) {
    case 9: // tab
    case 13: // enter
    case 27: // escape
      e.preventDefault()
      break

    case 38: // up arrow
      e.preventDefault()
      this.prev()
      break

    case 40: // down arrow
      e.preventDefault()
      this.next()
      break
  }

  e.stopPropagation()
}

代理方法返回一个具有给定上下文的新函数，因此很难进行调试

我在Chrome中找到的东西对我一点帮助都没有

// Get event listeners on element
getEventListeners($('[name="searchTerm"]')[0])

// Get the keydown event to see what's going on
getEventListeners($('[name="searchTerm"]')[0]).keydown[0].listener

// Returns
function (a){return typeof f!="undefined"&&(!a||f.event.triggered!==a.type)?f.event.dispatch.apply(i.elem,arguments):b}

// <function scope> points back to the function above
// ['<function scope>'] is an example
getEventListeners($('[name="searchTerm"]')[0]).keydown[0].listener['<function scope>']

//获取元素上的事件侦听器
getEventListeners（$（'[name=“searchTerm”]'）[0]）
//获取keydown事件以查看发生了什么
getEventListeners（$（'[name=“searchTerm”]'）[0]）.keydown[0]。listener
//返回
函数（a）{return typeof f！=“undefined”&（！a | | f.event.triggered！==a.type）}f.event.dispatch.apply（i.elem，参数）：b}
//指向上面的函数
//[“”]就是一个例子
getEventListeners（$（'[name=“searchTerm”]'）[0]）.keydown[0]。listener[']

我在jQuery中找到了什么-帮助我很尴尬？

// Get event listeners on element
// $element.data('events') is no longer supported. version >= 1.8
$._data($('[name="searchTerm"]')[0], 'events')

// Get the keydown event to see what's going on
$._data($('input.search-query.span2')[0], 'events').keydown[0].handler

// Returns
function (){return a.apply(c,f.concat(F.call(arguments)))}

// <function scope> points to the correct function
// ['<function scope>']['Closure']['a'] is an example
$._data($('input.search-query.span2')[0], 'events').keydown[0].handler['<function scope>']['Closure']['a']

// Returns
function (e) { this.suppressKeyPressRepeat = ~$.inArray(e.keyCode, [40,38,9,13,27]) this.move(e) }

//获取元素上的事件侦听器
//$element.data（'events'）不再受支持。版本>=1.8
$.\u数据（$（'[name=“searchTerm”]'）[0]，'events'）
//获取keydown事件以查看发生了什么
$.\u数据（$（'input.search query.span2'）[0]，'events'）.keydown[0]。处理程序
//返回
函数（）{返回a.apply（c，f.concat（f.call（arguments）））}
//指向正确的函数
//['']['Closure']['a']就是一个例子
$._数据（$（'input.search query.span2'）[0]，'events'）.keydown[0]。处理程序[''']['Closure']['a']
//返回
函数（e）{this.suppressKeyPressRepeat=~$.inArray（e.keyCode[40,38,9,13,27]）this.move（e）}

问题

是否仍然可以从javascript函数中获取和上下文

有没有更简单的方法来调试使用jQuery在DOM元素上激发的$.proxy事件侦听器

是否有更好的方法调试这些事件

您可以尝试显示jQuery事件处理程序的。 Firefox每晚都有一个。

您可以尝试显示jQuery事件处理程序的。

---

Firefox每晚都有一个.

为什么不能在引导typeahead文件中放置断点，并使用开发者工具栏调试方法执行。据我所知，typeahead源代码将具有类似于

focus

和

keydown

的方法。我也不明白为什么

$。代理

会使debug@ArunPJohny你可以，但我有一个网站，有50多个不同的js文件，大约一半的javascript是内联的。如果我已经知道问题出在哪里，我可以在那里设置断点，但我没有。我想“发现”问题的原因。@ArunPJohny$。代理使用您传递的上下文范围创建一个闭包。这个过程掩盖了原始功能的明显性。返回不同的$（'body'）。单击（函数（）{}）；签名大于$（'body'）。单击（$.proxy（函数（）{}，this）试试看这里的答案：为什么不能在bootstrap typeahead文件中放置断点并使用开发者工具栏调试方法执行。从我所看到的typeahead源代码将有像

focus

和

keydown

这样的方法。我也不明白为什么

$.proxy

会使方法执行变得困难debug@ArunPJohny你可以，但我有一个网站，有50多个不同的js文件，大约一半的javascript是内联的。如果我已经知道问题出在哪里，我可以在那里设置断点，但我没有。我想“发现”问题的原因是什么。@ArunPJohny$。代理使用您传递的上下文的作用域创建一个闭包。此过程屏蔽原始函数的外观。返回不同的$（'body'）。单击（函数（）{}）；签名而不是$（'body'）。单击（$.proxy（函数（）{}，此）-请尝试在此处查看答案：这将只显示jQuery.proxy的代码，而不是代理函数代码。@JohanFredrikVaren否，它显示的是实际的事件处理程序，而不是jQuery代理代码，请参阅只显示jQuery.proxy的代码，而不是代理函数代码的部分。@JohanFredrikVaren否，它显示的是实际的事件处理程序，而不是jQuery proxy代码，请参阅