如何为html类添加事件监听器？ [英] How to add event listener for html class?

问题描述

如果我有这样的HTML：

If I have HTML like this:

<a href="#" class="movieImg"><div class="previewBulk"></div></a>
<a href="#" class="movieImg"><div class="previewBulk"></div></a>

和这样的Javascript：

and Javascript like this:

var movie = document.getElementsByClassName("movieImg");
var preview = document.getElementsByClassName("preview");

有没有办法将 addEventListener 改为2电影标签和预览 div 标签？
我尝试循环，但当我做类似的事情：

Is there any way to addEventListener to 2 movie a tag and preview div tag? I try for loop but when I do something like:

for(var i = 0, j=movie.length; i<j; i++){
 movie[i].style.left = 100;
 preview[i].style.left = 100;
}

我得到未捕获的TypeError：无法读取属性的样式'未定义。

将预览更改为previewBulk后，我仍然收到错误，我的代码实际上看起来像这样

(function(){
        var movie = document.getElementsByClassName("movieImg"),
        preview = document.getElementsByClassName("previewBulk");
        //result = [];

        for(var i = 0, j=movie.length; i<j; i++){
            movie[i].addEventListener("mouseover", function(){

                preview[i].style.left = ((movie[i].offsetWidth-preview[i].offsetWidth)/2)+20;
                preview[i].style.top = -(movie[i].offsetHeight+preview[i].offsetHeight);
                preview[i].style.visibility = "visible";
            });

            movie[i].addEventListener("mouseout", function(){
                preview[i].style.visibility = "hidden";
            });
        }
    }());

推荐答案

document.getElementsByClassName 不返回数组。它返回一个遍历XML文件的节点列表。

document.getElementsByClassName does not return an array. It returns a node list which is traversed like an XML file.

    <a href="#" class="movie"><div class="previewBulk"></div></a>
    <a href="#" class="movie"><div class="previewBulk"></div></a>

    <script>

    var movie = document.getElementsByClassName("movie");

    for(var i = 0; i<movie.length; i++){
      movie.item(i).style.width = "100px";
    }​

    </script>

参见jsfiddle： http://jsfiddle.net/Uy5fk/

See jsfiddle: http://jsfiddle.net/Uy5fk/

这篇关于如何为html类添加事件监听器？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！