addeventlistener无法正常工作

(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。addeventlistener无法正常工作

添加事件监听器不工作

一些人对我说在window.load添加事件侦听器，但我得到我的DOM对象在这里这个JavaScript。有什么帮助吗？

来源

2016-02-19 Master Yoda

事件侦听工作对我来说，看到这个小提琴：https://jsfiddle.net/1n546pkx/请澄清一下被打破。 – Dominik

代码中没有错误。你只需要把你的代码放在DOM之下。

添加脚本的最佳位置是在body标签结束之前。使用外部脚本文件而不是脚本内部。

例如只有我在html中使用脚本。您应该使用脚本作为最佳实践的外部文件。

工作守则 - DOM被加载和解析后

<!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事件将执行代码。所以它不会给出错误。

来源

2016-02-19 11:18:35 murli2308

是的，它的工作，但你可以告诉我为什么var var'var divs = document.getElementsByClassName（'data'）;'给我dom对象，然后 –

它是一个选择器方法，它将只返回dom对象。请参阅规范的更多详细信息 - https://dom.spec.whatwg.org/#dom-document-getelementsbyclassname – murli2308

不，不，我想问为什么它返回的dom对象调用脚本之前它是关于html –

您的代码有效。加载DOM后，必须运行脚本，或者你必须写 DOMContentLoaded事件监听：

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); 
     } 
    })(); 
});

来源

2016-02-19 11:19:03 PiraTa

addeventlistener无法正常工作

回答

相关问题