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

index.js

<要素名 on+イベント名 = 'イベントハンドラ'>…</要素名>

###例

index.js

<input type="button" value="取得" onclick="show()" />

上記例の意味としては、

取得と書かれたボタンをクリックされるとshowメソッドを呼ぶ

という意味となる。
##3. 例題
###内容
:::note warn
ボタンをクリックすると、'イベント発生'と出力されるプログラムの作成
:::
###実践前のチュートリアル
実践に入る前に、完成形を先に表示しておく。

###マークアップブラウザに置換前の文字をブラウザへ表示しないといけないので、HTMLの作成から取り掛かる。

index.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 type="button" value="クリック" onclick="clicked()" />
    <script src="js/index.js"></script>
  </body>
</html>

マークアップしブラウザで表示すると以下のようになる。 ![スクリーンショット 2021-11-15 11.37.36.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/662822/1a44de68-34a8-0644-8e79-3b1288b38006.png)

###JavaScriptの記述次にJavaScriptを仕上げていく。

index.js

function clicked() {
  console.log('イベント発生');
}

今回はボタンをクリックしてコンソールに出力するだけの簡易的なものなので、詳細説明は省略する。

###ブラウザでの検証実際にブラウザにて挙動を確認していく。 ![ezgif.com-gif-maker.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/662822/f27c6f5c-76fd-5a59-cbf3-6446aa8fd671.gif)

検証の結果、

クリックボタンを押すと、コンソールへ'イベント発生'の文字列を出力することが出来た。

##4. おわりに
次項:【JavaScript】イベント・イベントハンドラ③ 「プロパティで関連付けする方法」に続く。