jQuery中dom元素上绑定的事件详解

作为技术狂热分子的职业本能，看到一个技术产品的功能，总会忍不住想知道它是怎么被实现的。比如我每每看到别人网站一个很炫的界面或者很酷的功能，就忍不住打开了浏览器的控制台。。。

好，不扯远，说说当你想看到网站上某个元素绑定的事件函数的代码时应该怎么做吧。

查看原生绑定的事件函数代码

所谓原生就是通过addEventListener方法绑定到dom元素上。这个好办：

审查绑定事件的元素（对着它右键->审查元素）在弹出的Elements视图的控制台，右侧点击“Event Listeners”页签然后就能看到所有绑定在该元素的事件了，点开后，找到handler，右击鼠标，选择“Show Function Definition”菜单。就能跳到绑定到该元素的事件函数的源码位置了。有图有真相：

查看jquery绑定的事件函数代码

嗯，我知道，你遇到问题了吧，所有jquery绑定的事件函数，你通过上面的方式，跳到的都是jquery的代码，而且永远是那一个地方。看了跟没看一样。所以，宝哥在这里教你针对jquery的查看方式。

还是审查元素点击“Properties”视图。选择第一个，展开找到一个‘jQueryxxxxx(一串数字)'这样的属性，记住它的值（一般是一个数字）N

然后左侧切到Console视图，在控制台里执行$.cache[N]，这里的N是前面那个属性值

然后就会出来绑定在这个元素上的东西了。展开events，里面就有你想要查看的真实函数了。右击具体事件下的handle后面的function…，然后选择“Show Function Definition”就可以看到了。

例子=》http://demo.sudodev.cn/frontend/jqDetect查看jquery2.x版本绑定的事件函数代码

好的，我知道，你肯定又遇到问题了。因为当你使用的jquery2.x版本的jquery时，上面的这个方法又不work了，原因是2.x的代码架构变了。其实2.x版本的事件仍然是用的cache机制，但不像1.x版本暴露到外面去了，而是封装起来，并且存在了闭包对象data_priv中，而且一般使用的是jquery的压缩版本，这个data_priv名字你也无法查看到。所以在查看过jquery2.x版本的源码后，宝哥教你如何定位它：

直接进入控制台，构造一个包含jQuery的对象，以便在控制台里查看jQuery。比如输入var o={j:$}，这样做的好处是，你执行后能在控制吧里查看jQuery的所有属性

然后在控制台展开jQuery（这里是j）对象，找到_queueHooks这个方法，看到它的代码大概是“return L.get(a,c)||L.access…”这种，记住这个L也可能是不是L）

展开任意一个j下面首层的对象，比如就是上面的_queueHooks，找到展开，再展开下面的Closure,找到前面的那个“L”对句，对着它后面的字母右键，选择“Store as Global Variable”

然后控制台里就打出一个tempX的对象，它就那个装着cache的东东。假设它叫temp1。那个temp1有个get方法可以直接获取它的cache对象。假如你要查看绑定事件的对象的id叫clickMe。那执行temp1.get($('#clickMe').get(0))（或者temp1.get(document.querySelector('#clickMe'))））就会打出跟上面jquery1.x版本相当的东西

后面就跟上面jquery1.x的方式一样例子=》http://demo.sudodev.cn/frontend/jq2Detect另：

以上默认是在chrome浏览器下做的操作，其实在Firefox下也是类似的，相信作为一个技术人员，你应该能举一反三的。至于IE嘛，呃…当我没说哈。:)

更新：

1.为省去查看属性的麻烦，jquery1.x可以直接在控制台执行$.cache[$('#clickMe').get(0)[$.expando]]输出元素上绑定的东西，而不是先去查看元素上jQueryxxxxxxx的属性的值了

2.经过一篇查阅和测试。有一个新的目前最省力而且jquery1,jquery2都适用的办法是，直接在控制台输入$._data($('#clickMe').get(0)),即可把绑定在元素的东西都输出来。但是，从jquery2的源码的注释中发现,$._data会在之后的新版本中废除。所以上面介绍的方法仍然是很有价值的。授人以鱼，不如授人以渔嘛，：）

赞 (0)

