delegateを仕上げよう - みかづきブログその3

前回つくったデリゲートですが、evt.target がマッチするしか調べていませんでした。

なので、

<div id="room">
    <div class="member" id="no1">清田</div>
</div>

という構造なら問題がありませんが、

<div id="room">
    <div class="member" id="no1"><p>清田</p></div>
</div>

と、ターゲットに子要素があったとき、子要素をクリックしてもイベントが発火しません。
こういったケースでもイベントを発火させたければ、evt.targetの親要素をイベントの張った要素までたどっていく必要があります。

JavaScript

(function(win, doc) {
    
    "use strict";
    
    var room = doc.querySelector("#room");
    
    delegate(room, "click", ".member", function() {
        alert(this.id);
    });
    
    function delegate(parent, eventName, selector, callback) {        
        parent.addEventListener(eventName, function(evt) {
           
            (function checkTarget(target) {
                if (target.matches(selector, parent)) {
                    callback.call(target);
                } else {
                    if (target === parent) {
                        return;
                    } else {
                        checkTarget(target.parentNode);
                    }
                }
            })(evt.target);

        }, false);
    }
    
})(this, document);

DEMO

これでOKですね。今回は以上です。

追記

これでOKじゃなかったので、なおしました。

kimizuka.hatenablog.com