Javascript，在事件处理程序恢复为默认值（DOM）之后
Posted
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了Javascript，在事件处理程序恢复为默认值（DOM）之后相关的知识，希望对你有一定的参考价值。
您好抱歉也许是一个愚蠢的问题，但我似乎无法找到一个简单的解决方案。
我的练习的意思是在我的网站上放置3个缩略图，但当我移动图像时，他们需要扩大尺寸（所以我有图片的缩略图版本和正常尺寸）。正常大小的图片必须在
<p id="groot"></p>
这确实可以正常工作，唯一的问题是当我移动它时图片会一直显示出来。所以当我移出缩略图时，图片需要消失。是否有一个功能或某些东西使网站达到原始状态或任何解决方案？提前致谢。我希望我能清楚地解释清楚。
这是我关于stackoverflow的第一个问题，所以如果你有一个完整的菜鸟的提示:)
这是我的html代码的主体：
<body>
<p><img id="foto1" src="images/thumb-bones.jpg" alt="bones"/>
<img src="images/thumb-castle.jpg" alt="castle"/>
<img src="images/thumb-mentalist.jpg" alt="mentalist"/>
</p>
<p id="groot"></p>
</body>
这是JS代码：
addEventListener("load", init, false);
function init() {
let foto1 = document.getElementsByTagName("img")[0].addEventListener("mouseover", actie, false);
let foto2 = document.getElementsByTagName("img")[1].addEventListener("mouseover", actie2, false);
let foto3 = document.getElementsByTagName("img")[2].addEventListener("mouseover", actie3, false);
foto1.addEventListener("click", uit, false);
}
function actie(event) {
let plaats = document.getElementById("groot");
let element = document.createElement("img");
element.src = 'images/image-bones.jpg';
plaats.appendChild(element);
}
function actie2(event) {
let plaats = document.getElementById("groot");
let element = document.createElement("img");
element.src = 'images/image-castle.jpg';
plaats.appendChild(element);
}
function actie3(event) {
let plaats = document.getElementById("groot");
let element = document.createElement("img");
element.src = 'images/image-mentalist.jpg';
plaats.appendChild(element);
}
使用mouseout处理程序，并在处理程序中删除该元素中的所有子项。一个简单的方法是将""分配给innerHTML。例如：
function actie_off(event) {
document.getElementById("groot").innerHTML = "";
}
把它连接到所有三个缩略图。
如果你不想使用innerHTML，this question's answers会提供其他选择。
您可以考虑使用mouseenter和mouseleave而不是mouseover和mouseout。可能在这里没有太大区别，只是当鼠标在缩略图上移动时mouseover重复，并且mouseout的冒泡可能会与嵌套元素混淆（目前不适合你）。请参阅链接了解详细信息。
另一件需要考虑的事情是将缩略图img元素上的fullsize图像URL存储为data-* URI，如下所示：
<img id="foto1" src="images/thumb-bones.jpg" alt="bones" data-fullsize="images/image-bones.jpg"/>
然后，您可以为所有img元素使用单个处理程序，而不是三个单独的处理程序：
function actie(event) {
let plaats = document.getElementById("groot");
let element = document.createElement("img");
element.src = this.getAttribute("data-fullsize"); // Getting the fullsize URL
// from the image the event
// relates to
plaats.appendChild(element);
}
以上是关于Javascript，在事件处理程序恢复为默认值（DOM）之后的主要内容，如果未能解决你的问题，请参考以下文章