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

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)">

获取单击的子element(应与event参数一起使用(：

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

要通过element本身(圆顶(：

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

请参阅JSFiddle上的实时示例。

您可以如上所述指定event的名称，但您的处理程序可以访问 event 参数，如下所述："当事件处理程序指定为 HTML 属性时，指定的代码将包装到具有以下参数的函数中"。 链接中还有更多其他文档。

Answer 2

你不需要传递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，并且您可以保持函数签名不受接线信息的影响并简化事情。

2022-10-30 更新：

我已经联系了 WHATWG 的某个人，另一种可以做到的方法如下，尽管一些 IDE 将其报告为"过时"，但事实并非如此。您可以在调用方的参数列表中以任何位置传递"event"关键字(无大写字母E(，并按此方式使用它。

下面就可以工作，a、b、c 和 d 是要传递的额外参数(如果有的话(，以证明顺序无关紧要：

<p onclick="doSomething(a,b,event,c,d)">

在你的函数定义中，你会相应地捕获它：

function doSomething(arg1, arg2, arg3, arg4, arg5){} //arg3 would contain the event

并访问通常的属性，在这种情况下，因为我们使用 arg3 连接了事件：

console.log(arg3.target)

Answer 3

由于内联事件是作为函数执行的，因此您可以简单地使用参数。

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

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

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)">

Answer 5

这将完美地回答这个问题，而不必担心弃用问题。

function doSomething(e){
  // instead of e.target, use just 'e'
  console.log(e)
}
<p id="p" onclick="doSomething(this)">
   <a href="#">foo</a>
   <span>bar</span>
</p>