Javascript 点击事件处理程序 - 如何获取对点击项目的引用？答案

【问题标题】：Javascript click event handler - how do I get the reference to the clicked item?Javascript 点击事件处理程序 - 如何获取对点击项目的引用？
【发布时间】：2011-12-12 08:59:35
【问题描述】：

我的 HTML：

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

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

【问题讨论】：

标签： javascript html event-handling click

【解决方案1】：

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

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

这是working example。

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

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

【讨论】：

啊，太酷了，所以 target 让我知道被点击的元素的名称？顺便说一句，这 JFiddle 是什么东西，太酷了！
不是名称，它为您提供对实际元素本身的引用。是的，jsfiddle 是一个伟大的工具，用于试验和测试 JS 的快速位！
这里有点困惑。所以，是的，event 是包含表示 onclick 处理程序中事件的 Event 对象的变量的名称。这是一种保留变量名，如this。
有点迟到的评论，但我注意到的一件事是，如果您使用 e.getAttribute("id") ，结果可能会有所不同。我有一个带有 id 的图像，它包含在带有 id 的 div 中，并且事件处理程序使用其类选择器附加到 div。当我单击图像时，event.target 是图像，当我单击 div（图像外部）时，事件目标是 div，这有时可能是一个问题。如果我使用 this.getAttribute("id") 我总是得到 div 的 id，不管我是点击图像还是 div。

【解决方案2】：

我通常只是在调用点击处理程序的参数列表中命名被点击的元素，类似于（未经测试）这样：

<div id="x">
   <div id="button1" onclick="handle_click_event( this, 'green' )">This turns green</div>
   <div id="button2" onclick="handle_click_event( this, 'blue' )">This turns blue</div>
</div>

function handle_click_event ( obj, new_color ) {
  obj.style.backgroundColor = new_color;
}

这种方法对你有用吗？

【讨论】：

"self" 通常指的是当前窗口。因此，它不会起作用。使用“this”关键字代替“self”。
因为它说未经测试，所以我通过小提琴为你测试了它。不，它不起作用...这是我必须对其进行的更改function handle_click_event ( new_color ) { event.target.style.backgroundColor = new_color; } <div id="button1" onclick="handle_click_event( 'green' )">This turns green</div> <div id="button2" onclick="handle_click_event( 'blue' )">This turns blue</div>

【解决方案3】：

你为什么不能这样做？

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

【讨论】：

'因为这将为每个“按钮”元素提供一个函数？