18

jQuery.on( events , selector , data) メソッドの主な機能を純粋なJavascriptでエミュレートします。

例えば

$(document).on('click','.button',function() {
   console.log("jquery onclick"); 
});

このようなものを作るだけで十分だと思いました

document.addEventListener('click',function(e) {
    if(e.target.className == 'button2') {
         console.log("It works");   
    }
});

ただし、このhtml構造がある場合:

<button class="button2">Hello <span>World</span></button>

span要素でクリック イベントがトリガーされた場合、私のスクリプトe.targetは機能しませんspan。(この質問では、複数のクラスを持つ要素の複雑さとクロスブラウザーの互換性は無視します)

jQueryのソースは読みやすくなく、どのように機能するのかわかりません (jQuery の最初のコード部分が私の html 構造で機能するため)。

私のhtmlは動的で、このクラスのボタンは何度も作成、削除、再作成されるため、このメソッドが必要です。毎回リスナーを追加したくありません。

可能であれば、jquery ライブラリを含めないようにします。

それで、私はこれを行うことができますか？

テスト用のjsFiddleを次に示します。

4

4 に答える 4

11

これは実は驚くほど簡単です。あなたは正しい道を進んでいますが、まだそこにはありません。

私が使用する関数は次のとおりです。

window.addEvent = function(elem,type,callback) {
    var evt = function(e) {
        e = e || window.event;
        return callback.call(elem,e);
    }, cb = function(e) {return evt(e);};
    if( elem.addEventListener) {
        elem.addEventListener(type,cb,false);
    }
    else if( elem.attachEvent) {
        elem.attachEvent("on"+type,cb);
    }
    return elem;
};
window.findParent = function(child,filter,root) {
    do {
        if( filter(child)) return child;
        if( root && child == root) return false;
    } while(child = child.parentNode);
    return false;
};
window.hasClass = function(elem,cls) {
    if( !('className' in elem)) return;
    return !!elem.className.match(new RegExp("\\b"+cls+"\\b"));
};

必要なリスナーwindow.findParentをアタッチする方法を示したときにわかるように、 は全体の中心です。on

window.addEvent(document.body,"click",function(e) {
    var s = window.findParent(e.srcElement || e.target,function(elm) {
        return window.hasClass(elm,"button");
    },this);
    if( s) {
        console.log("It works!");
    }
});
于 2013-02-03T20:43:52.477 に答える
0

簡単で短いコード:

function onEvt(type, callback) {
    if (document.attachEvent) {
        document.attachEvent("on" + type, function (e) {
            callback(e.target);
        });
    } else {
        document.addEventListener(type, function (e) {
            callback(e.target);
        }, false);
    }
}

次のように関数を呼び出します。

onEvt('click', function(elem){ // click, mouseover etc...
    // for class
    if(elem.classList.contains('classname')){
        // do stuff
    }
    // for attribute
    if(elem.hasAttribute('target')){
        // do stuff
    }
});
于 2016-12-08T18:24:36.280 に答える