153
// 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>

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

但是在我的代码中,我试图获取被点击的子元素,比如aorspan

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

编辑

我知道addEventListener并且jQuery,请提供将事件传递给inline事件处理程序的解决方案。

4

4 回答 4

247

传递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自身(DOMElement):

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

请参阅jsFiddle上的实时示例。

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

于 2013-05-06T17:57:31.667 回答
22

由于内联事件作为函数执行,您可以简单地使用arguments

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

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

于 2015-01-25T17:10:43.827 回答
20

您不需要 pass thisevent默认情况下已经有对象自动传递,其中包含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()会看到eventevent.target像往常一样!

无需this到处传递,您可以使您的函数签名不受接线信息的影响并简化事情。

于 2019-08-31T20:09:50.917 回答
0

这是防止用户将无效字符复制并粘贴到输入文本字段中的方法:

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)">
于 2021-05-14T18:28:00.257 回答