相关推荐

  • jQuery给动态添加的元素绑定事件的方法

    本文实例讲述了jQuery给动态添加的元素绑定事件的方法.分享给大家供大家参考.具体分析如下: jquery中绑定事件一般使用bind,或者click,但是这只能是对已经加载好的元素定义事件,那些后来添加插入的元素则需要另行绑定.在1.7版本以前使用live.但是在1.8版本以后推荐使用on.这里介绍jQuery中如何给动态添加的元素绑定事件 在实际开发中会遇到要给动态生成的html元素绑定触发事件的情况 例如 <div id="testdiv"> <ul>&l

  • 浅谈jQuery事件绑定原理

    jq里面有一个data的方法,给dom元素绑定相关的数据的.当给dom用jq的方法绑定了事件,会生成对应的时间列表 可以看下面的例子(请在firefox中查看 因为firefox中对象支持toSource()) 复制代码 代码如下: <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312"

  • 浅谈Jquery为元素绑定事件

    Jquery如何为元素绑定事件,小记一下,防止忘记了! $(this).bind({ click:function(){ window.open(alert('OK')); }, mouseover:function(){ window.open(alert('OK')); }, mouseout:function(){ window.open(alert('OK')); } }); 以上所述就是本文的全部内容了,希望大家能够喜欢.

  • jQuery事件绑定用法详解(附bind和live的区别)

    本文实例分析了jQuery事件绑定用法.分享给大家供大家参考,具体如下: html: <a href="#" onclick="addBtn()">addBtn</a> <div id="mDiv"> <button class="cBtn" onclick="alert(11111)">button1</button> <button cl

  • JQuery调用绑定click事件的3种写法

    第一种方式: $(document).ready(function(){ $("#clickme").click(function(){ alert("Hello World click"); }); 第二种方式: $('#clickmebind').bind("click", function(){ alert("Hello World bind"); }); 第三种方式: $('#clickmeon').on('click

  • jQuery实现按钮只点击一次后就取消点击事件绑定的方法

    本文实例讲述了jQuery实现按钮只点击一次后就取消点击事件绑定的方法.分享给大家供大家参考.具体实现方法如下: <input type="button" id="my-selector" value="只能点击一次" /> <script> $('#my-selector').bind('click', function() { $(this).unbind('click'); alert('Clicked and un

  • jQuery事件绑定on()、bind()与delegate() 方法详解

    啃了一段日子的js相关了,学的过程中发现在jQuery中绑定事件时,有人用bind(),有人用on(),有人用delegate(),还有人用live(),看代码的时候觉得都实现功能了也就掀过去了,只是一直没完全弄懂之间的区别,于是今天查了下资料,自己做个总结. 之所以有这么多类型的绑定方法,是因为jQuery的版本更新的原因,如on()方法就是1.7以后出现的. jQuery的事件绑定api页面上,提到live()方法已经过时,不建议使用.所以这里我们主要就看下以下三个方法:bind().del

  • JQuery中绑定事件（bind()）和移除事件（unbind()）

    有时候事件执行完了,想取消事件的效果可以通过一定的办法来处理.比如bind()(绑定事件)和unbind()(移除通过bind()方法添加的事件)方法来移除事件的效果. 比如下面的一个案例: 复制代码 代码如下: <script type="text/javascript">     $(function(){        $('#btn').bind("click", function(){                      $('#test

  • 解决Jquery向页面append新元素之后事件的绑定问题

    解决Jquery向页面append新元素之后事件的绑定问题

    我先看jq api文档没有找到方法,无果只好到网上找些资料,果然找到live方法. 其实很简单: 1.这是项目要求达到的效果,当我没用live事件,只用了简单的hover事件时:hover事件没有加载进来,没有我想要的边框效果,效果图如下 复制代码 代码如下: /*经过用户技能标签增加样式*/ $(function(){ $(".s-edited").hover(function(){    $(this).toggleClass("borderd"); }) })

  • jQuery实现获取绑定自定义事件元素的方法

    本文实例讲述了jQuery实现获取绑定自定义事件元素的方法.分享给大家供大家参考,具体如下: (function ($) { // 自定义itemtab事件 $.fn.bind = function(types, data, fn) { // 重载jQuery.fn.bind方法,用来截获绑定自定义事件的元素 if(typeof types == 'string' && 'itemtab' == types) { var itemTouchStart = -1; // touchstart

  • jquery单选框radio绑定click事件实现方法

    本文实例讲述了jquery单选框radio绑定click事件实现方法.分享给大家供大家参考. 具体实现方法如下: 复制代码 代码如下: <html> <head> <title>单选框radio绑定click事件</title> <meta http-equiv="content-type" content="text/html;charset=utf-8" /> <script type="

随机推荐