Javascript 在具有嵌套元素的根元素上进行事件冒泡和捕获
我试图从根元素捕获每张卡上的id。但是，每次单击嵌套元素时，都会得到空字符串。但是，在侦听根元素卡时，我需要包装卡中的id。我想处理冒泡和捕获两种情况，因为这是更大结构的一部分。我只想要香草js和Javascript的答案，请不要cssJavascript 在具有嵌套元素的根元素上进行事件冒泡和捕获,javascript,event-handling,addeventlistener,event-bubbling,event-capturing,Javascript,Event Handling,Addeventlistener,Event Bubbling,Event Capturing,我试图从根元素捕获每张卡上的id。但是，每次单击嵌套元素时，都会得到空字符串。但是，在侦听根元素卡时，我需要包装卡中的id。我想处理冒泡和捕获两种情况，因为这是更大结构的一部分。我只想要香草js和Javascript的答案，请不要css cards.addEventListener（'click'，evt=>{ if（evt.target！==evt.currentTarget）{ var clickedItem=evt.target.id console.log（单击编辑项）； } });
cards.addEventListener（'click'，evt=>{
if（evt.target！==evt.currentTarget）{
var clickedItem=evt.target.id
console.log（单击编辑项）；
}
});
.card{
/*添加阴影以创建“卡片”效果*/
盒影：0 4px 8px 0 rgba（0,0,0,0.2）；
过渡：0.3s；
}
/*在鼠标悬停时，添加更深的阴影*/
.卡：悬停{
盒影：0 8px 16px 0 rgba（0,0,0,0.2）；
}
/*在卡片容器中添加一些填充物*/
.集装箱{
填充：2x16px；
}
第一个音符
正文
第二注
附注正文2
3注体
附注3
问题在于，根据您单击的位置，您可能会最终单击没有id的
让我们检查一下您的HTML结构：
<!-- You have your click handler attached to this parent element. It's true
that any clicks on descendant elements will bubble up to this parent,
but when you handle it here, this parent becomes event.currentTarget
and while this element does have an id, it's not the id you want. -->
<div id="cards" style="margin: auto; width: 50%;">
<!-- This is the element level that has the id that you want, so
this is the element level that should have the event handlers. -->
<div class="card" id="1234567">
<!-- If the user clicks in the area of the following elements (which
they are most likely to because it takes up most of the space
on the card) one of these elements will become `event.target`
and none of these elements has an id to get. That's why you are
getting an empty string in your console. -->
<img src="img_avatar.png">
<div class="container">
<h4>1st Note</h4>
<p>Note Body</p>
</div>
</div>
... inner pattern repeats ...
</div>
.card{
/*添加阴影以创建“卡片”效果*/
盒影：0 4px 8px 0 rgba（0,0,0,0.2）；
过渡：0.3s；
}
/*在鼠标悬停时，添加更深的阴影*/
.卡：悬停{
盒影：0 8px 16px 0 rgba（0,0,0,0.2）；
}
/*在卡片容器中添加一些填充物*/
.集装箱{
填充：2x16px；
}
第一个音符
正文
第二注
附注正文2
3注体
附注3
问题在于，根据您单击的位置，您可能会最终单击没有id的
让我们检查一下您的HTML结构：
<!-- You have your click handler attached to this parent element. It's true
that any clicks on descendant elements will bubble up to this parent,
but when you handle it here, this parent becomes event.currentTarget
and while this element does have an id, it's not the id you want. -->
<div id="cards" style="margin: auto; width: 50%;">
<!-- This is the element level that has the id that you want, so
this is the element level that should have the event handlers. -->
<div class="card" id="1234567">
<!-- If the user clicks in the area of the following elements (which
they are most likely to because it takes up most of the space
on the card) one of these elements will become `event.target`
and none of these elements has an id to get. That's why you are
getting an empty string in your console. -->
<img src="img_avatar.png">
<div class="container">
<h4>1st Note</h4>
<p>Note Body</p>
</div>
</div>
... inner pattern repeats ...
</div>
.card{
/*添加阴影以创建“卡片”效果*/
盒影：0 4px 8px 0 rgba（0,0,0,0.2）；
过渡：0.3s；
}
/*在鼠标悬停时，添加更深的阴影*/
.卡：悬停{
盒影：0 8px 16px 0 rgba（0,0,0,0.2）；
}
/*在卡片容器中添加一些填充物*/
.集装箱{
填充：2x16px；
}
第一个音符
正文
第二注
附注正文2
3注体
附注3
是的，一个监听器是一个很好的要求。碰巧，您只需更改获得目标的路线：
cards.addEventListener('click', evt => {
console.log( evt.target.closest( '.card' ).id );
});
完整示例：
cards.addEventListener（'click'，evt=>{
警报（evt.target.closest（'.card'）.id）；
});
.card{
/*添加阴影以创建“卡片”效果*/
盒影：0 4px 8px 0 rgba（0,0,0,0.2）；
过渡：0.3s；
}
/*在鼠标悬停时，添加更深的阴影*/
.卡：悬停{
盒影：0 8px 16px 0 rgba（0,0,0,0.2）；
}
/*在卡片容器中添加一些填充物*/
.集装箱{
填充：2x16px；
}
第一个音符
正文
第二注
附注正文2
3注体
附注3
是的，一个监听器是一个很好的要求。碰巧，您只需更改获得目标的路线：
cards.addEventListener('click', evt => {
console.log( evt.target.closest( '.card' ).id );
});
完整示例：
cards.addEventListener（'click'，evt=>{
警报（evt.target.closest（'.card'）.id）；
});
.card{
/*添加阴影以创建“卡片”效果*/
盒影：0 4px 8px 0 rgba（0,0,0,0.2）；
过渡：0.3s；
}
/*在鼠标悬停时，添加更深的阴影*/
.卡：悬停{
盒影：0 8px 16px 0 rgba（0,0,0,0.2）；
}
/*在卡片容器中添加一些填充物*/
.集装箱{
填充：2x16px；
}
第一个音符
正文
第二注
附注正文2
3注体
附注3
您没有得到null
，您得到的是一个空字符串。抱歉，我的意思是一个空字符串，将编辑问题您没有得到null
，您得到的是一个空字符串。抱歉，我的意思是一个空字符串，将编辑问题我需要能够使用父级上的单个事件侦听器来执行此操作。你是说在当前的html结构中这是不可能的吗？是的，因为如果你点击.card
的大部分区域，你会点击没有id的东西。您需要在.card
元素上设置处理程序，然后单击.card
中的任何内容，您将在该卡上捕获事件，而不是更高级别。为了清楚起见，我们可以获取最初触发事件的对象的引用（event.target
）我们可以获取对接收事件的对象的引用（event.currentTarget
），但我们无法获取对事件传播通过的对象的引用，除非我们在这些对象上设置了事件处理程序。您能否在回答中详细说明这一点，因为这正是我想要的答案，谢谢。@Arrow事件是由与某个元素的交互触发的。这就是evt.target
。从那里，它通过它的祖先元素冒泡（这里我们不会进入捕获阶段）。只有当evt.target
或其祖先之一为其设置了事件侦听器（处理程序）时，您的代码才能参与其中。我们可以在过程中的任何（或每个）元素上放置处理程序。但是，当我们这样做时，我们只能立即引用触发事件的对象（evt.target
）或处理程序截获事件的对象（evt.currentTarget
）……我需要能够使用父级上的单个事件侦听器来完成。你是说在当前的html结构中这是不可能的吗？是的，因为如果你点击.card
的大部分区域，你就会点击s