##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>
###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】イベント・イベントハンドラ③ 「プロパティで関連付けする方法」に続く。