Javascriptイベントの委任、クリックされた要素の親を処理していますか？

Question

http://jsfiddle.net/walkerneo/QqkkA/

になるだろうされていない要素のためのイベントの委任を使用する方法は、しかし、私が尋ねるまたはJavaScriptでのイベントの代表団との回答されているいずれかのここに多くの質問を見てきましたが、私は見ていましたクリックイベントのターゲット。例えば

：

HTML：

<ul> 
    <li><div class="d"></div></li> 
    <li><div class="d"></div></li> 
    <li><div class="d"></div></li> 
    <li><div class="d"></div></li> 
    <li><div class="d"></div></li> 
    <li><div class="d"></div></li> 
</ul>​ 

CSS：

ul{ 
    padding:20px; 
} 
li{ 
    margin-left:30px; 
    margin-bottom:10px; 
    border:1px solid black; 

} 
.d{ 
    padding:10px; 
    background:gray; 
} 
​ 

私は彼らをクリックしているときli要素を処理するためのクリックイベントを追加したい場合は？私がイベントハンドラをul要素にアタッチすると、divは常にターゲット要素になります。クリック機能でターゲット要素のすべての親をチェックするだけでなく、これをどのように達成できますか？

編集：私はするのではなく、イベントの委任を使用したい

：

var lis = document.getElementsByTagName('li'); 
for(var i=0;i<lis.length;i++){ 
    lis[i].onclick = function(){}; 
} 

しかし、私は行った場合：

document.getElementsByTagName('ul')[0].addEventListener('click',function(e){ 

    // e.target is going to be the div, not the li 
    if(e.target.tagName=='LI'){ 

    } 
},false); 

EDIT：私は使用方法に興味がないんだけどこののJavascriptライブラリ、私は彼らがそれをやっている方法とそれが純粋なjsでやり遂げる方法に興味があります。ここで

Answer 1

はそれを解決する一つの方法です：

var list = document.getElementsByTagName('ul')[0] 

list.addEventListener('click', function(e){ 
    var el = e.target 
    // walk up the tree until we find a LI item 
    while (el && el.tagName !== 'LI') { 
    el = el.parentNode 
    } 
    console.log('item clicked', el) 
}, false) 

これは過度に単純化され、ループでもUL要素を過ぎてツリーを継続します。より完全な例については、rye/eventsの実装を参照してください。

Element.matches,およびNode.compareDocumentPositionのメソッドは、このタイプの機能を実装するのに役立ちます。

Answer 2

私はJavaScriptのオタクではなく、あなたの質問に答えるために（好奇心のためだけに）私はオンラインで時間を過ごしました。数分後に、このような親要素でもイベントを引き起こすことができました例はhereでクリックされた要素

var el=document.getElementsByTagName('ul')[0]; 
el.addEventListener('click',function(e){ 
    var elm=e.target.parentNode; 
    if(document.createEvent) 
    { 
     evt = document.createEvent('MouseEvents'); 
     evt.initMouseEvent("click", false, true, window, 
0, 0, 0, 0, 0, false, false, false, false, 0, null); 
     elm.dispatchEvent(evt); 
     liEventhandler(evt);   
    } 

}); 

function liEventhandler(e) 
{ 
    console.log(e); 
    console.log(e.target); 
    console.log(e.which); 
    alert(e.target.innerHTML); 
} 

の両親を処理するために（代替のアイデアとして、私は適切ではないよ可能性があります）。上記の例

はIEで動作しませんcreateEventObjectとfireEvent

if(document.createEventObject) 
{ 
    var evt = document.createEventObject(); 
    el.fireEvent('onclick', evt); 
    liEventhandler(evt); 
} 

を使用してもe.targetはwindow.eventです。1.comp.lang.javascript2.：ulとターゲットのイベント火災は、私はちょうどli

いくつかの参照にイベントをトリガしましたdivときsrcElementとaddEventListenerは

el.attachEvent('onclick', function(){...}) 

する必要がありますMOZILLA DEVELOPER NETWORKおよび3,this。

Answer 3

closestと呼ばれる要素に関するメソッドがあります。これはまさにこれを行います。これはパラメータとしてCSSセレクタを取り、最も近い一致する祖先を見つけます。これは要素そのものになります。デスクトップブラウザの現在のバージョンはすべてsupportですが、一般的に実稼働環境では使用できません。上にリンクされたMDNページにはポリフィルが含まれています。