MENU

JavaScriptaddeventlistenerthis

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

更新日:2021/04/22

 

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

 

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

 

argumentsオブジェクトを渡す

 

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

 

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

 


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

 

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

 


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

 

つまりonclick内の処理func();を、イベントを引数として渡している関数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の関連性

onclickでhrefを無効にするときのreturnの扱い

 

リンクタグ(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();">

 

音楽で集中力アップ!
通勤中の暇つぶしもOK!
amazon musicはスマホで
気ままに好きな音楽を聴けるのが魅力ですね♪


あなたはサラリーマン脳?

 

あなたは人の下でしか働けないというサラリーマン脳ではないですか?

まさかの時の備えは、今とは全く違う発想でないとあまり意味がありません。
また同じまさかがありますからね。

自分だけの力で収入を得られるという経験を、一度してみてください。
僕のように、あなたの人生観が大きく変わりますよ。


記事の内容について

 

こんにちはけーちゃんです。
説明するのって難しいですね。


「なんか言ってることおかしくない?」
たぶん、こんなご意見あると思います。

裏付けを取りながら記事を作成していますが、僕の勘違いだったり、そもそも情報源の内容が間違えていたりで、正確でないことが多いと思います。

そんなときは、ご意見もらえたら嬉しいです。

ご意見はこちら。
https://note.affi-sapo-sv.com/info.php

【お願い】

お願い

■このページのURL


■このページのタイトル


■リンクタグ