【JavaScript】 htmlのonclick属性でイベント引数を取得する方法

htmlのonclick属性は要素をクリックしたときに実行したい処理を記述することができます。

しかし、クリックされた要素に対して少し複雑な処理をしたいときは、どうすればいいのでしょうか。

onclick属性で指定した関数にEvent オブジェクトを渡したいとき、rgumentsオブジェクトの0番目の要素を渡すと期待通りの処理ができます。

つまり、次のようになります。

<div id="test" onclick="func(arguments[0]);">

onclickに与えられた処理は、addEventListenerに置き換えると次のようにリスナー登録されていると考えることができます。

div要素.addEventListener( "click" , function(e){ func(); } );

つまりonclick内の処理function(e){ }でラップしています。

引数は関数内でargumentsオブジェクトを経由して参照することができます。
Event オブジェクトを渡したいなら、0番目の要素を渡せばいいわけです。

div要素.addEventListener( "click" , function(e){ func(arguments[0]); } );

これをonclick属性に展開してあげると、最初の例になります。

<div id="test" onclick="func(arguments[0]);">

クリックされた要素を渡したいときは、単純にthisを渡します。

<div id="test" onclick="func(arguments[0] , this );">

こちらもaddEventListenerに置き換えるとわかりやすいです。
addEventListenerは、関数呼び出し時に関数のthisに処理中の要素をセットします。

そのため、関数内でthisを参照すると、要素を操作することができます。

関連記事：
【JavaScript】 onclick属性とaddEventListenerの関連性

リンクタグ(aタグ)は、onclickの処理結果がfalseのとき、既定の処理が行われません。
既定の処理とはhrefで指定されたページの遷移です。

例えば、次のようなリンクタグがあるとします。

<a href="https://note.affi-sapo-sv.com/" onclick="return false;">

これは、リンクがクリックされるとonclickが処理され、その結果がfalseとなるため、https://note.affi-sapo-sv.com/への遷移が無効となります。

ではonclick属性で、falseを返す関数を呼び出してみます。

<script>
function func1(){ return false; }
</script>

<a href="https://note.affi-sapo-sv.com/" onclick="func1();">

これは、https://note.affi-sapo-sv.com/へ遷移してしまいます。

どうしてでしょうか？

argumentsオブジェクトを渡すでも触れましたが、onclick属性内の処理は関数でラップされたイメージで処理されます。

つまり最初の例は、次のようなイメージでリスナーとして登録されています。

a要素.addEventListener( "click" , function(){ return false; } );

2番目は次のようになります。

a要素.addEventListener( "click" , function(){ func1(); } );

1番目はfalseを返していますが、2番目は何も返していないのがわかります。

つまり、2番目は呼び出す関数の前にreturnを付ける必要があるのです。

<a href="https://note.affi-sapo-sv.com/" onclick="return func1();">