Javascript 点击事件处理程序 - 我如何获得对点击项目的引用?

2022-01-15 00:00:00 event-handling click javascript html

我的 HTML:

<div id="x" onclick="clickHandler(event)">
   <div id="button1">This turns green</div>
   <div id="button2">This turns blue</div>
</div>

首先，为什么我应该将事件"传递给点击处理程序，而事件是某种系统关键字?另外，由于在容器 div 上标识了点击处理程序，我如何知道单击了哪个按钮?

So first of all, why am I supposed to be passing "event" into the click handler and is event some kind of system keyword? Also, since the click handler is identified on the container div, how do I know which button has been clicked?

推荐答案

event 是一个 Event 对象，在触发事件时自动创建.请注意，您不必将其称为 event(我倾向于将其简称为 e).该 Event 对象具有许多描述它所代表的事件的属性.在这种情况下，您感兴趣的是 target，它显示了作为事件源的元素:

event is an Event object which is created automatically when an event is fired. Note that you don't have to call it event (I tend to call it simply e). That Event object has a number of properties which describe the event it represents. In this case, the one you're interested in would be target, which shows the element that was the source of the event:

function clickHandler(e) {
    var target = e.target;
}

这是一个工作示例.

不幸的是，事情从来没有这么简单.虽然规范说它应该是 event.target，但 Internet Explorer 喜欢与众不同，并选择使用 event.srcElement，因此您可能需要检查一下确保 event.target 存在！例如:

Unfortunately, it's never quite that simple. While the specification says it should be event.target, Internet Explorer likes to be different, and chooses to use event.srcElement, so you probably want to put in a check to make sure event.target exists! For example:

function clickHandler(e) {
    var target = (e.target) ? e.target : e.srcElement;
}

相关文章