如何為ajax定義變量以及addeventlistener / pushstate函數？ Javascript，而不是jQuery

Question

我正在嘗試整理控制台消息：“ Var foo未定義”。 定義變量foo會給我控制台消息：異常函數。 這兩個都在沖突：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

給定的小提琴根本沒有功能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);
});

希望這可以幫助