addeventlistener不起作用

Question

(function() {
var divs = document.getElementsByClassName('data');
var myFunction = function()
{
    alert("hello");
    var el = this;
    var st = window.getComputedStyle(el, null);
    var tr = st.getPropertyValue("transform") ||
     st.getPropertyValue("-moz-transform") ||
     st.getPropertyValue("-ms-transform") ||
     st.getPropertyValue("-o-transform") ||
     st.getPropertyValue("transform") ||
     "Either no transform set, or browser doesn't do getComputedStyle";
     console.log(tr);
}

for (var i = 0; i < divs.length; i++) {
    divs[i].addEventListener('mouseover', myFunction, true);
}
})();



<div class="data">data1</div>
<div class="data">data2</div>
<div class="data">data3</div>
<div class="data">data4</div>

我正在使用純JavaScript將事件偵聽器添加到div中。

添加事件監聽器不起作用

有人對我說要在window.load中添加事件偵聽器，但是我在此javascript中獲取了dom對象。 有什么幫助嗎？

Answer 1

您的代碼沒有錯誤。 您只需要將代碼放在DOM下即可。

添加腳本的最佳位置是在body標簽結尾之前。 使用外部腳本文件而不是內部腳本文件。

僅作為示例，我在html內使用腳本。 您應該將腳本用作外部文件，這是最佳做法。

工作守則-

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
</head>
<body>
    <div class="data">data1</div>
    <div class="data">data2</div>
    <div class="data">data3</div>
    <div class="data">data4</div>

<script>
document.addEventListener("DOMContentLoaded", function() {
  (function() {
    var divs = document.getElementsByClassName('data');
    var myFunction = function()
    {
        alert("hello");
        var el = this;
        var st = window.getComputedStyle(el, null);
        var tr = st.getPropertyValue("transform") ||
        st.getPropertyValue("-moz-transform") ||
        st.getPropertyValue("-ms-transform") ||
        st.getPropertyValue("-o-transform") ||
        st.getPropertyValue("transform") ||
        "Either no transform set, or browser doesn't do getComputedStyle";
       console.log(tr);
  };

  for (var i = 0; i < divs.length; i++) {
    divs[i].addEventListener('mouseover', myFunction, true);
  }
  })();
});
</script>
</body>
</html>

DOMContentLoaded事件將在加載和解析DOM后執行您的代碼。 這樣就不會出錯。

Answer 2

您的代碼有效。 必須在加載DOM后運行腳本，或者必須編寫DOMContentLoaded eventListener：

document.addEventListener("DOMContentLoaded", function(event) { 
    (function() {
        var divs = document.getElementsByClassName('data');
        var myFunction = function()
        {
            //.... Your code
        }

        for (var i = 0; i < divs.length; i++) {
            divs[i].addEventListener('mouseover', myFunction, true);
        }
    })();
});

addeventlistener不起作用

問題描述

2 個解決方案

解決方案1
1 已采納 2016-02-19 11:18:35

解決方案2
1 2016-02-19 11:19:03

addeventlistener不起作用

問題描述

2 個解決方案

解決方案1 1 已采納 2016-02-19 11:18:35

解決方案2 1 2016-02-19 11:19:03

解決方案1
1 已采納 2016-02-19 11:18:35

解決方案2
1 2016-02-19 11:19:03