特定のセレクタをクリックするとイベントハンドラを追加します

Question

liセレクタのドキュメントにイベントハンドラを追加しようとしています。 jQueryのでは、これは動作します：

$('li').click(function(){ 
    var justify = $(this).attr('data-cid'); 
    alert(justify); 
}); 

は、どのように私はJavaScriptでまったく同じことを行うことができますか？私が正しく理解していた場合にトリックを行う必要があります

Answer 1

を取得するelement.datasetは試してみてください。

var lis = document.getElementsByTagName('li'); 
 

 
for(var i = 0; i < lis.length; i++) { 
 
    (function(i) { 
 
    lis[i].addEventListener('click', function() { 
 
     alert(this.dataset.cid); 
 
    }, false); 
 
    })(i); 
 
}

<ul> 
 
    <li data-cid="1">1</li> 
 
    <li data-cid="2">2</li> 
 
    <li data-cid="3">3</li> 
 
    <li data-cid="4">4</li> 
 
    <li data-cid="5">5</li> 
 
</ul>

Answer 2

使用getElementsByTagNameと

addEventListener。

Answer 3

document.querySelectorAll("li"),for..of loopを使用してli要素を反復し、イベントリスナーを設定できます。次のようにdata-*属性値

for (let li of document.querySelectorAll("li")) { 
    li.addEventListener("click", function() { 
     let justify = this.dataset.cid; 
    }) 
} 

また

var li = [].slice.call(document.querySelectorAll("li")); 

li.forEach(function(el) { 
    el.addEventListener("click", function() { 
     var justify = this.dataset.cid; 
    }) 
}) 

Answer 4

これは、より多くのjQueryを使って何が起こるかのようです。

これは、単一のイベントをウィンドウにバインドし、イベントターゲットが何かを確認するためにチェックします。一致するものが見つかった場合は、コンテキストがクリックされた要素としてコールバックが発生します。

const $ = function(selector) { 
 
    const listeners = {} 
 
    const bindListener = function(event) { 
 
    listeners[event] = [] 
 
    window.addEventListener(event, function (e) { 
 
     // iterate through the subscribed events to find any matching selectors 
 
     const matches = listeners[event].filter(x => e.target.matches(x.selector)) 
 
     if (matches) { 
 
     matches.forEach(x => x.cb.call(e.target, e)) 
 
     } 
 
    }) 
 
    } 
 
    // bind a single event listener to the window for each event type 
 
    bindListener('click') 
 
    bindListener('mouseover') 
 
    // return your api 
 
    return { 
 
    on(event, cb) { 
 
     listeners[event].push({ selector, cb }) 
 
    }, 
 
    off(event, cb) { 
 
     listeners = listeners[event].filter(x => x.cb !== cb) 
 
    } 
 
    } 
 
} 
 

 

 
$('li').on('click', function(e){ 
 
    console.log(this.dataset.cid) 
 
}) 
 

 
$('li:first-of-type').on('mouseover', function (e) { 
 
    console.log('mouseover first li', this.dataset.cid) 
 
}) 
 

 
$('li:last-of-type').on('click', function (e) { 
 
    console.log('clicked last li', this.dataset.cid) 
 
})

<ul> 
 
    <li data-cid="foo">foo</li> 
 
    <li data-cid="bar">bar</li> 
 
    <li data-cid="baz">baz</li> 
 
</ul>