Question

我的HTML中有一个div，我想添加innerHTML，但只有当用户在文本输入中输入内容时才会这样。它会在页面加载后立即添加innerHTML，所以我想我不理解onchange事件的监听以及我的想法。

HTML：

<body>
<label for="changeMe">What is your favorite number?</label>
<input type="text" id="changeMe" />
<div id="addStuff"></div>

<script src="scripts/main.js"></script>
</body>

JS：

function doStuff() {
    var thing = document.getElementById("changeMe");
    thing.addEventListener('onchange', doMoreStuff());
}

function doMoreStuff() {
    var addStuff = document.getElementById("addStuff");
    var stuff = "<input 'type=text' />";
    addStuff.innerHTML = stuff;
}

window.onload = function() {
    doStuff();
};

Answer 1

目前，您正在使用事件处理程序绑定doMoreStuff()的结果。

使用

thing.addEventListener('change', doMoreStuff); //Notice remove () here

而不是

thing.addEventListener('onchange', doMoreStuff());

Answer 2

现在你在尝试绑定事件处理程序时调用函数，而不是传递函数。

你也传递'onchange'，这是回调属性的名称，而不是'change'，这是事件的类型。请参阅the documentation of addEventListener。

更改

thing.addEventListener('onchange', doMoreStuff());

到

thing.addEventListener('change', doMoreStuff);

为什么我的onchange事件在页面加载时发生，而不是偶然触发？

2 个答案: