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 个答案: