Events depending on a dynamic variable at jQuery

Question

I'm wondering which would be the proper way to deal with events which depend on the status of a variable.

Right now, I have a listener which it is only added if the option isTablet is set to true. (as if not, it breaks in old versions of IE). So it looks like this:

if(options.isTablet){
    document.addEventListener('touchmove', function(e){
      ....
    });
}

Now, I'm having troubles if I want to change the variable isTablet dynamically with a setter and It won't load the event touchmove .

$.fn.myPlugin.setIsTablet = function(value){
    options.isTablet = value;
}

I guess the simple way is always adding the event and inside it deciding whether or not to execute the code:

document.addEventListener('touchmove', function(e){
    if(options.isTablet){
        ....
    }
});

But throws an error in IE 8:

Object doesn't support property or method 'addEventListener'

What would be the way of doing it? Thanks.

Answer 1

Generally, I would always add the listener and check the condition inside. To avoid your error, since you're using jQuery, just use jQuery:

$(document).on('touchmove', function(e){
    if(options.isTablet){
        ....
    }
});

If you have a handler that is called very often, you could consider turning it off when not needed. Something like this:

function myHandler(e) { ... }

$.fn.myPlugin.setIsTablet = function(value){
    options.isTablet = value;
    if (value) {
        $(document).off('touchmove').on('touchmove', myHandler);
    } else {
        $(document).off('touchmove');
    }
}

Be careful not to bind the handler more than once (like if true is sent to setIsTablet more than once in a row). You could also use a flag instead of unbinding/binding like I've shown.