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

这是working example。

不幸的是，它从未如此简单。虽然规范说它应该是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>

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

3 个答案: