Catch Bound Event In IE

Question

Get Object function name from event list on IE works fine in Chrome btw

Example

var foo = {
 fookeydown:function(e){
   e.which;
   ... do something
 }
}
$(document).on("keydown",foo.fookeydown)
$._data(document,"events").keydown[0].handler.name // return me fookeydown in Chrome 
 but ie is nut

Does my question makes sense? – Munkhdelger Tumenbayar Sep 13 '19 at 04:05 — Munkhdelger Tumenbayar, Sep 13 '19 at 04:05

shrys · Answer 1 · 2019-09-13T07:45:34.007

You are trying to access a function's property function.name, which is not defined for IE. You could try the following implementation to define it (Notice the function name given to the function in foo):

if (!(function f() {}).name) {
  Object.defineProperty(Function.prototype, 'name', {
    get: function() {
      var name = (this.toString().match(/^function\s*([^\s(]+)/) || [])[1];
      Object.defineProperty(this, 'name', {
        value: name
      });
      return name;
    }
  });
}

var foo = {
  fookeydown: function fookeydown(e) {
    console.log(e.which, 'keydown');
    console.log($._data(document, "events").keydown[0].handler.name);
  }
};
$(document).on("keydown", foo.fookeydown);

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

Alternative, searching in foo.fooProp:

var foo = {
  fooProp: {
    foofookeydown: function(e) {
      console.log(e.which, 'keydown');
      console.log($._data(document, "events").keydown[0].handler.name);
    },
    init: function() {
      $(document).on("keydown", this.foofookeydown);
    },
  },
  init: function() {
    this.fooProp.init()
  }
};

if (!(function f() {}).name) {
  Object.defineProperty(Function.prototype, 'name', {
    get: function() {
      var name = '';
      var values = Object.keys(foo.fooProp).map(function(e) {
        return foo.fooProp[e]
      });
      if (values.length > 0) {
        if (values.indexOf(this) > -1)
          name = Object.keys(foo.fooProp)[values.indexOf(this)];
      }
      Object.defineProperty(this, 'name', {
        value: name
      });
      return name;
    }
  });
}

foo.init();

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

Hi it working in this demo but i cant figure it out how to implement on my code which is structure like this just copy paste top of section ? — Munkhdelger Tumenbayar, Sep 13 '19 at 06:26
precisely, whenever you're initiating the dom you can put that code — shrys, Sep 13 '19 at 06:28
@MunkhdelgerTumenbayar you can refer the edited answer where you execute IE related code — shrys, Sep 13 '19 at 06:30
Not quite sure about it but i ended up getting `name : undefined' i put top of my code , on ready not quit working — Munkhdelger Tumenbayar, Sep 13 '19 at 06:54
holy dick i didn't notice you put fookeydown as function name — Munkhdelger Tumenbayar, Sep 13 '19 at 07:28
sorry i forgot to mention regex `.match(/^function\s*([^\s(]+)/) || [])[1]` only when the function has a name and is not anonymous — shrys, Sep 13 '19 at 07:34
Let us [continue this discussion in chat](https://chat.stackoverflow.com/rooms/199404/discussion-between-shrys-and-munkhdelger-tumenbayar). — shrys, Sep 13 '19 at 07:36

Catch Bound Event In IE

1 Answers1