首頁(yè) 猿問(wèn) JavaScript單擊類上的事件偵聽器

JavaScript單擊類上的事件偵聽器

JavaScript

慕標(biāo)琳琳 2019-07-27 15:15:08

JavaScript單擊類上的事件偵聽器目前，我正在嘗試編寫一些JavaScript，以獲取已單擊的類的屬性。我知道要正確地這樣做，我應(yīng)該使用事件偵聽器。我的代碼如下：var classname = document.getElementsByClassName("classname");var myFunction = function() { var attribute = this.getAttribute("data-myattribute"); alert(attribute);};classname.addEventListener('click', myFunction(), false);我原以為每次單擊其中一個(gè)類來(lái)告訴我屬性時(shí)，都會(huì)收到一個(gè)警告框，但不幸的是，這是行不通的。有人能幫忙嗎？(注 - 我可以很容易地在jQuery但我會(huì)不喜歡用它)

查看完整描述

2 回答

慕的地10843

TA貢獻(xiàn)1785條經(jīng)驗(yàn) 獲得超8個(gè)贊

這應(yīng)該管用。getElementsByClassName返回列陣匹配條件的元素的類似數(shù)組的對(duì)象(請(qǐng)參閱編輯)。

var classname = document.getElementsByClassName("classname");var myFunction = function() {
    var attribute = this.getAttribute("data-myattribute");
    alert(attribute);};for (var i = 0; i < classname.length; i++) {
    classname[i].addEventListener('click', myFunction, false);}

jQuery為您做循環(huán)部分，您需要在普通JavaScript中這樣做。

如果你有ES6支援您可以將最后一行替換為：

    Array.from(classname).forEach(function(element) {
      element.addEventListener('click', myFunction);
    });

注意：舊瀏覽器(如IE6、IE7、IE8)不支持getElementsByClassName所以他們回來(lái)了undefined.

編輯：更正

getElementsByClassName不返回?cái)?shù)組，但大多數(shù)情況下返回HTMLCollection，或者NodeList是一些瀏覽器(Mozilla參考文獻(xiàn))。這兩種類型都類似于數(shù)組(這意味著它們有一個(gè)Length屬性，并且可以通過(guò)它們的索引訪問(wèn)對(duì)象)，但是嚴(yán)格來(lái)說(shuō)，它們不是Array，也不是從Array繼承的。(這意味著不能對(duì)這些類型執(zhí)行其他可以在Array上執(zhí)行的方法)

反對(duì) 回復(fù) 2019-07-28