JavaScript イベントハンドラ
JavaScript イベントハンドラ
本日は、イベントについて記載したいと思います。
webページを見ている閲覧者が、クリックをする、マウスを乗せる、ボタンを押す、入力をする、等のアクションを起こした際に、イベントが起こるスイッチの様なものです。
例】閲覧者が開くボタンを押すと、地図が開く
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>ウィンドウを開く</title>
<script>
function openWin() { //windowを開く
var win = window.open('', '', 'width=520, height=400'); //windowを幅520 高さ400で開く
win.document.open(); //documentオブジェクトを開く
win.document.write('<iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d1619.4862278799387!2d139.71230443229513!3d35.72689593000951!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x60188d6830fba123%3A0x26aa4cb874468aea!2zKOagqinjgrjjg6Xjg7Pjgq_loILmm7jlupcg5rGg6KKL5pys5bqX!5e0!3m2!1sja!2sjp!4v1395637499033" width="600" height="450" frameborder="0" style="border:0"></iframe>'); //イメージを表示
win.document.write('<button onclick="window.close()">閉じる</button>'); //[閉じる]ボタンを表示
win.document.close(); //documentオブジェクトを閉じる
}
</script>
</head>
<body>
<button name="openBtn" onclick="openWin()">開く</button>
</body>
</html>