Javascript，在事件处理程序恢复默认（DOM）之后答案

【问题标题】：Javascript, after eventhandler back to default (DOM)Javascript，在事件处理程序恢复默认（DOM）之后
【发布时间】：2018-05-15 14:17:34
【问题描述】：

您好，抱歉可能是一个愚蠢的问题，但我似乎找不到简单的解决方案。

我的练习的意思是在我的网站上放 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);

}

【问题讨论】：

标签： javascript dom eventhandler

【解决方案1】：

使用mouseout 处理程序，并在处理程序中从该元素中删除所有子元素。一种简单的方法是将"" 分配给innerHTML。比如：

function actie_off(event) {
    document.getElementById("groot").innerHTML = "";
}

将其连接到所有三个缩略图。

如果您不想使用innerHTML，this question's answers 提供替代方案。

您可以考虑使用mouseenter 和mouseleave 而不是mouseover 和mouseout。在这里可能没有太大区别，只是mouseover 在鼠标在缩略图上移动时重复，mouseout 的冒泡可能会与嵌套元素混淆（目前与您无关）。详情请查看链接。

要考虑的另一件事是将缩略图img 元素上的全尺寸图像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);
}

【讨论】：