YasuakiHirano/jquery_event_test.html

## jquery_event_test.html
<html>
<head>
    <title>jqueryイベントテスト</title>
    <script
            src="https://code.jquery.com/jquery-3.4.1.min.js"
            integrity="sha256-CSXorXvZcTkaix6Yvo6HppcZGetbYMGWSFlBw8HfCJo="
            crossorigin="anonymous"></script>
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css"
          integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
    <script>
        $(function () {
            // developer tool で読み込まれているのがわかる
            console.log("start test page");

            // clickイベント
            $("#btn_click").click(function () {
                alert("test button click!!");
            });

            // changeイベント
            $("#test_txt_box").change(function () {
                alert("form value change!!");
            });

            // focusイベント
            $("#test_focus").focus(function () {
                alert("focus test!!");
            });

            // blurイベント
            $("#test_blur").blur(function () {
                alert("blur test!!");
            });

            // dblclickイベント
            $("#btn_dblclick_click").dblclick(function () {
                alert("dblclick test!!");
            });

            // keydownイベント
            $("#test_keydown").keydown(function (e) {
                alert("keydown test!! :" + e.keyCode);
            });

            console.log("end test page read");
        });
    </script>
</head>
<body>
<div class="container mt-3">
    <button id="btn_click" class="btn btn-primary">clickイベントテスト</button>
    <input type="text" placeholder="changeイベントテスト" id="test_txt_box" class="form-control mt-3"/>
    <input type="text" placeholder="focusイベントテスト" id="test_focus" class="form-control mt-3"/>
    <input type="text" placeholder="blurイベントテスト" id="test_blur" class="form-control mt-3"/>
    <button id="btn_dblclick_click" class="btn btn-primary mt-3">dblclickイベントテスト</button>
    <input type="text" placeholder="keydownイベントテスト" id="test_keydown" class="form-control mt-3"/>
</div>
</body>
</html>
	<html>
	<head>
	<title>jqueryイベントテスト</title>
	<script
	src="https://code.jquery.com/jquery-3.4.1.min.js"
	integrity="sha256-CSXorXvZcTkaix6Yvo6HppcZGetbYMGWSFlBw8HfCJo="
	crossorigin="anonymous"></script>
	<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css"
	integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
	<script>
	$(function () {
	// developer tool で読み込まれているのがわかる
	console.log("start test page");

	// clickイベント
	$("#btn_click").click(function () {
	alert("test button click!!");
	});

	// changeイベント
	$("#test_txt_box").change(function () {
	alert("form value change!!");
	});

	// focusイベント
	$("#test_focus").focus(function () {
	alert("focus test!!");
	});

	// blurイベント
	$("#test_blur").blur(function () {
	alert("blur test!!");
	});

	// dblclickイベント
	$("#btn_dblclick_click").dblclick(function () {
	alert("dblclick test!!");
	});

	// keydownイベント
	$("#test_keydown").keydown(function (e) {
	alert("keydown test!! :" + e.keyCode);
	});

	console.log("end test page read");
	});
	</script>
	</head>
	<body>
	<div class="container mt-3">
	<button id="btn_click" class="btn btn-primary">clickイベントテスト</button>
	<input type="text" placeholder="changeイベントテスト" id="test_txt_box" class="form-control mt-3"/>
	<input type="text" placeholder="focusイベントテスト" id="test_focus" class="form-control mt-3"/>
	<input type="text" placeholder="blurイベントテスト" id="test_blur" class="form-control mt-3"/>
	<button id="btn_dblclick_click" class="btn btn-primary mt-3">dblclickイベントテスト</button>
	<input type="text" placeholder="keydownイベントテスト" id="test_keydown" class="form-control mt-3"/>
	</div>
	</body>
	</html>