1

次のコードでイベント委任を実装しようとしています:

<html>
<head>
<script>
document.addEventListener('click', function(e){
    alert(e.target.className);
}, false);
</script>
</head>
<body>
<ul class="list">
    <li class="item">A</li>
    <li class="item">B</li>
    <li class="item">C</li>
    <li class="item">D</li>
</ul>
</body>
</html>

イベントをバブリングさせて、<li>アイテムをクリックするとアラートが表示さitemれ、次に別のアラートが表示されるようにしますlist。しかし、このコードはitem. イベントが泡立つように変更するにはどうすればよいですか?

4

5 に答える 5

1

オブジェクトでクリックハンドラーをバインドする場合document、それが複数回呼び出されることを期待することはできません。document（オブジェクトで）一度だけ呼び出されます。

ところで、イベントはDOMツリーをバブルアップします。到達しなかった場合、オブジェクトに到達せず、documentアラートボックスも表示されません。

そのため、イベントはLI要素で発生しdocument、クリックハンドラーが呼び出されるオブジェクトまでバブルします。

ところで、通常、documentオブジェクトまでは委任しませんが、最も近い共通の祖先に委任します。たとえば、LI要素のクリックを処理する場合は、UL要素に委任します。

var list = document.getElementsByClassName( 'list' )[0];    

list.addEventListener( 'click', function ( e ) {
    var item = e.target;

    // handle item click
}, false );

ライブデモ： http： //jsfiddle.net/rCVfq/

于 2012-02-03T19:35:48.630 に答える
1

リストにアラートを出すには、リストにイベントを追加する必要があります。イベントは親オブジェクトによってキャプチャされますが、それらにバインドされたイベントがないため、アラートは発生しません。アラートを出すには、すべてのオブジェクトにイベントを追加する必要があります。

于 2012-02-03T19:40:05.410 に答える
1

イベント コールバックは 1 回だけトリガーされますが、イベントがバブルしないわけではありません。コールバックは、要素そのものがイベントをリッスンするときにのみ実行されます。

祖先にまでさかのぼってアラートをトリガーしたい場合は、コールバックで、祖先のアラートを 1 つずつ追加します。すべての先祖にリスナーを追加する必要はありません。これにより、より多くのメモリが消費されます。

于 2012-02-03T19:47:31.683 に答える
1

このようなことを簡単にするために、小さなイベント委譲ライブラリをリリースしました。http://craig.is/riding/gatorsでチェックしてください

できるよ

Gator(document).on('click', 'li', function() { alert('li clicked!'); });
Gator(document).on('click', 'ul', function() { alert('ul clicked!'); });

これにより、シングル クリック ハンドラーがドキュメントにバインドされ、それに応じてイベントが送出されます。

li伝播を停止しない限り、 をクリックすると両方が起動します。

于 2012-11-28T19:02:50.703 に答える