使用 ajax 的 Addeventlistener 不能正常工作答案

【问题标题】：Addeventlistener with ajax not working well使用 ajax 的 Addeventlistener 不能正常工作
【发布时间】：2014-01-28 00:52:10
【问题描述】：

我想在 'div' 中显示一个 txt 文件的内容，所以我用一个按钮调用我的函数，但即使我不按下按钮，这些函数也会触发，这是我的 HTML 代码：

<body>
<form>
     <input id="showF" type="button" value= "Show File" />
</form>

 <div id="contaniner" style="background-color:#99FF66;">
 <p>It will show the txt content</p>
 </div>

</body>

还有我的js代码：

 window.onload=function(){
    document.getElementById("showF").addEventListener("click",sacardatos('P1.txt','container'),false);
 }

 function sacardatos(data, idDiv){
     var XMLHttpRequestObject = false;
 if (window.XMLHttpRequest) {
    XMLHttpRequestObject = new XMLHttpRequest();
 } else if (window.ActiveXObject) {
    XMLHttpRequestObject = new ActiveXObject("Microsoft.XMLHTTP");
 }

    if(XMLHttpRequestObject) {
        var objeto = document.getElementById(idDiv);
        XMLHttpRequestObject.open("GET", data);
        XMLHttpRequestObject.onreadystatechange = function(){
            if (XMLHttpRequestObject.readyState == 4 && XMLHttpRequestObject.status == 200) {
                objeto.innerHTML = XMLHttpRequestObject.responseText;
        }
    }
    XMLHttpRequestObject.send(null);
 }
}

【问题讨论】：

标签： javascript html ajax

【解决方案1】：

addEventListener 的第二个参数应该是一个函数。您没有传递函数，而是立即调用该函数并传递结果。改为：

document.getElementById("showF").addEventListener("click", function() {
    sacardatos('P1.txt','container');
}, false);

【讨论】：

这不是我问的问题的重复。我使用的是二阶函数
是的。您在 addEventListener 的参数中调用了 changeStyle，而不是将函数引用传递给 addEventListener。是不是二阶函数也没关系。

【解决方案2】：

您正在调用一个函数，而不是作为匿名方法传入。

window.onload=function(){
    document.getElementById("showF").addEventListener("click" , function(){
        sacardatos('P1.txt','container');
    },false);
}

【讨论】：