addeventlistener不起作用
[英]addeventlistener not working
问题描述
(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>
I am using pure javascript to add event listener to the div . 
我正在使用纯JavaScript将事件侦听器添加到div中。
The add event listener not working 添加事件监听器不起作用
Some guys said to me to add the event listener at window.load but i am getting my dom objects here in this javascript. 有人对我说要在window.load中添加事件侦听器，但是我在此javascript中获取了dom对象。 Any help? 有什么帮助吗？
2 个解决方案
解决方案1
1 已采纳 2016-02-19 11:18:35
There is no error in your code. 您的代码没有错误。 you just need to put your code below the DOM. 您只需要将代码放在DOM下即可。
Best place to add your script is before the end of body tag.
For example only I am using script inside html. 仅作为示例，我在html内使用脚本。 You should use script as external file which is best practice. 您应该将脚本用作外部文件，这是最佳做法。
Working Code - 工作守则-
<!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 event will execute your code after DOM is loaded and parsed. DOMContentLoaded事件将在加载和解析DOM后执行您的代码。 so it will not give error. 这样就不会出错。
解决方案2
1 2016-02-19 11:19:03
Your code works. 您的代码有效。 You must run your script after DOM is loaded, or you must write DOMContentLoaded eventListener: 必须在加载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);
}
})();
});
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.