使用Javascript添加事件偵聽器DOM

我無法通過javascript添加eventListener。好的，我有一個創建4個錨元素的函數。我想添加一個事件給他們onmouseover，它調用一個函數來改變他們的背景顏色。下面的代碼（看旁邊createAnchor的最後一行（）來找到相關的代碼行。使用Javascript添加事件偵聽器DOM

function createAanchor(index) { 
      var a = document.createElement("a"); 
      var text = getText(index); 
      var a = document.createElement("a"); 
      var t = document.createTextNode(text); 
      a.href = getHref(index); 
      a.appendChild(t); 
      a.style.textAlign = "center"; 
      a.style.fontSize = "1.2em"; 
      a.style.color = "white"; 
      a.style.fontFamily = "arial"; 
      a.style.fontWeight = "bold"; 
      a.style.textDecoration = "none"; 
      a.style.lineHeight = "238px"; 
      a.style.width = "238px"; 
      a.style.margin = "5px"; 
      a.style.background = eightColors(index); 
      a.style.position = "absolute"; 
      a.addEventListener("onmouseover", changeColor()); 
      return a; 
    } 

    function changeColor() { 
     alert("EVENT WORKING"); 
    }

確定這裏就是問題所在。當函數到達a.addEventListener("onmouseover", changeColor());的function changeColors()執行，但它並不以後執行在onmouseover這是爲什麼？

來源

2013-03-22 Chakotay

P.S.我也嘗試了'a.onmouseover = changeColor（）;'它給出了與'a.addEventListener（「onmouseover」，changeColor（））相同的結果;' – Chakotay 2013-03-22 22:43:54

有沒有這樣的事件onmouseover，該事件被稱爲mouseover。
您必須將函數引用傳遞給addEventlistener。正如你已經注意到的那樣，()調用函數，所以...不要調用它。

這是應該的：

a.addEventListener("mouseover", changeColor);

我建議閱讀quirksmode.org the excellent articles about event handling。

來源

2013-03-22 22:44:04

謝謝你提供一個翔實的答案。雖然我有兩個問題。 1.'mouseover'和'onmouseover'有什麼區別？ 2.函數引用是否僅提及函數的名稱，但沒有參數的括號？ – Chakotay 2013-03-22 22:52:36

1：事件名稱始終沒有「開」。 DOM元素和HTML元素在上具有屬性/屬性，用於分配一些應該在事件發生時執行的代碼。 2：是的，一個函數就像任何其他的值（字符串，數組，布爾）。在'var foo =「bar」;'中，'foo'引用一個字符串。在'function foo（）{}'或'var foo = function（）{};'中，''foo'引用一個函數。 'foo（）'會調用該函數。 – 2013-03-22 22:59:13

再次感謝您提供豐富的答案。我認爲這是一個教育帖子，我接受了你的答案，那麼你會爲我和其他需要關於此問題的信息的用戶提出我的問題？也感謝這篇文章，我會確保閱讀它！ – Chakotay 2013-03-22 23:13:11

這是因爲你寫changeColors()，而不是僅僅changeColors該()告訴JavaScript來調用該函數。

換句話說，changeColors本身是一個參考該功能，而changeColors()是指功能，然後將其稱爲。函數調用的結果（函數的返回值）最終傳遞給addEventListener()。

來源

2013-03-22 22:43:40 Pointy

好的答案謝謝;-) – Chakotay 2013-03-22 23:54:48

-1

我也需要做這樣的事情。我在地圖上有一個infoWindow，我需要處理該infoWindow中段落的點擊事件。所以我這樣做：

google.maps.event.addListener(infoWindow, 'domready', function() 
    { 
     paragraph = document.getElementById("idOfThatParagraph"); 
     paragraph.addEventListener("click", function() 
     { 
      //actions that I need to do 
     }); 
    });

它適合我。所以我希望它能幫助別人:)

來源

2013-12-01 17:05:09

好吧我認爲我們需要了解何時使用前綴「on」與事件類型。在IE 8或更少的IE8中，我們使用attachEvent和detachEvent，它們相當於addEventListener和removeEventListener。這個問題並不需要一些差異。

使用attachEvent時，事件類型的前綴爲「on」，但在addEventListener中不使用前綴。

因此，

elem.attachEvent("onclick",listener); // <= IE8 

    elem.addEventListener("click",listener,[,useCapture]); // other browsers

來源

2014-03-05 07:33:18

使用Javascript添加事件偵聽器DOM

回答

相關問題