javascript - 无法使用addeventlistener正确触发JS

两个示例：JSfiddle without evenlistener和JSfiddle with eventlistener

两者的基本代码是：

的HTML

<body>

</body><p id="one" tabindex="0">ID one of tag P</p>
<input id="two" type="text" value="An input field">
<button id="three">A Button</button>

<p id="showid" tabindex="0"></p>

function myFunction() {
    var x = document.activeElement.id;
    document.getElementById("showid").innerHTML = x;
}

为了使脚本正常工作，我添加了onclick="myFunction()"（请参阅JSF的第一个示例），但是如果我添加的是eventlistener而不是onclick="myFunction()"，则不会得到正确的结果。

eventlistener的JS代码：

document.addEventListener('DOMContentLoaded', function myFunction() {
    var x = document.activeElement.id;
    document.getElementById("showid").innerHTML = x;
}, false);

我在这里做错了什么？

最佳答案

在第一个示例中，单击事件附加到主体。

<body onclick="myFunction()">

可以使用“ click”事件代替“ DOMContentLoaded”事件来获得相同的结果：

document.addEventListener('click', function myFunction() {
    var x = document.activeElement.id;
    document.getElementById("showid").innerHTML = x;
}, false);

关于javascript - 无法使用addeventlistener正确触发JS，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/35132914/

eventListener

javascript - 无法使用addeventlistener正确触发JS