A brief discussion on jQuery event source code positioning

A brief discussion on jQuery event source code positioning_jquery

WBOY

Release： 2016-05-16 16:43:59

Original

1368 people have browsed it

Yesterday someone in the group asked a question about event source code location. A brief description is as follows.

How can I quickly locate the event code bound to a page that I did not write? (The page uses jQuery)
This problem is not difficult to say, but it is not that simple to say. It will be more troublesome if delegation is used.

There is Event Listeners in the chrome console, which will display the events of the element you selected. If it is a native event, it will be displayed directly,
When you click on an event, it will jump to the corresponding code, but the event bound to jQuery is not like this. After you click, it will only jump to the jQuery source code,
The jQuery source code after min is so dense that it’s dizzying to look at it.

Regarding jQuery’s event management, the experts have also analyzed it very thoroughly. I won’t go into details because it is not the focus of what we want to talk about today.
The key point we want to talk about is how to locate the event source code. Because there are many versions of jQuery and it has been refactored many times, we have to explain it on a case-by-case basis.

Basically, there are two cases: 1.2.6-1.8 and 1.9. After testing, it is generally determined to be the following two versions
1.2.6-1.8 Use $.data(elem, "events", undefined, true);
1.9 Use $._data( elem, "events" );

PS: You can now press F12 to open the console to see the results. Of course, you can also copy the source code below to test it yourself.
Because Google was severely blocked, I changed the CDN to Baidu's. 2014-06-07

<!doctype html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>test</title>
  <script src="http://libs.baidu.com/jquery/1.4.0/jquery.js"></script>
</head>

<body>
  <input type="button" id="testbtn" value="testbtn" />
  <script>
    var version = ["1.2.6", "1.3.0", "1.4.0", "1.5.0", "1.6.0", "1.7.0", "1.8.0", "1.9.0", "1.10.0"],
      elem = $("#testbtn")[0], // 待操作的元素
      url, // jquery 地址
      jq = null, // 保存新的jquery句柄
      jqver, // jqury 版本
      fn; // 函数句柄

    for (var i = 0; i < version.length; i++) {
      url = "http://libs.baidu.com/jquery/" + version[i] + "/jquery.min.js";

      $.getScript(url, function() {
        jq = $.noConflict(true); // 释放控制权
        jqver = jq.fn.jquery; // 当前 jquery 版本
        fn = new Function('ver_' + jqver.replace(/\./g, "_"), ''); // 生成类似 function (ver_1_9_0) {} 这样的函数
        jq(elem).click(fn).click(fn).bind("test", fn); // 普通事件和自定义事件

        console.log(
          jqver,
          jq.data && jq.data(elem, "events", undefined, true),
          jq._data && jq._data(elem, "events")
        );
      });
    }
  </script>
</body>
</html>

Copy after login

If nothing else, you can see the display result like this on the console

After expansion, you can see that the version in the bound function parameters corresponds to the current version.

can be seen
1.2.6-1.4 only supports $.data(elem, "events", undefined, true);
1.5-1.8 Both supported
1.9-1.11 only supports $._data( elem, "events" );

Then we can write a simple function to make it compatible, and then it will be fully compatible

function lookEvents (elem) {
  return $.data &#63; $.data( elem, "events", undefined, true ) : $._data( elem, "events" );
}

Copy after login

Now call lookEvents to get the corresponding events object.

Although we can see the custom event we bound, we still don’t know which file and line it is in.

Now let’s locate his specific position. Let’s try it with 1.7.
PS: The following operations are all done in the console. My environment is chrome 34

function lookEvents (elem) {
  return $.data &#63; $.data( elem, "events", undefined, true ) : $._data( elem, "events" );
}
var event = lookEvents($("#testbtn")[0]); // 获取绑定的事件
event.click[0].handler // 获取click事件的第一个事件源码地址

Copy after login

Copy to the console and press Enter to run. As expected, you will see the following result.

Did you see 1.html:36 in the lower right corner? This is the file where the source code is located and the corresponding line number.
You can directly click 1.html:36 to jump to the corresponding code. Isn’t it very powerful?

The above method is suitable for jQuery version 1.5. For versions 1.2.6-1.4, it is slightly different, but it is also very simple.

function lookEvents (elem) { return $.data ? $.data( elem, "events", undefined, true ) : $._data( elem, "events" );}var event = lookEvents($("# testbtn")[0]); // Get the bound event event.click; // Check how many click events there are. If you want to check other events, just enter event and press Enter

The coding seen above corresponds to the event handle. For example, my 1, 2 events (as shown in the figure below), these numbers are not in order, so you should pay attention to this.
event.click[1] // Get the event source code address of the click event whose id is 1
Not surprisingly, you can see the following result.

In terms of operation, both versions 1.2.6-1.4 and 1.5 are almost the same, except that version 1.5 uses array mode to manage function handles, which is more convenient.
Okay, that’s all that needs to be said, let’s start testing various things, friends.