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

Question

我的HTML:

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

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

Answer 1

event是一个Event对象,它在触发事件时自动创建.请注意,您不必调用它event(我倾向于简单地称它e).该Event对象具有许多描述其所代表事件的属性.在这种情况下,您感兴趣的是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;
}

这种方法可以为你工作吗？