添加事件處理程序點擊使用特定的選擇器

Question

我想在li選擇器上的文檔上添加事件處理程序。 jQuery中，這將工作：

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

我該怎麼做確切同樣的事情在JavaScript？

Answer 1

嘗試如下。

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元素，設置事件監聽器; element.dataset得到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發生。

它將單個事件綁定到窗口，並檢查事件目標是什麼，如果它發現匹配，它將觸發回調，並將上下文設置爲clicked元素。

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>