Javascript点击事件处理程序 - 我如何获得点击项目的引用？ [英] Javascript click event handler - how do I get the reference to the clicked item?

问题描述

我的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?

推荐答案

p> event 是一个Event对象，在触发事件时自动创建。注意，你不必调用它 event （我倾向于简单地调用 e ）。该事件对象有一些属性描述它代表的事件。在这种情况下，您感兴趣的是 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;
}

这篇关于Javascript点击事件处理程序 - 我如何获得点击项目的引用？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！