1. はじめに
本記事では、【JavaScript】イベント・イベントハンドラの「プロパティで関連付けする方法」について記載する。
2. プロパティで関連付けする方法
構文
index.js
オブジェクト名.on+イベント名 = function() {
// イベントハンドラ(イベント時に発生してほしい処理)
}
実際どのように記述するかは、下記例題で触れていく。 ## 3. 例題 ### 内容 :::note warn ブラウザ上に表示されている「クリック」というボタンを押すと、 イベント発生という文字列がコンソールへ出力される。 ::: ### 実践前のチュートリアル 実践に入る前に、完成形を先に表示しておく。 
### マークアップ ブラウザに置換前の文字をブラウザへ表示しないといけないので、HTMLの作成から取り掛かる。
index.html
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
</head>
<body>
<input id="btn" type="button" value="クリック" />
<script src="js/index.js"></script>
</body>
</html>
マークアップしブラウザで表示すると以下のようになる。
### JavaScriptの記述 次にJavaScriptを仕上げていく。
index.js
let b = document.getElementById('btn');
b.onclick = function () {
console.log('イベント発生');
};
上記構文に関して、順を追って解説していく。
let b = document.getElementById('btn');
HTMLに表記したinputタグ内の"btn"というidを取得している。
b.onclick = function ()
クリックした際の挙動を変数bに対して関数で関連付けている。
console.log('イベント発生');
ボタンをクリックされた際の、出力される文字列の記述。
### ブラウザでの検証 実際にブラウザにて挙動を確認していく。  検証の結果、
ボタンをクリックすると、イベント発生という、JavaScriptで記述された文字列がコンソールへ出力することができた。