複数のjQuery .on（）を1つに置き換えます

Question

私はさまざまな機能を持つ動的なプラグインを持っていますが、私はクリックイベントでこれらの機能を起動しています。

マイHTML：

<div class="container"> 
    <div class="el" id="el1"> 
     <a href="#" class="edit-el">Edit</el> 
     <a href="#" class="delete-el">Delete</el> 
    </div> 
</div> 

これは私のjavascriptです：

// Edit an el 
$('.container').on('click', '.edit-el', function(e){ 
    var elId = $(e.currentTarget).closest('.el')[0]; 
    plugin.editEl(elId); 
}); 
// Delete an el 
$('.container').on('click', '.delete-el', function(e){ 
    var elId = $(e.currentTarget).closest('.el')[0]; 
    plugin.deleteEl(elId); 
}); 

質問：それは、このコードを最適化することが可能ですので、私は2人のクリックイベントリスナーを持っていないのですか？

$('.container').on('click', function(e){ 
    var control = e.currentTarget; 
    if (control == '.edit-el') { 
     plugin.editEl(elId); 
    } 
    if (control == '.delete-el') { 
     plugin.deleteEl(elId); 
    } 
}); 

Answer 1

に既存のアプローチに固執することをお勧めいたしますでしょうしかし、私はつもりはないを使用することができます

$('.container').on('click', function(e){ 
    var control = $(e.target); 
    if (control.hasClass('edit-el')) { 
     plugin.editEl(elId); 
    } 
    else if (control.hasClass('delete-el')) { 
     plugin.deleteEl(elId); 
    } 
}); 

Answer 2

は、このコードを試してみてください。これは私が（がを動作していない）を達成しようとしているかのアイデアを与える必要があります。それはhrefあなたは.is()

$('.container').on('click', function(e){ 
    var control = $(e.target); 
    if (control.is('.edit-el')) { 
     plugin.editEl(elId); 
    } 
    else if (control.is('.delete-el')) { 
     plugin.deleteEl(elId); 
    } 
}); 

私が原因separation of concerns原則

Answer 3

だ比較対象の要素を取得します。最適化されたコードでこの質問に答えるには、のコードが既に最適であると思うからです。です。理由は単純なフレーズ - 懸念の分離 - に至りました。 Wikipediaから：コンピュータサイエンスの

、懸念（SoC）のの分離は、各セクションは別々の懸念に対処するように、個別のセクションにコンピュータプログラムを分離するための設計原理です。現時点では

、次の2つの完全に独立した機能の領域があります。

• 要素
• 要素の削除を管理し、イベントハンドラの編集を管理し、イベントハンドラを

同じハンドラの下で両方を持つことによって得られる "利益"は、あなたのコードが少し短くなるということです。その代わりに、2つの完全に異なる機能を1つの手順に組み合わせ、可読性と保守性の両方に影響を与えます。