addEventListnener（click）在頁面加載時觸發

我可能......現在，但爲什麼當我的頁面加載時此代碼記錄hello x2，而點擊LI-element時什麼都沒有？它應該記錄被點擊的元素名稱。如果我將「hello」改爲e.target，它會記錄HTMLDocument？！addEventListnener（click）在頁面加載時觸發

謝謝。

<!DOCTYPE html> 
<html> 
    <head> 

     <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0" /> 
     <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 

     <script type="text/javascript"> 

      window.onload = function(){ 
       var list = document.getElementById("listan"); 

       list.addEventListener("touchstart", elementClicked(event), false); 
       list.addEventListener("click", elementClicked(event), false); 
      } 

      function elementClicked(e) { 

       console.log("hello"); 

       if(e.target && e.target.nodeName == "LI") { 

        console.log(e.target.nodeName); 
       } 

      } 

     </script> 


     <style> 

      * { 
       list-style: none; 
       margin: 0; 
       padding: 0; 
       box-sizing: border-box; 
      } 

      li { 
       width: 90%; 
       background: darkblue; 
       color: #eee; 
       margin: 10px auto; 
       padding: 15px; 
       border: 1px solid black; 
       text-align: center; 
       font-family: calibri; 
       cursor: pointer; 
      } 
      ul { 
       background: green; 
       padding: 10% 0; 
      } 

     </style> 

    </head> 
    <body> 
     <ul id="listan"> 
      <li>apa</li> 
      <li>häst</li> 
      <li>ko</li> 
      <li>elefant</li> 
      <li>lejon</li> 
      <li>zebra</li> 
      <li>myrslok</li> 
      <li>grävling</li> 
     </ul> 
    </body> 
</html>

來源

2012-11-27 tobbe

對於這些：

list.addEventListener("touchstart", elementClicked(event), false); 
list.addEventListener("click", elementClicked(event), false);

要被傳遞的實際功能，elementClicked，所以只需使用：

list.addEventListener("touchstart", elementClicked, false); 
list.addEventListener("click", elementClicked, false);

來源

2012-11-27 16:14:23 Xymostech

作品，謝謝！但爲什麼我不得不發送事件的功能？以及如果我想用該函數發送另一個變量會發生什麼？ – tobbe

'addEventListener'函數使用單個參數（事件）調用您給它的函數。您不「使用該功能發送事件」。如果要發送另一個變量，則必須使用lambda函數或返回另一個函數的函數。 – Xymostech

addEventListnener（click）在頁面加載時觸發

回答

相關問題