Javascript单击事件处理程序——如何获得对已单击项目的引用?

My HTML:

我的HTML:

<div id="x" onclick="clickHandler(event)">
   <div id="button1">This turns green</div>
   <div id="button2">This turns blue</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"传递给click handler而event是某种system关键字?另外，由于在容器div上标识了click处理程序，我如何知道已单击了哪个按钮?

3 个解决方案

#1

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:

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

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

Here's a working example.

这是一个工作示例。

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:

不幸的是，事情从来没有这么简单过。而规范说它应该是事件。目标，Internet Explorer喜欢与众不同，并选择使用事件。srcElement，你可能想要输入一个检查来确保事件发生。目标的存在!例如:

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

#2

I usually just name the clicked element in the argument list of the call to the click handler, something like (untested) this:

我通常只在调用单击处理程序的参数列表中命名被单击的元素，类似(未测试的)如下:

<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;
}

Could that approach work for you?

这种方法对你有用吗?

#3

-11

why can't u do this?

你为什么不能这么做?

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

#1

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