希望查看页面上某一个元素的事件绑定逻辑的话，该怎么办？
举个🌰
在阿里巴巴国际站的SearchBar上
如果想查看红框内元素所绑定事件的逻辑，可能想到的方法可能有哪些呢?
通常想到的方法
控制台输出对应元素绑定的事件
1
getEventListeners(elem) //将输出 Object {mouseover: Array[1], mouseout: Array[1], mousedown: Array[1]}
可以看到在这个元素上面绑定的事件和对应的事件处理函数，但是绑定逻辑并不是我们自己的代码，而是找到了 jQuery 封装的事件
通过开发者工具的 Elements 面板 —— Event Listener
然而通过查看 handler 看到的还是 jQuery 的那层壳，也并不是我们想要的
火狐的开发者版会自动标识出绑定了事件的元素（开发者版本自带的 devTools 甩开 firebug 几条街）
火狐也只是把jQuery的壳找到了
遇到的问题
以上的方法在 JS Library 的封装下都不能顺利找到事件真正的处理逻辑, 下面依次介绍几种可行的解决方案
找到封装后的事件逻辑
查看调用栈按图索骥
人肉活, 不赘述
通过jQuery的私有方法
1 | $._data($('.ui-header-action-rfq')[0], 'events') // $._data() 第一个参数必须是DOM元素，不能传入 jQuery 对象和选择器字符串 |
在返回的对象中找到了时间绑定的处理函数，鼠标浮于handler，右键选择 Show Function Definition，即可跳转至脚本处理逻辑了。
$._data不是公开方法，在1.8 版本之前存在$.fn.data(‘events’)方法直接查看对象绑定的函数，为啥被丢弃请看 http://bugs.jquery.com/ticket/10589
使用 Chome 扩展插件
jQuery Audit 可以方便我们在页面暴露出jQuery全局变量时方便地调试jQ代码, 查看事件逻辑也不是难事!
如图：选中元素，右侧面板直接查看，爽歪歪
