Question

我正在尝试为Fvote和vote-up的所有元素添加一个函数vote-down。

var voteup = document.getElementsByClassName("vote-up");
var votedown = document.getElementsByClassName("vote-down");

function Fvote(upordown,postid) {
    var x=this;
    var xmlhttp = new XMLHttpRequest();
    xmlhttp.onreadystatechange = function() {console.log(xmlhttp.responseText);
            if(xmlhttp.responseText=="error")
                ;
            else{
                /*some JS actions*/;}
    }
    xmlhttp.open("GET", "ajax/vote.php?q=" + postid + "q2="+upordown, true);
    xmlhttp.send();
}

for(var i=0;i<voteup.length;i++)
    voteup[i].addEventListener('click', Fvote("up",voteup[i].getAttribute("data-vote")), false);

for(var i=0;i<votedown.length;i++)
    votedown[i].addEventListener('click', Fvote("down",votedown[i].getAttribute("data-vote")), false);

但是当我加载页面时，它会运行函数Fvote多次作为元素数量的计数，而不会点击任何项目。如果我点击类vote-up或vote-down的项目，则不会调用该函数。我做错了什么？

Answer 1

您可以从函数中获取参数：

var voteup = document.getElementsByClassName("vote-up");
var votedown = document.getElementsByClassName("vote-down");

function Fvote(e) {
    var x = e.target,
        upordown = x.className.indexOf('vote-up') > -1 ? 'up' : 'down',
    //  ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
        postid = x.getAttribute('data-vote');
    //  ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^

    var xmlhttp = new XMLHttpRequest();
    xmlhttp.onreadystatechange = function() {
        console.log(xmlhttp.responseText);
        if(xmlhttp.responseText=="error") {
                /*some JS actions*/
        } else {
                /*some JS actions*/
        }
    }
    xmlhttp.open("GET", "ajax/vote.php?q=" + postid + "q2="+upordown, true);
    xmlhttp.send();
}

for(var i=0;i<voteup.length;i++)
    voteup[i].addEventListener('click', Fvote, false);

for(var i=0;i<votedown.length;i++)
    votedown[i].addEventListener('click', Fvote, false);

Answer 2

你对addEventListener的工作方式有错误的认识。

基本上它注册了一个事件处理程序，它是事件发生时要执行的函数的“地址”。你正在做的是调用函数并在循环中执行它。

这是通常使用的方式：

function handle() {
  alert('An event!');
}

myElement.addEventHandler('click', handle);

请注意，在此片段中，handle不带括号，因此“传入地址”，而不是调用调用。

单击addEventListener而不单击

2 个答案: