Javascript 事件对象，用于<；部门>；

我看到了一段实现缩略图的pf代码

 <div id="divId" onclick="changeImageOnClick(event)">
        <img class="imgStyle" src="/Images/Hydrangeas.jpg" />
        <img class="imgStyle" src="/Images/Jellyfish.jpg" />
        <img class="imgStyle" src="/Images/Koala.jpg" />
        <img class="imgStyle" src="/Images/Penguins.jpg" />
        <img class="imgStyle" src="/Images/Tulips.jpg" />
 </div>

---

如果目标是div对象，它不应该是targetElement.tagName==“div”？

事件。目标是对调度事件的对象的引用。该事件使DOM冒泡，您的div处理该事件

这实际上是一种称为事件委派的模式

在changeImageOnClick函数的javascript代码中，如果要引用div，可以使用

this

关键字

使用此的示例：

如果要使用内联事件声明，如上文所述：

<div id="divId" onclick="changeImageOnClick(this, event)">
    <img class="imgStyle" src="/Images/Hydrangeas.jpg" />
    <img class="imgStyle" src="/Images/Jellyfish.jpg" />
    <img class="imgStyle" src="/Images/Koala.jpg" />
    <img class="imgStyle" src="/Images/Penguins.jpg" />
    <img class="imgStyle" src="/Images/Tulips.jpg" />
</div>
<script type="text/javascript">
      var changeImageOnClick = function(elem, e) {
          var clickedElementName = e.target.tagName;
          var containingElementName = elem.tagName;
      }
</script>

---

因此，这让我有点惊讶，但由于事件冒泡，event.target.tagName是IMG。要获取父级标记名，可以调用

event.target.parentNode.tagName

JSFIDLE here：（忽略损坏的图像-只需单击它们进行输出）

var changeImageOnClick=函数（e）{
document.getElementById（'event'）.innerHTML=“事件对象：”+e.target.tagName；
document.getElementById（'binding'）.innerHTML=“父对象：”+e.target.parentNode.tagName；
}

看看您的示例，onclick位于div元素上，这意味着

event.target.tagName

将等于'div'（标记名在事件中是上格的）。

console.log

它当然是

div

，事件绑定到

div

事件目标对象表示发生事件时事件被调度到的目标。

查看事件对象中的其他属性

console.log（event）

@JustSomeDude我不明白的是使用if（targetElement.tagName==“IMG”）的代码，当您使用div包装一些图像时，当您单击一个图像时，事件对象应该是IMG对象还是div对象？@epascarello您是对的，我应该包括示例。更新为现在包含它们，可能将来会对某人有所帮助。@grooveline，正如我前面提到的event.target是对调度事件的对象的引用，在本例中，事件是click，而单击的元素是

img

元素。本质上，包含的div是被单击的，但它是在它的一个子节点存在的地方被单击的，因此事件从子节点冒泡到父div节点。如果单击了div，但在img标记之外单击了div的某个区域，则event.target将是div，而不是img元素，因为调度onclick事件的是div。您的意思是事件冒泡吗？我不明白的是onclick事件在，所以目标应该是div元素，为什么目标变成img对象？

if(targetElement.tagName == "IMG")

<div id="divId" onclick="changeImageOnClick(this, event)">
    <img class="imgStyle" src="/Images/Hydrangeas.jpg" />
    <img class="imgStyle" src="/Images/Jellyfish.jpg" />
    <img class="imgStyle" src="/Images/Koala.jpg" />
    <img class="imgStyle" src="/Images/Penguins.jpg" />
    <img class="imgStyle" src="/Images/Tulips.jpg" />
</div>
<script type="text/javascript">
      var changeImageOnClick = function(elem, e) {
          var clickedElementName = e.target.tagName;
          var containingElementName = elem.tagName;
      }
</script>

<div id="divId">
    <img class="imgStyle" src="/Images/Hydrangeas.jpg" />
    <img class="imgStyle" src="/Images/Jellyfish.jpg" />
    <img class="imgStyle" src="/Images/Koala.jpg" />
    <img class="imgStyle" src="/Images/Penguins.jpg" />
    <img class="imgStyle" src="/Images/Tulips.jpg" />
</div>
<script type="text/javascript">
    document.getElementById("divId").onclick = function(e) {
        var clickedElementName = e.target.tagName;
        var containingElementName = this.tagName;
    };
</script>

<script>
  var changeImageOnClick = function(e) {
    document.getElementById('event').innerHTML = "Event Object: " + e.target.tagName;
    document.getElementById('binding').innerHTML = "Parent Object: " + e.target.parentNode.tagName;
  }

</script>

<div id="divId" onclick="changeImageOnClick(event)">
  <img class="imgStyle" src="/Images/Hydrangeas.jpg" />
  <img class="imgStyle" src="/Images/Jellyfish.jpg" />
  <img class="imgStyle" src="/Images/Koala.jpg" />
  <img class="imgStyle" src="/Images/Penguins.jpg" />
  <img class="imgStyle" src="/Images/Tulips.jpg" />
</div>

<br />
<br />

<div id="event"></div>
<div id="binding"></div>