web-dev-qa-db-ja.com

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イベントハンドラーにイベントを渡すためのソリューションを提供してください。

javascripteventsinlineargument-passing
74
user1643156

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 のライブ例を参照してください

124
Akram Berkawy

インラインイベントは関数として実行されるため、単に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
}

受け入れられた回答に記載されている「イベント」は、実際には関数に渡される引数の名前です。グローバルなイベントとは関係ありません。

12
Semra

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を渡す必要はありません。また、関数の署名を配線情報から解放して、物事を単純化できます。

0
Wadih M.