Question

晚安，

我在修改测试对象中的日期值时遇到问题。 oninput事件似乎只在加载文档时触发一次。当日期改变时，oninput事件似乎不会触发。

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <script>

    var TestObj = new function(){

        this.date = "2014-01-01";

        this.LoadMenu = function() {
            var newDateInput = document.createElement('input');
            newDateInput.type = "date";
            newDateInput.value = this.date;
            document.getElementById("container").appendChild(newDateInput);
            newDateInput.oninput = this.updateDate(newDateInput.value);
        };

        this.updateDate =   function (newDate){
            this.date = newDate;
            alert(this.date);
            document.getElementById("outputBox").innerHtml = this.date;
        };
    };

    </script>
</head>
<body onload="TestObj.LoadMenu();">
<div id="container">
<div id="outputBox">Test</div>
</div>

Chrome：34.0.1847.116

Answer 1

这是因为您尝试将事件的处理函数与您的代码相关联的方式导致：

newDateInput.oninput = this.updateDate(newDateInput.value);

但你可能想要的是：

newDateInput.oninput = this.updateDate;

此外，如果您希望此功能正常工作，您可能需要在外部范围内声明newDateInput（在＆＃34;类＆＃34;范围内）。

我认为你想要做的是这样的事情：

var TestObj = new function(){

    this.date = "2014-01-01";
    var newDateInput;

    this.LoadMenu = function() {
        newDateInput = document.createElement('input');
        newDateInput.type = "date";
        newDateInput.value = this.date;
        document.getElementById("container").appendChild(newDateInput);
        newDateInput.oninput = this.updateDate;
    };

    this.updateDate =   function (event){
        this.date = newDateInput.value;
        alert(this.date);
        document.getElementById("outputBox").innerHTML = this.date + '';
    };
};

如果适合您，请告诉我。

oninput事件触发一次。也可能有范围问题

1 个答案: