##1. はじめに
本記事では、【JavaScript】イベント・イベントハンドラの「プロパティで関連付けする方法」について記載する。
##2. プロパティで関連付けする方法
###構文

index.js

オブジェクト名.on+イベント名 = function() {
  // イベントハンドラ(イベント時に発生してほしい処理)
}

実際どのように記述するかは、下記例題で触れていく。 ##3. 例題 ###内容 :::note warn ブラウザ上に表示されている「クリック」というボタンを押すと、 イベント発生という文字列がコンソールへ出力される。 ::: ###実践前のチュートリアル実践に入る前に、完成形を先に表示しておく。 ![ezgif.com-gif-maker.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/662822/546337e6-c941-f920-e561-f6e1eb6a9128.gif)

###マークアップブラウザに置換前の文字をブラウザへ表示しないといけないので、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
ボタンをクリックされた際の、出力される文字列の記述。
:::

###ブラウザでの検証実際にブラウザにて挙動を確認していく。 ![ezgif.com-gif-maker.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/662822/9112f19c-f885-d0b2-95f1-51ff5b643d9f.gif) 検証の結果、

ボタンをクリックすると、イベント発生という、JavaScriptで記述された文字列がコンソールへ出力することができた。

##4. おわりに
次項:【JavaScript】イベント・イベントハンドラ④ 「loadイベント」に続く。