How to check if an event is bound to an element, to prevent duplicate bindings?

Question

I have a function that basically creates an overlay div element that covers the entire page. It also binds a resize event to window so whenever the window is resized the overlay also changes its size:

function stdOverlay() {
    var overlay = $('<div />').css({width : $(window).width(), height : $(window).height()});
    var overlayResize =
    function() {
        $(overlay).css({width : $(window).width(), height : $(window).height()});
    };
    $('body').append(overlay);
    $(window).resize(overlayResize);
    //... other codes,  like remove overlay and unbind the events
    //$('div.stdgui-overlay').unbind('resize', overlayResize);
}

each time the function is called it add's an overlay, if there isn't any, and binds a resize event to the window. It also unbinds the event, when it should remove the overlay event. How can I check, if the overlayResize method is bound to window element, to prevent duplicate bindings? something like:

    if(overlyResize is not bound to window)
        $(window).resize(overlayResize);
    else
        //do something else or do nothing;

There a answer in this page. [jquery check if event exists][1] [1]: http://stackoverflow.com/questions/1515069/jquery-check-if-event-exists-on-element — emaniacs, Jul 28 '13 at 12:57
@emaniacs I've already looked at those answers, unfortunately $.data is not something that one can rely on for long terms, since it is prone to change by jQuery often. See [this](http://stackoverflow.com/questions/1236067/test-if-event-handler-is-bound-to-an-element-in-jquery). — ilgaar, Jul 28 '13 at 14:45

score 5 · Accepted Answer · answered Jul 28 '13 at 12:49

5

You could use a flag, but the easiest would be to just unbind and then rebind the event to make sure it's only bound once :

$(window).off('resize', overlayResize).on('resize', overlayResize);

answered Jul 28 '13 at 12:49

adeneo

312,895
29
395
388

`$(window).off('resize', overlayResize).on('resize', overlayResize);` is a nifty little trick. But how can I use a flag? would you explain a little? – ilgaar Jul 28 '13 at 13:31
I see, but that requires assigning a global variable. Do you think it's a good idea to create global flags like that, just to check if something was done before or not? I'm sure there will be more cases that need to be checked. That means using more flags. Is it a good practice to create functions that depend on global flags to operate? – ilgaar Jul 28 '13 at 13:48
It's an example, you can assign the flag anyway you like, for instance by using jQuery's `data()` method, there's no need for globals really, but it illustrates the functionality better in a small example like that. – adeneo Jul 28 '13 at 14:39

score 0 · Answer 2 · answered Mar 01 '17 at 22:48

The easiest thing is to first unbind and then bind the event handler to this element like mentioned in the accepted answer.

Demo:

(function($) {
  $.fn.hasThisEventHandler = function(_event) { // convention:  event.namespace

    var elemEvents = $._data(this[0], 'events');

    if (elemEvents) {

      var ns = void 0;
      var evtName = _event;

      if (_event.indexOf(".")) {
        var eva = _event.split(".");
        evtName = eva[0];
        ns = eva[1];
      }

      var mm = elemEvents[evtName];

      if (mm && mm.length > 0) {

        if (ns === void 0) {
          return true;
        }

        if (ns) {
          for (var i = 0; i < mm.length; i++) {
            if (mm[i].namespace && mm[i].namespace === ns) {
              return true;
            }
          }
        }
      }
    }
    return false;
  }
}(jQuery));

$(document).on("mousemove.isMouseOverMe", function(e) {});
$("body").click(function() {});

console.log("mousemove.isMouseOverMe eventhandler bound to document: --> " + $(document).hasThisEventHandler("mousemove.isMouseOverMe"));

console.log("click eventhandler bound to body: --> " + $("body").hasThisEventHandler("click"));

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

If you really want to check, the you can use this plugin:

(function ($) {
$.fn.hasThisEventHandler = function (_event) {  // convention:  event.namespace

var elemEvents = $._data(this[0], 'events');

if (elemEvents) {

    var ns = void 0;
    var evtName = _event;

    if (_event.indexOf(".")) {
        var eva = _event.split(".");
        evtName = eva[0];
        ns = eva[1];
    }

    var mm = elemEvents[evtName];

    if (mm && mm.length > 0) {

        if (ns === void 0) {
            return true;
        }

        if (ns) {
            for (var i = 0; i < mm.length; i++) {
                if (mm[i].namespace && mm[i].namespace === ns) {
                    return true;
                }
            }
        }
    }
}
return false;
}
} (jQuery));

How to check if an event is bound to an element, to prevent duplicate bindings?

2 Answers2