修改

Question

// this e works
document.getElementById("p").oncontextmenu = function(e) {
    e = e || window.event;
    var target = e.target || e.srcElement;
    console.log(target);
};

// this e is undefined
function doSomething(e) {
    e = e || window.event;
    var target = e.target || e.srcElement;
    console.log(target);
}

<p id="p" onclick="doSomething(e)">
    <a href="#">foo</a>
    <span>bar</span>
</p>

有人问过一些类似的问题。

但是在我的代码中，我正在尝试获取被点击的子元素，例如a或span 。

那么将event作为参数传递给事件处理程序的正确方法是什么，或者如何在不传递参数的情况下在处理程序中获取事件？

修改

我知道addEventListener和jQuery，请提供将事件传递给inline事件处理员的解决方案。

Answer 1

传递event对象：

<p id="p" onclick="doSomething(event);">

获取单击的子元素（应与event参数一起使用：

function doSomething(e) {
    e = e || window.event;
    var target = e.target || e.srcElement;
    console.log(target);
}

传递元素本身（DOMElement）：

<p id="p" onclick="doThing(this);">

查看jsFiddle

上的实例

Answer 2

由于内联事件作为函数执行，您只需使用参数。

<p id="p" onclick="doSomething.apply(this, arguments)">

和

function doSomething(e) {
  if (!e) e = window.event;
  // 'e' is the event.
  // 'this' is the P element
}

＆＃39;事件＆＃39;在接受的答案中提到的实际上是传递给函数的参数的名称。它与全球事件无关。

Answer 3

您不需要传递this，默认情况下已经自动传递了event对象，其中包含event.target，该对象具有其来源。您可以简化语法：

此：

<p onclick="doSomething()">

将与此配合使用：

function doSomething(){
  console.log(event);
  console.log(event.target);
}

您不需要实例化event对象，因为它已经存在。试试看。 event.target将包含调用它的整个对象，您之前将其称为“ this”。

现在，如果您从代码中的某处动态触发doSomething（），您将注意到event是未定义的。这是因为它不是由单击事件触发的。因此，如果您仍然想人为触发事件，只需使用dispatchEvent：

document.getElementById('element').dispatchEvent(new CustomEvent("click", {'bubbles': true}));

然后doSomething()将照常看到event和event.target！

无需在任何地方传递this，并且可以使函数签名免于接线信息并简化操作。

Answer 4

以下是我将如何防止用户将无效字符复制并粘贴到输入文本字段中：

function validatePaste(el, e) {
  var regex = /^[a-z .'-]+$/gi;
  var key = e.clipboardData.getData('text')
  if (!regex.test(key)) {
    e.preventDefault();
    return false;
  }
}

此函数位于 <script> 标签内，其调用方式如下：

<input type="text" onpaste="validatePaste(event)">

如何将事件作为参数传递给JavaScript中的内联事件处理程序？

修改

4 个答案: