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無法正常工作

回答

相關問題