##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');
:::note warn
HTMLに表記したinputタグ内の"btn"というidを取得している。
:::
####b.onclick = function ()
:::note warn
クリックした際の挙動を変数bに対して関数で関連付けている。
:::
####console.log('イベント発生');
:::note warn
ボタンをクリックされた際の、出力される文字列の記述。
:::
###ブラウザでの検証 実際にブラウザにて挙動を確認していく。  検証の結果、
ボタンをクリックすると、イベント発生という、JavaScriptで記述された文字列がコンソールへ出力することができた。
##4. おわりに
次項:【JavaScript】イベント・イベントハンドラ④ 「loadイベント」に続く。