JavaScriptのボタン作成とクリックイベント処理

Buttonオブジェクトは、HTMLの<button>要素を表しています。

通常は、<button>要素にアクセスするために「getElementById()」メソッドを使用します。

ただし、プログラム上でHTMLボタンを作成する必要がある場合があります。

JavaScriptを使用して、HTMLボタンをプログラムで作成する方法を学ぶために、DOM操作の基本である要素の取得【追加・削除・置換】を理解する必要があります。

また、JavaScriptでクリックイベントを処理する方法も重要です。

したがって、この記事では、JavaScriptを使用してHTMLボタンを作成する方法について説明し、クリックイベントの処理についても詳しく説明します。

なお、詳細なDOM操作については、JavaScript DOM操作の基本 要素の取得【追加・削除・置換を参照してください。

JSのイベント

JavaScriptは、ブラウザでイベント駆動型のプログラミングモデルを使用します。

このモデルは、全てがイベントに従って実行されることを意味します。

JavaScriptとHTMLの相互作用は、ユーザーまたはブラウザがページを操作するたびに発生するイベントを通じて処理されます。

ページの読み込みも、イベントの一種として扱われます。

ユーザーがボタンをクリックすると、そのクリックもイベントとして処理されます。

その他の例として、任意のキーを押す、ウィンドウを閉じる、ウィンドウサイズを変更する、DOMをロードする、フェッチを終了する非同期リクエスト、ページスクロール、およびユーザーによるキーボード入力があります。

さまざまな種類のイベントが存在し、開発者はこれらのイベントを使用して、JavaScriptでコード化された応答を実行できます。

すべてのHTML要素には、JavaScriptコードをトリガーする一連のイベントが含まれています。

したがって、開発者はこれらのイベントを使用して、ページをより動的にし、ユーザーエクスペリエンスを向上させることができます。

JSでHTMLボタンを生成する方法を見ていきましょう。

ボタンオブジェクトの生成

JavaScriptを使用して、Webページにボタンを追加することは簡単です。

document.createElementメソッドを使用して、新しいHTML要素を作成し、その要素に必要なプロパティを設定し、最後にappendChildメソッドを使用してWebページに要素を追加していく方法です。

以下は、このプロセスを実行するための完全なコード例です。

// ボタン要素を作成
let btn = document.createElement("button");

// ボタンのテキストを設定
btn.innerHTML = "Click Me";

// ボタンを追加する場所を選択
let target = document.getElementById("target");

// ボタンを追加
target.appendChild(btn);

このコードは、document.createElementメソッドを使用して、新しいbutton要素を作成します。

その後、innerHTMLプロパティを使用して、ボタンのテキストをClick Meに設定します。

ボタンを追加する場所を選択するには、Webページ上で既に存在する要素を使用することができます。

上記の例では、getElementByIdメソッドを使用して、IDがtargetの要素を取得しています。

最後に、appendChildメソッドを使用して、target要素の最後にボタン要素を追加します。

これにより、Webページに新しいボタンが表示されます。

もう一つ、ボタン要素を作成する方法は、次のようになります。

let btn = document.createElement("button");
btn.textContent = "Click Me";

// ボタンを追加する場所を選択
let target = document.querySelector(".button-container");

// ボタンを追加
target.insertBefore(btn, target.firstChild);

See the Pen JavaScript ボタン作成 by dev.K | Webアプリ開発者 (@enjinia_f) on CodePen.

この例では、textContentプロパティを使用して、ボタンのテキストを設定しています。

querySelectorメソッドを使用して、クラス名がbutton-containerである要素を取得しています。

そして、insertBeforeメソッドを使用して、ボタン要素をtarget要素の最初の子要素として追加しています。

JavaScriptを使用してWebページに要素を追加することは簡単で、ユーザーインタフェースを改善するために非常に役立ちます。

ボタンオブジェクトのプロパティ

プロジェクトの必要に応じて、ボタンの名前、type、value属性を設定することもでき、時にはフォーム用のtype='submit'ボタンを作成する必要があります。

ウェブ開発において、フォームを作成することは非常に一般的です。

フォームには、ユーザーが入力した情報をサーバーに送信するための機能が備わっています。

