我自己的javascript類和addeventlistener模板不能正常工作

Question

所以我在這裏嘗試使用原生javascript。我試圖實現但未能做到的是爲想要將事件偵聽器添加到div類的場景創建某種快捷方式。

在這裏，我想說：如果用戶點擊一個類，然後顯示一個提醒。

爲什麼我的代碼不工作？

function click(red){ 
    var source = document.getElementsByClassName(red); 
     for (i = 0; i < source.length; i++) { 
      source[i].addEventListener('click', err, false); 
     } 
    function err() { 
    var x = 0; 
    } 
} 

if (click('red')) { 
    alert('rrr'); 
} 

http://jsfiddle.net/y66wh26k/3/

Answer 1

我會用document.querySelectorAll而不是document.getElementsByClassName，因爲它是更通用。

但主要的問題是，你的點擊功能實際上沒有返回任何東西，所以你的if(click('red'))永遠不會執行。同樣，你添加事件監聽器的回調函數也沒有什麼作用。所以我做了一個回調參數，然後傳遞給addEventListener。

function click(selector, callback){ 
 
    var source = document.querySelectorAll(selector); 
 
    for (var i = source.length-1; i >= 0; --i) { 
 
     source[i].addEventListener('click', callback, false); 
 
    } 
 
} 
 
click('.red', function() { 
 
    alert('rrr'); 
 
});

<div class='red'>xxx</div> 
 
<div class='red'>xxx</div> 
 
<div class='red'>xxx</div>