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

Question

我的 HTML：

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

为什么我应该将

event

传递到点击处理程序中？

event

是某种系统关键字吗？ 另外，由于点击处理程序是在容器 div 上识别的，我如何知道哪个按钮被点击了？

Answer 1

event

是一个事件对象，在事件触发时自动创建。请注意，您不必将其称为

event

（我倾向于简单地称其为

e

）。该事件对象有许多属性来描述它所代表的事件。在这种情况下，您感兴趣的元素是

target

，它显示作为事件源的元素：

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

这是一个工作示例。

不幸的是，事情从来没有那么简单。虽然规范规定它应该是

event.target

，但 Internet Explorer 喜欢与众不同，并选择使用

event.srcElement

，因此您可能需要进行检查以确保

event.target

存在！例如：

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

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

这种方法对你有用吗？

Answer 3

为什么你不能这样做？

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