如何在winjs中获取点击按钮的id

Question

我的 WinJS 页面中有几个按钮。

<button id="btn1">
  Button 1
</button>
<button id="btn2"">
  button 2
</button>...

和javascript将点击事件添加到点击按钮：

(function () {
    WinJS.UI.processAll().done(function () {
        var showButton = document.querySelector("xxx");
        showButton.addEventListener("click", function () {
        });
    });
})();

如何确定单击了哪个按钮并将 "xxx" 的值设置为该按钮的 ID（btn1、btn2 等...）

Answer 1

像这样的东西应该有用。 querySelector只有returns第一个匹配，所以你需要使用querySelectorAll(see docs).

var buttons = document.querySelectorAll("button");

for (var i = 0; i < buttons.length; i++) {
    buttons[i].addEventListener("click", function () {
        var id = this.id;
        // do stuff with "id"
    });
}

您也可以考虑研究一下 jQuery，因为这可以让这样的事情变得更干净一些。

Answer 2

这是获取按钮的 WinJS 解决方案：

var buttons = WinJS.Utilities.query('button');

然后您可以将事件绑定到按钮点击:

buttons.forEach(function (btn) {
    btn.addEventListener("click", function () {
        console.log('button ' + this.id + ' has been clicked.');
    })
});

我是 WinJS 的新手，所以可能有一个更漂亮的解决方案来替换 forEach。

Answer 3

如果我没理解错的话，当您有多个按钮附加到单个事件处理程序时，您想识别按钮（发送者）。

MSDN:

In JavaScript, Windows Runtime event arguments are represented as a single event object. In the following example of an event handler method, the ev parameter is an object that contains both the sender (the target property) and the other event arguments. The event arguments are the ones that are documented for each event.

因此您需要为事件处理程序定义一个参数并使用其目标属性。假设您有以下 HTML:

<div id="label1"/>
<div>
    <button id="button1">Button1</button><br />
    <button id="button2">Button2</button><br />
    <button id="button3">Button3</button><br />
</div>

并将单个事件处理程序附加到所有按钮：

var button1 = document.getElementById("button1");
button1.addEventListener("click", buttonClickHandler);

var button2 = document.getElementById("button2");
button2.addEventListener("click", buttonClickHandler);

var button3 = document.getElementById("button3");
button3.addEventListener("click", buttonClickHandler);

您可以通过以下方式访问发件人：

function buttonClickHandler(eventInfo) {
    var clickedButton = eventInfo.target;
    var label1 = document.getElementById("label1");
    label1.innerHTML = clickedButton.id.toString();
}

如何在winjs中获取点击按钮的id

How to get id of clicked button in winjs

javascript

winjs

win-universal-app