(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 对象。 有什么帮助吗？
最佳答案
您的代码中没有错误。你只需要把你的代码放在 DOM 下面。
Best place to add your script is before the end of body tag. Use external script files instead of internal of script.
仅举个例子，我在 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 加载和解析后执行您的代码。所以它不会给出错误。
关于javascript - 添加事件监听器不工作，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/35503825/