JavaScriptのonclickイベントハンドラのサンプルです。
目次
| onclick | onclickの動作 |
| onclick(イベントハンドラ)に関数を登録する | |
| 引数 | 引数のeventでtargetとtypeを取得する |
| 引数のthisで現在行を取得し次の行に移動する | |
| 引数のthisにidやvalueを指定する |
onclickの動作
onclickの動作のサンプルです。
<input type="button" id="b1" value="ボタン1" onclick="test1()">
<script>
function test1(){
console.log("test1"); //test1と表示される
}
</script>1行目は、ボタンです(input type="button")。ボタンをクリックするとonclickの右にあるtest1から、4行目のtest1関数が実行されます。
onclickを書く時のポイントはtest1という関数名だけでなく、かっこ()も記述します。
onclick(イベントハンドラ)に関数を登録する
イベントハンドラに関数を登録し処理を実行できます。
<p id="p1">クリックして下さい</p>
<script>
function test1() {
console.log("testです");
}
const p1 = document.getElementById("p1");
p1.onclick = test1; // 関数をイベントハンドラに登録
</script>4～6行目は、test1という関数です。
8行目は、getElementByIdメソッドで1行目を指定しています。
9行目は、関数test1をイベントハンドラのonclickに登録しています。
結果、1行目をクリックすると4～6行目の関数が実行されます。
引数のeventでtargetとtypeを取得する
引数のeventでtargetとtypeを取得するサンプルです。
<input type="button" value="ボタン1" onclick="test1(event)">
<script>
function test1(e){
console.log(e.target);
//<input type="button" value="ボタン1" onclick="test1(event)">
console.log(e.type); //click
}
</script>
1行目は、onclickのメソッドの引数にeventを指定しています。eventのプロパティを取得したい場合は、この文字以外では動きません。
5行目は、targetプロパティを指定しています。クリックした箇所の1行が表示されます。6行目のコメントの内容です。
8行目は、typeプロパティを指定しています。発生したイベントの名前を表示します。clickイベントなのでclickと表示されます。
引数のthisで現在行を取得し次の行に移動する
引数のthisで現在行を取得し次の行に移動するサンプルです。
<input type="button" value="ボタン1" onclick="test1(this)">
<p>a</p>
<script>
function test1(obj){
console.log(obj);
//<input type="button" value="ボタン1" onclick="test1(this)">
console.log(obj.nextElementSibling);
// <p>a</p>
}
</script>1行目は、onclickのメソッドの引数にthisを指定しています。
その場合、6行目のように現在押した箇所の一行を取得できます。
取得した値は8行目のようにnextElementSiblingなどで他の行に移動できます。
JavaScript nextElementSibling DOMで次に移動
引数のthisにidやvalueを指定する
引数のthisにidやvalueなど個別にかつ複数指定することができます。
<input type="button" id="b1" value="ボタン" onclick="test1(this.id,this.value)">
<script>
function test1(a,b){
console.log(a); // b1
console.log(b); // ボタン
}
</script>1行目は、onclickのメソッドの引数にthis.idとthis.valueを指定しています。
5行目は、1行目のidの値である「b1」が表示されます。
6行目は、1行目のvalueの値である「ボタン」が表示されます。
関連の記事