我看到了一段实现缩略图的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>
所以当我点击第一张图片时,例如,当我使用event.target.tagName时,它是&#34; img&#34;或&#34; div&#34;,我的意思是事件对象是div对象还是img对象?我认为它应该是div对象,但实际上它是img对象,所以在这种情况下,我怎样才能得到div对象? 这是完整的代码:
<html>
<head>
<style type="text/css">
.imgStyle
{
width:100px;
height:100px;
border:3px solid grey;
}
</style>
</head>
<body>
<img id="mainImage" style="border:3px solid grey"
src="/Images/Hydrangeas.jpg" height="500px" width="540x"/>
<br />
<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>
<script type="text/javascript">
function changeImageOnClick(event)
{
event = event || window.event;
var targetElement = event.target || event.srcElement;
if (targetElement.tagName == "IMG")
{
mainImage.src = targetElement.getAttribute("src");
}
}
</script>
</body>
</html>
所以代码使用:
if(targetElement.tagName == "IMG")
如果目标是div对象,则不应该是targetElement.tagName ==&#34; DIV&#34;?
答案 0 :(得分:1)
所以,这对我来说有点令人惊讶,但是由于事件冒泡,event.target.tagName是IMG。要获得父母,您可以拨打event.target.parentNode.tagName
。
JSFiddle:https://jsfiddle.net/iamjpg/rwasdd90/(忽略损坏的图像 - 只需单击它们即可输出)。
<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>
答案 1 :(得分:0)
event.target是对调度事件的对象的引用。那个事件冒泡了DOM,你的div处理事件。
这实际上是一种称为事件委托的模式。
在你的changeImageOnClick函数的javascript代码中,如果你想引用你的div,那么你可以使用this
关键字。
使用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>
或者,您可以采取更加不引人注目的方法。请注意,onclick
事件仅在javascript中为div元素定义,而不是在HTML中定义:
<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>