努力将事件侦听器添加到数组或节点列表

Question

我有一个对象confBtns，其中包含基于以下html的两个按钮：

<footer>
  <button id="authCreateAcctConfirmNoBtn" class="button2">
    No
  </button>
  <button id="authCreateAcctConfirmYesBtn" type="submit" class="red-button">
    Yes
  </button>
</footer>

我想要的是，当有人单击这些按钮中的任何一个时，然后通过如下函数输入“是”或“否”：

dataLayer.push({
    "event":"ButtonBlur",
    "elementText": /*What goes here to grab Yes or No depending which blurred? */
}); 

我可以只编写两个单独的脚本，然后向每个按钮添加一个事件侦听器，如下所示：

document.querySelectorAll("#authCreateAcctConfirmYesBtn")[0].addEventListener("blur", 
    dataLayer.push({
        "event":"ButtonBlur",
        "elementText": "No"
    )}
); 
);

然后对于“是”按钮也是如此。

但是我该如何做呢？

我曾尝试根据自己的需要调整此 SO职位，但我正在转动轮子。 这是我在控制台中尝试的操作：

var confBtns = document.querySelectorAll("#authCreateAcctConfirmYesBtn,authCreateAcctConfirmNoBtn");

btnPush = function() {
    dataLayer.push({
        "event":"ButtonBlur",
        "elementText": /*What will go here to be Yes or No?*/
    })
};

function addEventListenerConfBtns (btns, event, fn) {
    for (var i = 0, len = btns.length; i < len; i++) {
        btns[i].addEventListener(event, fn, false);
    }
}

addEventListenerConfBtns(confBtns, "blur", btnPush);

所以我真的有两个问题：

1. 如何使我的功能正常工作？
2. 如何动态地为“ elementText”的值传递“是”或“否”？

当我在控制台中运行此命令时，我只会得到“ undefined”。 我希望能够单击然后使按钮模糊，然后在控制台中查看dataLayer的值。 但是不存在来自函数btnPush的dataLayer的值。

Answer 1

你搞砸了事件。 您真正需要的事件是click ，而不是blur ，因为例如，当用户使用tab导航时，它可能会触发。

addEventListenerConfBtns(confBtns, "click", btnPush);

在btnPush您将事件作为第一个参数，事件的target属性是clicked元素，因此：

btnPush = function(e) {
    dataLayer.push({
        "event":"ButtonBlur",
        "elementText": e.target.innerText
    })
};

我没有尝试过，但是应该可以。