Question

由于某种原因，我的eventHandling代码停止工作。我正在处理一些函数来处理indexedDB的东西，当我回到界面工作时，我注意到eventHandlers只能在应用程序创建时工作，即使我没有对它们执行任何操作，它们就会消失。继承人我的default.js

(function () {
"use strict";

WinJS.Binding.optimizeBindingReferences = true;

var app = WinJS.Application;
var activation = Windows.ApplicationModel.Activation;
var _swAlarm;

app.onactivated = function (args) {
    if (args.detail.kind === activation.ActivationKind.launch) {
        if (args.detail.previousExecutionState !== activation.ApplicationExecutionState.terminated) {

        } else {

        }
        args.setPromise(WinJS.UI.processAll());
    }
};

app.oncheckpoint = function (args) {

};

function testSelection(value) {
    console.log("from event listner "+value)
}

function getDomElements() {
    _swAlarm = document.getElementById("swAlarm");
}

function registerHandlers() {
    _swAlarm.addEventListener("onchange", console.log("ola"));
}


app.onready = function () {
    getDomElements();
    registerHandlers();
}

app.start();

这是我的default.html

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title>MyApp</title>

    <!-- WinJS references -->
    <link href="//Microsoft.WinJS.1.0/css/ui-dark.css" rel="stylesheet" />
    <script src="//Microsoft.WinJS.1.0/js/base.js"></script>
    <script src="//Microsoft.WinJS.1.0/js/ui.js"></script>

    <!-- my references -->
    <link href="/css/default.css" rel="stylesheet" />
    <script src="/js/default.js"></script>
    <script src="/js/database.js"></script>

    <!-- jquery references -->
    <script src="js/jquery-1.8.2-win8-1.0.js"></script>
    <script src="js/visualize.jQuery.js"></script>
    <script type="text/javascript"> jQuery.isUnsafe = true;</script>
    <link href="/css/default.css" rel="stylesheet" type="text/css">
</head>

<body>
    <div id="content">
        <div id="settings">
            <h2 id="lAlarm">Alarm</h2>
            <div id="swAlarm" data-win-control="WinJS.UI.ToggleSwitch" ></div>
            <input id="iMaxval" type="number">
            <input id="iMinval" type="number">
            <button id="bSave">Save</button>

        </div>

        <div id="graph">
            <h2 id="hGraph" class="graph">Graph</h2>
        </div>

        <div id="stats">
            <h2 id="hStats" class="stats">Stats</h2>
        </div>
    </div>
</body>
</html>

Answer 1

运行此代码时：

_swAlarm.addEventListener("onchange", console.log("ola"));

你是：

正在运行console.log("ola")
影响结果作为_swAlarm的更改事件的回调。

这在许多层面都是错误的。

console.log("ola")未返回回电。我想我理解你的意思，正确的代码可能是：function() { console.log("ola"); }
使用addEventListener时，您必须将dom lexique与事件面额一起使用。在您的情况下，onchange需要改为change。如果你必须直接在html中影响这个事件，你确实必须使用onchange="console.log("ola");"。但不是addEventListener。

最终结果是：

_swAlarm.addEventListener("change", function() { console.log("ola"); }, false);

至于为什么它正在创建应用程序，我认为这只是因为应用程序创建console.log("ola")在事件影响时立即被调用，但由于以后没有事件实际受到影响，所以不会得到任何结果对于onchange事件。

旁注，因为我猜你有点从“旧”语法（onchange ...等）迁移到addEventListener api，我会在2之间添加一个重要的区别模式：当事件以旧方式执行时，this引用window。但是，通过addEventListener影响回调会使domElement本身（在您的情况下为_swAlarm）成为回调执行期间this的目标。

addEventListener仅在创建应用程序时起作用

1 个答案: