Как передать событие в качестве аргумента для встроенного обработчика событий в JavaScript?

// 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 event hander.

Ответ 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

Ответ 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
}

"Событие", указанное в принятом ответе, на самом деле является именем аргумента, переданного функции. Это не имеет ничего общего с глобальным событием.

Ответ 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 повсюду, и вы можете защитить свои подписи функций от информации о проводке и упростить процесс.