Javascript添加偵聽器錯誤：TypeError：trigger.addEventListener不是函數

Question

我使用以下代碼將偵聽器添加到一個或多個鏈接中：

 function getData() {
            var context = {};
            context['triggers'] = triggers();
            context['msg'] = msg;
            return context
        }

function triggers() {
            var arr = [];
            document.querySelectorAll('.trigger').forEach(function (trigger, index) {
                arr[index] = {};
                arr[index]['trigger'] = trigger;
            });
            return arr;
        }



function addListeners(data) {
            data.triggers.forEach(function (trigger) {
                trigger.addEventListener('click', change)
            });
        }

data = geData()

觸發器是錨點：

我收到以下錯誤：

TypeError: trigger.addEventListener is not a function

Answer 1

triggers的對象不是錨點，而是包含錨點作為名為trigger的屬性的對象。 所以：

function addListeners(data) {
    data.triggers.forEach(function (entry) {            // *** `entry` instead of `trigger`
        entry.trigger.addEventListener('click', change)
// -----^^^^^^
    });
}

我們知道這是因為以下代碼：

function triggers() {
    var arr = [];
    document.querySelectorAll('.trigger').forEach(function (trigger, index) {
        arr[index] = {};
        arr[index]['trigger'] = trigger;
    });
    return arr;
}

顯然是在創建一個對象，然后將該元素設置為其上的trigger屬性。

---

旁注：您可以在幾個使用字符串的地方使用屬性初始化器和屬性文字語法，而FWIW則可以將map應用於NodeList ：

function getData() {
    return {
        triggers: triggers(),
        msg: msg
    };
}

function triggers() {
    return Array.prototype.map.call(
        document.querySelectorAll('.trigger'),
        function(anchor) {
            return {trigger: anchor};
        }
    );
}

function addListeners(data) {
    data.triggers.forEach(function (entry) {
        entry.trigger.addEventListener('click', change)
    });
}

data = geData();