フォームには、テキスト入力、ラジオボタン、チェックボックス、ドロップダウンリストなど、様々な入力フィールドがあります。

しかし、最も重要な要素の一つは、送信ボタンです。

ボタン オブジェクトのプロパティは下記となります。

Property	概要
autofocus	ページロード時に ボタンに自動的にフォーカスが当たるようにするかどうかを設定または返します
disabled	ボタンが無効であるかどうかの設定または返します。
form	ボタンを含むフォームへの参照を返します。
formAction	ボタンのformaction属性の値を設定または返します。
formEnctype	ボタンの formenctype 属性の値を設定または返します。
formMethod	ボタンのformmethod属性の値を設定または返します。
formNoValidate	送信時にフォームデータの検証を行うか否かを設定または返します。
formTarget	ボタンのformtarget属性の値を設定または返します。
name	ボタンのname属性の値を設定または返します。
type	ボタンの種類を設定または返します。
value	ボタンのvalue属性の値を設定または返します。

以下のコードは、JavaScriptを使用して送信ボタンを作成する例です。

createElementメソッドを使用して、ボタンオブジェクトを作成し、その後に必要なプロパティを設定しています。

// ボタンオブジェクトの作成
let btn = document.createElement("button");

// ボタンのテキストを設定
btn.innerHTML = "送信";

// ボタンのタイプを設定
btn.type = "submit";

// ボタンのname属性を設定
btn.name = "submitBtn";

// ボタンをドキュメントに追加
document.body.appendChild(btn);

上記のコードの場合、下記のようにHTMLのボタンタグとして作成されます。

<button type="submit" name="submitBtn">
  送信
</button>

上記のコードによって、HTMLの送信ボタンと同様のボタンが作成されます。

このボタンは、type="submit"属性を持ち、フォームが送信されるときに押されます。

また、ボタンにはname属性が設定され、フォームを処理するために必要な情報をサーバーに送信するのに役立ちます。

JavaScriptでは、標準プロパティやイベントもサポートされています。

たとえば、focusやclassListなどがあります。

これらのプロパティやイベントは、ボタンの動作を変更するのに役立ちます。

以上が、JavaScriptを使用してフォーム用の送信ボタンを作成する方法です。

ボタンのプロパティやJavaScriptの標準プロパティ、イベントを活用してフォームの見た目や動作を変更することができます。

イベントハンドラ

JavaScriptでは、クリック、変更、読み込みなどの様々なイベントハンドラーがあります。一般的に使用されるものには、onclick、onchange、onloadなどがあります。

イベントハンドラーは、ユーザーがWebページでクリックしたり、何かしらの動作をしたときに関数が実行されるようになります。

例えば、ボタンをクリックしたときに何かしらの処理を実行したい場合は、以下のようにonclickプロパティを変更して関数を呼び出すことができます。

// 新しいボタン要素を作成
let btn = document.createElement("button");

// ボタンのテキストを設定
btn.innerHTML = "Click me";

// ボタンにクリックイベントのハンドラーを割り当てる
btn.onclick = () => {
  alert("ボタンがクリックされました!!");
};

// ボタンをbody要素に追加
document.body.appendChild(btn);

See the Pen JavaScript ボタン作成 onclickプロパティ by dev.K | Webアプリ開発者 (@enjinia_f) on CodePen.

DOMプロパティを使用してイベントハンドラーを割り当てることができます。

イベントハンドラーがHTML属性を使用して割り当てられている場合、ブラウザはそれを読み取り、属性の内容から新しい関数を作成し、それをDOMプロパティに書き込みます。

そして、ユーザーがボタンをクリックすると、HTMLのonclickイベント属性が機能します。

また、イベントリスナーの追加には、addEventListenerメソッドを使用することもできます。

このメソッドは、特別な制約がないため、より柔軟にイベントハンドラーを割り当てることができます。

その制約は、次のステップで解説致します。

// 新しいボタン要素を作成
let btn = document.createElement("button");

// ボタンのテキストを設定
btn.innerHTML = "Click me";

// ボタンにクリックイベントのリスナーを追加
btn.addEventListener("click", () => {
  alert("ボタンがクリックされました!!");
});

// ボタンをbody要素に追加
document.body.appendChild(btn);

See the Pen JavaScript ボタン作成 onclickプロパティ by dev.K | Webアプリ開発者 (@enjinia_f) on CodePen.

上記のコードは、新しいボタン要素を作成し、クリックイベントのハンドラーまたはリスナーを割り当て、それをbody要素に追加する方法を示しています。

ハンドラーを使用するか、リスナーを使用するかは、開発者の好みや状況に応じて異なります。

addEventListener()とonclick

addEventListenerとonclickは、両方ともイベントを処理するための方法ですが、使い方には違いがあります。

onclickは、HTML属性であるため、HTML要素または要素内に直接追加できます。

一方、addEventListenerはJavaScriptで使用できます。

onclickは、1つのインラインイベントしか割り当てられず、複数回書き込むと上書きされてしまうため、1つの要素に複数のonclickを追加することはお勧めしません。

addEventListenerを使用すると、1つの要素に複数のイベントハンドラを適用することができ、他のイベントハンドラを上書きしません。

以下は、addEventListenerを使用してハンドラを追加する方法の例です。

const btn = document.createElement("button");
document.body.appendChild(btn);
btn.innerHTML = "Click me";

btn.addEventListener("click",
function () {
    alert("最初のクリック動作");
  },
  false
);

btn.addEventListener("click",
  function () {
 alert("addEventListenerで2回目のクリック動作を行う。");
  },
  false
);

See the Pen JavaScript addEventListenerとonclick by dev.K | Webアプリ開発者 (@enjinia_f) on CodePen.

この例では、同じイベントに2つのハンドラが追加されており、イベントが発生した順序を制御することができます。

onclickは、addEventListenerと比べて効果的で迅速ですが、1つの要素に複数のイベントを追加する必要がある場合は、addEventListenerを使用することをお勧めします。

以下は、onclickを使用してハンドラを追加する方法の例です。

let btn = document.createElement("button");
btn.innerHTML = "Click me";

btn.onclick = function () {
alert("最初のクリック動作");
}

btn.onclick = function () {
alert("2回目のonclickが実行され、1回目は実行されない");
}

document.body.appendChild(btn);

See the Pen JavaScript ボタン作成 onclick複数 by dev.K | Webアプリ開発者 (@enjinia_f) on CodePen.

この例では、1つのイベントハンドラしか追加されておらず、要素に複数のonclickを追加することはお勧めしません。

以上のように、両方の方法には長所と短所がありますが、addEventListenerを使用することをお勧めします。

ただし、古いブラウザを使用している場合は、onclickを使用することになるかもしれません。

イベントハンドラを削除

JavaScriptにおいて、addEventListenerメソッドを使用してイベントリスナーを登録することができます。

しかし、イベントリスナーが不要になった場合は、removeEventListenerを使用して、登録したイベントリスナーを削除することができます。

以下のコードでは、addEventListenerを使用して、クリックイベントハンドラを定義し、削除する方法を示しています。

function clickHandler() {
  alert("Clicked!");
  removeClickEvent();
}

const btn = document.createElement("button");
document.body.appendChild(btn);
btn.innerHTML = "Click me";
btn.addEventListener("click", clickHandler);

function removeClickEvent() {
  setTimeout(() => {
    const buttonClicked = clickHandler;
    btn.removeEventListener("click", buttonClicked);
    alert("イベントリスナーが削除されました");
  }, 2000);
}

See the Pen JavaScript addEventListenerの削除 by dev.K | Webアプリ開発者 (@enjinia_f) on CodePen.

上記では、ボタンがクリックされると、clickHandler関数が実行され、アラートが表示されます。

そして、removeClickEvent関数が呼び出されます。

removeClickEvent関数では、2秒後にイベントリスナーが削除され、再度アラートが表示されます。

このコードでは、removeEventListenerメソッドを使用して、ボタンからclickイベントのリスナーを削除しています。そのため、2秒後にボタンをクリックしても、もう一度イベントが発火しないようになります。

removeEventListener()を呼び出す際には、addEventListener()で使用した関数への参照を渡す必要があります。つまり、最初に追加された関数にアクセスできる必要があります。

もし関数が無名関数として定義されている場合、removeEventListener()は使用できません。

しかし、無名関数が関数式として定義されている場合は、変数名を渡してイベントを削除することができます。

また、addEventListener()で関数を変数に保存しない場合、その関数を削除することはできません。

イベントリスナーを削除するには、関数を変数に保存する必要があります。

例えば、以下のように関数を変数に保存することができます。

// クリックイベントハンドラの定義
function clickHandler() {
  const btn = document.createElement('button');
  // 無名関数でクリックイベントリスナーを追加する
  btn.addEventListener('click', function buttonClicked(e) {
    console.log('clicked!');
  })
}

// クリックイベントの削除
function removeClickEvent() {
  // イベントリスナーが削除できないことに注意！
  // 無名関数を使用しているため、削除できません。
  btn.removeEventListener('click', buttonClicked); 
}

// 注意: 関数を変数に保存しない場合、削除することができません。
// イベントリスナーを削除するには、関数を変数に保存する必要があります。

// 例: const buttonClicked = function(e) { console.log('clicked!') };
// または、関数式を使って削除できます。例: btn.addEventListener('click', handleClick);

最新のブラウザでは、DOM要素が削除されると、そのイベントリスナーもJavaScriptのメモリから削除されます。

ただし、要素が参照フリーの場合にのみ発生することに注意してください。

つまり、参照がなくなり、Garbage collection(ガベージコレクション)が可能になります。

ガベージコレクション(GC)は、JavaScriptで使用されるメモリ管理システムであり、自動で私たちの目には見えないように裏側で行われており、不要なオブジェクトや変数がある場合、それらを自動的に削除します。

その結果、削除されたDOM要素に関連するイベントリスナーもメモリから削除されます。これにより、不要なメモリの占有を回避し、パフォーマンスの向上が期待できます。

不要なメモリの占有を回避することは、最も重要です。

つまり、不要なオブジェクトや変数がメモリに残らず、メモリ使用量が最小限に抑えられます。

このようなメモリの回避は、アプリケーションのパフォーマンス向上につながります。

メモリ使用量が過剰になると、システムの動作が遅くなったり、応答性が低下したりする可能性があります。ガベージコレクションによって、不要なメモリが自動的に解放されるため、アプリケーションは効率的にメモリを利用することができます。

これにより、スムーズな実行や高速な応答が可能となります。

クリック数の制御

addEventListenerはクリック数を制御することができます。

以下は、addEventListenerを使用してクリック数を制御する方法のサンプルコードです。

このメソッドには、イベントリスナーが実行される回数を決定するためのオプションとして、onceというブール値があります。

onceがtrueに設定されている場合、イベントリスナーは最初の実行後に自動的に削除されます。

// ボタンを作成
const btn = document.createElement("button");

// ボタンをドキュメントに追加
document.body.appendChild(btn);

// ボタンのラベルを設定
btn.innerHTML = "Click me";

// onclickプロパティを使って、毎回実行するイベントを追加
btn.onclick = function () {
  alert("毎回実行されます");
};

// イベントリスナーを追加して、初回のクリック時のみ実行するように設定
function sayOnce() {
  alert("初回の一度のみ");
}

btn.addEventListener("click", sayOnce, { once: true });

See the Pen JavaScript addEventListener回数の制御 by dev.K | Webアプリ開発者 (@enjinia_f) on CodePen.

このコードでは、 btn要素にクリックイベントを追加しています。

sayOnce関数は、初回のクリック時にのみ実行されます。

2回目以降のクリックでは、onclickプロパティによって追加されたイベントのみが実行されます。

これは、onceオプションが trueに設定されているため、イベントリスナーが自動的に削除されたためです。

共通のイベント

イベントリスナーについて学習しましたが、JavaScriptにはさらに多くのイベントがあります。

下記の最も一般的なイベントのいくつかについて説明します。

マウスイベント

マウスイベントは、最も頻繁に使用されるイベントの 1 つです。

これらは、マウスのボタンのクリック、またはマウス ポインターのホバーリングと移動を伴うイベントを指します。

これらのイベントは、タッチデバイスでの同等のアクションにも対応しています。

event	概要
click	要素上でマウスが押されて離されたときに発生します
dblclick	要素が2 回クリックされたときに発生します
mouseenter	ポインタが要素に入ったときに発生します
mouseleave	ポインタが要素を離れたときに発生します
mousemove	ポインタが要素内を移動するたびに発生します

フォームイベント

フォームイベントは、input要素の選択または選択解除、フォームの送信など、フォームに関連する動作です。

event	概要
submit	フォームが送信されたときに発生します
focus	要素 (入力など) がフォーカスを受け取ると発生します
blur	要素がフォーカスを失ったときに発生します

キーボードイベント

キーボードイベントは、キーを押す、キーを持ち上げる、キーを押し続けるなどのキーボード操作を処理するために使用されます。

event	概要
keydown	キーが押されたときに 1 回発火する
keyup	キーが離されたときに 1 回発火する
keypress	キーを押している間、連射

キーボードイベントには、個々のキーにアクセスするための特定のプロパティがあります。

Event objectパラメーターがイベントリスナーに渡されると、発生した動作に関する詳細な情報にアクセスできます。

キーボードオブジェクトに関連する2つのプロパティには、 keyとcodeがあります。

document.addEventListener('keydown', event => {
    console.log('key: ' + event.key);
    console.log('code: ' + event.code);
});  

コンソールでENTERを押すと、今度はキーボードのキーを押すことができます。

Event object

Eventオブジェクトは、JavaScriptのWeb APIであり、ブラウザで発生する様々なイベントに関する情報を提供します。

このオブジェクトは、すべてのイベントがアクセスできるプロパティとメソッドで構成されています。

たとえば、ボタンがクリックされたときに発生するイベントは、Eventオブジェクトを介してアクセスできます。

Eventオブジェクトは、イベントリスナー関数を介してパラメータとして渡されます。

通常、eventまたはeという名前で参照されます。

以下は、HTMLのハンドラでEventオブジェクトを使用する例です。

<button type="button" onclick="alert(event.type)" value="Event type">Click me</button>

このHTMLの例では、クリックイベントが発生すると、event.typeプロパティが使用されます。

JavaScriptのコードとして、上記のHTMLは以下のように書くことができます。

const button = document.querySelector('button');

button.addEventListener('click', function(event) {
alert(event.type);
});

このコードでは、querySelectorメソッドを使用して、HTMLの<button>要素を取得し、それに対してclickイベントのリスナーを追加します。

リスナー関数の引数には、イベントオブジェクトが渡されます。

この例では、tevent.typeプロパティが使用され、イベントの種類がアラートで表示されます。

HTMLのonclick属性によるハンドラーは、JavaScriptのaddEventListenerメソッドを使用して、同じように記述することができます。

<button type="button" onclick="alert(event.type)" value="Event type">Click me</button>

const button = document.querySelector('button');
button.addEventListener('click', function(event) {
  alert(event.type);
});

このように、JavaScriptのコードでHTMLのイベントハンドラーを置き換えることができます。

また、イベントオブジェクトを使用することで、イベントがどのように発生したかに関する詳細情報を取得できます。

下記のマウスイベントでは、どのマウスボタンが押されたかを確認できます。

const link = document.getElementById('my-link')
link.addEventListener('mousedown', event => {
  // マウスボタンが押された
  console.log(event.button) 
//0=left, 2=right
})

以下に、マウスイベントやポインターイベントから取得できる情報を含めた例を示します。

const link = document.getElementById('my-link');
link.addEventListener('mousedown', event => {
  // マウスボタンが押された
  if (event.button === 0) {
    console.log('左ボタンが押されました');
  } else if (event.button === 2) {
    console.log('右ボタンが押されました');
  } else {
    console.log('その他のボタンが押されました');
  }
});

const btn = document.createElement('button');
document.body.appendChild(btn);
btn.innerHTML = 'Click me';

btn.onclick = function(event) {
  alert(event.type + ' at ' + event.currentTarget);
  alert('value: ' + event.clientX + ':' + event.clientY);
};

ここでは、mousedownイベントを使って、マウスボタンが押されたときの処理を行っています。

event.buttonプロパティは、押されたマウスボタンの番号を返します。

ただし、ブラウザによって番号が異なる場合があるため、それに応じて判定する必要があります。

左クリックは0、右クリックは2です。

また、ポインターイベントからは、マウスポインターの座標を取得できます。

event.clientXおよびevent.clientYプロパティは、ブラウザーウィンドウ内でのマウスポインターの相対的な座標を返します。

イベントのバブリングについて

bubbling(バブリング)の原理は単純です。

bubbling(バブリング)は、内側の要素から順次伝播するという性質に由来しています。

イベントが特定の要素で発生した場合、そのイベントはその要素から始まり、その要素を含む親要素、さらには上位の要素に順次伝播します。

この伝播の様子が、水中の泡が上に浮かび上がる（バブルする）ように見えることから、この用語が使われています。

例えば、ボタンがクリックされた場合、クリックイベントはボタン要素で発生し、その後、ボタンを包含する親要素、さらには上位の要素まで順次イベントが伝播します。

このバブリングの性質を利用することで、親要素や上位の要素でイベントを検知したり処理したりすることが可能になります。

このプロセスは、キャプチャリングフェーズとバブリングフェーズの2つのフェーズで構成されています。

キャプチャリングフェーズは、ルート要素から始まり、親要素に順次伝播していきます。

次に、イベントが発生した要素であるターゲットフェーズが実行されます。

最後に、バブリングフェーズが実行されます。

このフェーズでは、ターゲット要素から始まり、親要素、祖先要素に順次伝播していきます。

以下のコードを例に考えてみましょう。

<form onclick="alert('form')">FORM
  <div onclick="alert('div')">DIV
    <p onclick="alert('p')">P</p>
  </div>
</form>

この場合、<p>要素がクリックされたとき、以下のような順序でイベントが伝播します。

・ キャプチャリングフェーズ：

・ document

・ <html>

・ <body>

・ <form>

・ <div>

・ <p>

・ ターゲットフェーズ：イベントが発生した要素（ここでは<p>）で実行される。

・ バブリングフェーズ：

・ <p>

・ <div>

・ <form>

一般的に、ほとんどのイベントは「キャプチャリングフェーズ」をスキップして、直ちに「バブリングフェーズ」に進みます。

ただし、focusイベントに関しては、通常は「バブリングフェーズ」がスキップされますが、イベントフェーズを「キャプチャリングフェーズ」から始めることができるため、「バブリングフェーズ」に入ることもあります。

このように、HTML要素のイベントが発生すると、キャプチャリングフェーズとバブリングフェーズによって親要素、祖先要素に順次伝播していきます。

最後に

JavaScriptにおいて、イベントはWebサイトで発生する動作を指します。

ユーザーが行った動作に応答することができるようになると、JavaScriptはインタラクティブで動的になります。

イベントリスナーを設定する方法として、addEventListenerを使用することが一般的で堅牢な方法です。

このメソッドは、イベントの種類を指定できます。

例えば、mousedown、mouseup、mousemove、click、dblclickなどの異なるマウスイベントがあります。

イベントタイプを指定することで、さまざまなタイミングでハンドラを実行することができる柔軟性を兼ね備えています。

一方、onclickは1つのクリックイベントを簡潔に処理する際に便利ですが、addEventListenerの方が汎用性が高く、一般的に好まれます。

Reactを導入する場合にも、addEventListenerを使用することが推奨されます。

これは、Reactがイベントシステムを再実装し、より一貫性のあるイベント処理を提供するためです。

Webサイトで発生するさまざまなイベントに対して、適切なイベントハンドラを設定することで、ユーザーがWebページと対話できるようになります。

例えば、クリック、ホバーリング、フォームの送信、ページの読み込み、キーボードのキーの押下などがあります。

JavaScriptを使用してイベントを処理することで、Webサイトがより動的かつインタラクティブになります。

これにより、ユーザーはより豊かな体験を得ることができます。

本日は以上となります。

最後まで読んで頂きありがとうございます。

この記事が役に立ったら、ブックマークし他の方にも共有して頂けると嬉しいです。