如何为ajax和addeventlistener/pushstate函数定义一个变量？ Javascript，不是 jQuery

Question

我正在尝试整理控制台消息：'Var foo is undefined'。定义变量 foo，给我控制台消息：Anonomyous function。这两个在行上是冲突的：foo.addeventlistener。任何对此的帮助将不胜感激，我已经观看了 javascript 教程，到目前为止已经多次，并且搜索了很长时间，但找不到要做什么。

我知道我可以将 foo 定义为我想要的任何东西，但是它应该是什么才能使我的 addevent 函数不是匿名的？还是我需要在此代码中进行其他类型的调整？

var foo = document.getElementsByTagName("li");
function Food(url) {
    var xmlhttp;
    if (window.XMLHttpRequest) { // code for IE7+, Firefox, Chrome, Opera, Safari
        xmlhttp = new XMLHttpRequest();
    } else { // code for IE6, IE5
        xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
    }
    xmlhttp.onreadystatechange = function () {
        if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
            document.getElementById('text').innerHTML = xmlhttp.responseText;
            history.pushState({}, 'foo', url);
        }
    }
    xmlhttp.open("GET", url, true);
    xmlhttp.send();

}

foo.addEventListener('click', function (e) {
    e.preventDefault();
    Food(this.href);
    return false;
}, true);

我不太清楚如何处理这个问题，任何帮助将不胜感激。

Answer 1

给定的 fiddle 根本没有函数 foo。 但据我了解你的问题

var foo = document.getElementsByTagName("li");

foo 是一个 HTMLCollection object，它没有名为 addEventListener 的方法，因此会抛出错误。

您可能应该做的是遍历集合并绑定事件监听器。

例如。

[].slice.call(foo, 0).forEach(function (el) {
    el.addEventListener('click', function (e) {
        e.preventDefault();
        Mat(this.href); // note:: el is li element, not <a> tag
        return false;
    }, false);
});

或者最优雅的方式是将事件委托给一个静态公共父元素

var nav = document.getElementById('cssmenu'); // ensures only one element
nav.addEventListener('click', function (e) {
    var target = e.target;
    // simulate bubbling until captures the required tag
    while (target && target !== this && target.nodeName !== 'A') {
        target = target.parentElement;
    }
    e.preventDefault();
    Mat(target.href);
});

希望对您有所帮助

如何为ajax和addeventlistener/pushstate函数定义一个变量？ Javascript，不是 jQuery

How to define a variable for ajax, and addeventlistener/pushstate function? Javascript, not jQuery

javascript

ajax

pushstate