在javascript中的多元素事件侦听器上下文中实现this.value

在javascript中的多元素事件侦听器上下文中实现this.value,javascript,Javascript,我正在尝试在multiple elements add.EventListener上下文中实现this.value,以激活当前鼠标下的元素上要执行的操作: var i = 0; var max = 500; //ms DELAY MOUSE-IN function time(){ i++; if(i>max/10){ i=0; ELEMENTS = document.getElementsByTagName('div');

我正在尝试在multiple elements add.EventListener上下文中实现
this.value
,以激活当前鼠标下的元素上要执行的操作:

var i = 0;
var max = 500; //ms DELAY MOUSE-IN

function time(){
    i++;
    if(i>max/10){
        i=0;

        ELEMENTS = document.getElementsByTagName('div');
        for(i=0; i<ELEMENTS.length; i++) {        
        document.getElementsByTagName('div')[i].style.height = "100px";    
        }
        clearInterval(interval1);
    }

    ELEMENTS = document.getElementsByTagName('div');
    for(i=0; i<ELEMENTS.length; i++) {
        document.getElementsByTagName('div')[i].innerHTML = i;    
    }

}


window.onload = function(e) {

    ELEMENTS = document.getElementsByTagName('div');
    for(i=0; i<ELEMENTS.length; i++) {

        document.getElementsByTagName('div')[i].addEventListener('mouseover', function(){
            interval1 = setInterval(time, 10); //ms intervalSpeed
        }, false);

        document.getElementsByTagName('div')[i].addEventListener('mouseout', function(){
            clearInterval(interval1);
            i = 0;
            document.getElementsByTagName('div')[i].innerHTML = "0";
            document.getElementsByTagName('div')[i].style.height = "80px";
        }, false);

    }

}
var i=0;
var max=500//ms延迟鼠标输入
功能时间(){
i++;
如果(i>max/10){
i=0;
ELEMENTS=document.getElementsByTagName('div');

对于(i=0;i),需要将事件侦听器回调绑定到当前DOM元素。 否则,这将引用全局范围(浏览器窗口)

从你的例子来看:

var _div = document.getElementsByTagName('div')[i];

_div.addEventListener('mouseout', (function(){
            clearInterval(interval1);
            i = 0;
            this.innerHTML = "0";
            this.style.height = "80px";
        }).bind(_div), false);
    }   
}
差不多吧


编辑:添加了一个JSFIDLE:

似乎很相似,它可能会回答您的问题我是javascript新手,我正在查找您的链接,但我有点难以理解…您能给我举个例子吗?我在回答中添加了一个例子。PS如果它回答了您的问题,请不要忘记接受;)如果您的问题已解决-请接受答案;如果“答案”不在下面,请自己写下来并接受,但不要编辑问题以表示问题已解决。也不要将您的问题用作向个人写信的方式-使用评论。天哪,我忘了删除[resolved]…请注意,我发现了一个问题:mouseout上的i=0不希望被重置…请注意其他注释…在您的JSFIDLE中,鼠标延迟不起作用!请查看我发布的第二个JSFIDLE:我更新了您的示例,改为使用setTimeout:这证明代码起作用,其他问题可能与to无关这个问题的图片没有兄弟,这与我想要的不同…我想要它完全像我的2°示例一样,唯一要做的修改是控件超过1个div!你还需要将'time()'绑定到当前元素,然后:哦,我发现了一个问题!!!每个div都没有重置其计时器…这太糟糕了。。。。