Question

我的目标是从我的书中拿一个例子，在按下按钮时显示不同的书籍封面。我需要添加的新部分是添加一个事件监听器，当您将鼠标悬停在图像上时，该监听器会显示该书的标题。

注意**我使用title属性来实现在悬停时显示标题，但我必须在书籍下面显示标题文本

为什么这不起作用？

         document.addEventListener("mouseover", function(){
document.getElementById("image").innerHTML = title;
});

我已经添加了一个链接到我的网站，因为这比粘贴所有代码更容易。我一般都非常喜欢使用DOM和AJAX。我不是在寻找任何答案，只是帮助我理解我可能做错了什么。

http://ualr.edu/gawalker1/16%20CH%20HW/PullImagesOntoPage.html

Answer 1

我认为你要做的是event delegation。为了做到这一点，你有正确的想法来听取父元素，如

document.addEventListener("mouseover", function(e){ ... });

（你必须捕获事件对象，作为事件监听器函数的第一个参数传入，我在这里命名为e。）

您要做的是查看e.target，这是document事件当前定位的mouseover中的元素，并使用其title属性。

document.addEventListener("moveover", function(e) {
    if(e.target && e.target.nodeName == "IMG") {
        document.getElementById("image").innerHTML = e.target.title;
    }
});

这将检查鼠标是否输入了<img>元素，如果是，则会设置innerHTML元素id="image"（目前您的页面中缺少该元素，但我假设您将添加它，或者选择页面上存在的另一个ID。）

如果您以后有其他图像不希望应用此行为，则可以选择比整个document更具选择性的父级，或者为过滤if条件添加更多条件，与... && e.target.class == "hover-target"一样，将行为限制为具有特定类的图像。

Answer 2

apsillers answer是一个很好的答案，但我假设您尝试使用document.getElementById('image')定位图像元素并为其添加标题。此外，我的实现仅对图像元素使用mouseover event。

＆＃13;

var images = document.getElementsByTagName('img');          // gets all images nodes and stores in an array
for (var i = 0, len = images.length; i < len; i++) {        // loops through images array
  images[i].addEventListener("mouseover", function() {      // adds mouseover event to all image nodes
    if (!this.hasTitle) {                                   // checks if the image has a title (property that I have added)
      var div = document.createElement("div");              // create new div element
      var titleNode = document.createTextNode(this.title);  // create text node with title of the image being hovered
      div.appendChild(titleNode);                           // append text node to div element
      insertAfter(div, this);                               // insert after image element
      this.hasTitle = true;                                 // set hasTitle to true
    }
  });
}

function insertAfter(newNode, referenceNode) {
  referenceNode.parentNode.insertBefore(newNode, referenceNode.nextSibling);
}

＆＃13;

<div id="covers">
  <ul>
    <li><img title="Simply C++" src="http://test.deitel.com/images/thumbs/simplycpp.jpg"></li>
    <li><img title="Simply VB 2008" src="http://test.deitel.com/images/thumbs/simplyvb2008.jpg"></li>
    <li><img title="Simply Java" src="http://test.deitel.com/images/thumbs/simplyjava.jpg"></li>
  </ul>
</div>

＆＃13;

insertAfter function来自this stackoverflow answer。

JS AddEventListener问题

2 个答案: