同じ機能を持つ複数のイベントを使用する

Question

私のコードをクリーンアップしようとしています。このコードを書く方が良いかどうか疑問に思っていますか？

$('.popUp-block').on("click",function() { 
    $('.protect-field-container').removeClass('is-displayed'); 
    $(this).closest('.protect-field-container').addClass('is-displayed'); 
}); 

$('.popUp-block').hover(function() { 
    $('.protect-field-container').removeClass('is-displayed'); 
    $(this).closest('.protect-field-container').addClass('is-displayed'); 
}); 

$('.popUp-block').focusout(function() { 
    $('.protect-field-container').removeClass('is-displayed'); 
}); 

$('.popUp-block').on("mouseout", function() { 
    $('.protect-field-container').removeClass('is-displayed'); 
}); 

Answer 1

を簡単な方法で、あなたは.on()でそれを行うことができます：私は以下の私のコードのスニペットを追加しました

$('.popUp-block').on("click mouseover",function() { 
    $('.protect-field-container').removeClass('is-displayed'); 
    $(this).closest('.protect-field-container').addClass('is-displayed'); 
}); 

$('.popUp-block').on("mouseout focusout", function() { 
    $('.protect-field-container').removeClass('is-displayed'); 
}); 

docsから：

つまたはさらにスペース区切りのイベントタイプと任意の名前空間（"click"または"keydown.myPlugin"など）。