今回はjavascriptを使ってボタンをクリックしたときの処理について紹介していきたいと思います。
jsでクリック動作の書き方
addEventListenerを使う
一つ目はaddEventListenerイベントを使ってクリック処理をする書き方です。
html
<button id="main0">button</button>javascript
document.getElementById('main0').addEventListener('click', function() {
alert('ボタンがクリックされました。');
}
)サンプル
onclickを使う
html
<button id="main1">button</button>javascript
document.getElementById('main1').onclick = function(){
alert('onclickを使った処理');
};サンプル
アロー関数を使ったクリック
html
<button onclick="main3()">button</button>javascript
main3.onclick = () => {
alert('アロー関数を使ったクリック');
};サンプル
onclick属性を使う
html
<button onclick="main2()">button</button>javascript
function main2() {
alert("onclick属性を使ったクリック");
}getElementsByClassName
今まではボタンについたidに対してクリックを行っていましたがクラスの要素に対しての書き方を紹介します。
idは「getElementById」を使っていましたがクラスの場合は「getElementsByClassName」を使います。
html
<button class="main4">button</button>javascript
let elem = document.getElementsByClassName('main4');
elem[0].addEventListener('click', function() {
alert('getElementsByClassNameを使ったクリック');
}
)サンプル
まとめ
クリックといっても書き方はいろいろあります。
それぞれ更新しやすさや書きやすさなど特徴がありますが更新頻度や修正なども踏まえてどれを使用するか決めると良いと思います。
コメント