みかづきブログ その3

3ヶ月つづけてみました。

delegateを仕上げよう

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


delegateをつくろう - みかづきブログ その3

なので、

<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