jQ Gestion conditionnelle de plusieurs événements séparés

Question

Existe-t-il un moyen de gérer des événements séparés par une condition, sans la vérifier dans chaque fonction de gestionnaire d'événements? C'est à dire. dans le code ci-dessous. Ou peut-être y at-il un moyen de le faire plus pratique? Des pensées/suggestions?

var Obj = function(){ 
 
    var self = this; 
 
    this.initialized = true; 
 
    $(document).on('click', function(){ 
 
    if(self.initialized){ 
 
     alert('hax!'); 
 
     self.initialized = false; 
 
    } 
 
    }) 
 
    $('input').on('mouseenter mouseleave', function(e){ 
 
    if(self.initialized){ 
 
     $(this).attr('class', e.type == 'mouseenter' ? 'hovered' : ''); 
 
    } 
 
    }) 
 
    /*$('...').on(...) etc etc*/ 
 
} 
 
var obj = new Obj()

.hovered{ 
 
    color: red; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<input type='button' value='Click me!'/>

Answer 1

j'ai joué un peu autour et peut-être c'est une solution de travail pour vous:

eventHandlerWrapper = function(state, callback) { 
     return function(e) { 
     if(state.initialized) { 
      return callback.bind(this, e)(); 
     } 
    } 
} 
var Obj = function() { 
    this.initialized = true; 
} 
var obj = new Obj() 

$(document).on('click', eventHandlerWrapper(obj, function(e){ 
    obj.initialized = false; 
})) 

$('input').on('mouseenter mouseleave', eventHandlerWrapper(obj, function(e){ 
    $(e.currentTarget).attr('class', e.type == 'mouseenter' ? 'hovered' : ''); 
})) 

J'ai crée aussi un violon: https://jsfiddle.net/jz17L7h6/

Answer 2

Qu'en est-il:

var Obj = function(){ 
    var self = this; 
    this.initialized = true; 
    $(document).on('click mouseenter mouseleave ', function(e){ 
    if (e.type === 'click'){ 
     alert('click triggered'); 
    } 
    else if (e.type === 'mouseenter' || e.type === 'mouseleave') { 
      alert('mouseenter triggered'); 
    } 

}); 

var obj = new Obj(); 

Answer 3

Pouvez-vous ajouter une autre classe pour votre bouton?

var Obj = function(){ 
    var self = this; 
    self.initialized = true; 
    self.dom = $('<input>').attr('type', 'button').val('Click me!') 
     .data('obj', this) 
     .appendTo($('.container')); 
    /*$('...').on(...) etc etc*/ 
} 

$(document) 
    .on('click', 'input:not(.uninitialized)', function(){ 
    alert('hax!'); 
    $(this).addClass('uninitialized') 
     .data('obj').initialized = false; 
    }) 
    .on('mouseenter mouseleave', 'input:not(.uninitialized)', function(e){ 
    $(this).attr('class', e.type == 'mouseenter' ? 'hovered' : ''); 
    }); 

for (var i = 0; i < 5; i++) { 
    new Obj(); 
} 

https://jsfiddle.net/chukanov/fzez5th2/3/

Si vous ne pouvez pas ajouter une classe, vous pouvez désactiver vos auditeurs

var Obj = function(){ 
    var self = this; 
    self.initialized = true;  
    self.dom = $('<input>').attr('type', 'button').val('Click me!') 
     .appendTo($('.container')); 

    var moveHandler = function(e){ 
     $(this).attr('class', e.type == 'mouseenter' ? 'hovered' : ''); 
    }; 
    var clickHandler = function(){ 
     alert('hax!'); 
     self.initialized = false; 
     self.dom 
      .off('mouseenter mouseleave', moveHandler) 
      .off('click', clickHandler); 
    }; 

    self.dom 
     .on('mouseenter mouseleave', moveHandler) 
     .on('click', clickHandler); 

    /*$('...').on(...) etc etc*/ 
} 

for (var i = 0; i < 5; i++) { 
    new Obj(); 
} 

https://jsfiddle.net/chukanov/fzez5th2/4/

Ou vous pouvez remplacer vos gestionnaires

var Obj = function(){ 
    var self = this; 
    self.initialized = true;  
    self.dom = $('<input>').attr('type', 'button').val('Click me!') 
     .appendTo($('.container')); 

    self.moveHandler = function(e){ 
     $(this).attr('class', e.type == 'mouseenter' ? 'hovered' : ''); 
    }; 
    self.clickHandler = function(e){ 
     alert('hax!'); 
     self.initialized = false; 
     self.clickHandler = function (e) {}; 
     self.moveHandler = function (e) {}; 
    }; 

    self.dom 
     .on('mouseenter mouseleave', function (e) { self.moveHandler.apply(this, arguments); }) 
     .on('click', function (e) { self.clickHandler(e); }); 

    /*$('...').on(...) etc etc*/ 
} 

for (var i = 0; i < 5; i++) { 
    new Obj(); 
} 

https://jsfiddle.net/chukanov/fzez5th2/5/

Mise à jour

Je pense que vous devez séparer les gestionnaires d'événements de souris.

var Obj = function(){ 
    var self = this; 
    self.initialized = true;  
    self.dom = $('<input>').attr('type', 'button').val('Click me!') 
     .appendTo($('.container')); 

    var handlers = { 
     mouseenter: function (e) { 
      $(this).addClass('hovered'); 
     }, 
     mouseleave: function (e) { 
      $(this).removeClass('hovered'); 
     } 
    } 

    var moveHandler = function(e){ 
     handlers[e.type].apply(this, arguments); 
    }; 

    var clickHandler = function(e){ 
     alert('hax!'); 
     self.initialized = false; 
     clickHandler = function (e) {}; 
     moveHandler = function (e) {}; 
    }; 

    self.dom 
     .on('mouseenter mouseleave', function (e) { 
      moveHandler.apply(this, arguments); 
     }) 
     .on('click', function (e) { 
      clickHandler(e); 
     }); 

    /*$('...').on(...) etc etc*/ 
} 

for (var i = 0; i < 5; i++) { 
    new Obj(); 
} 

https://jsfiddle.net/chukanov/fzez5th2/7/