TILブラウザのイベント
11639 ワード
1.イベントとは？
2.フォームイベント
3.マウスイベント
4.ドキュメントイベントの読み込み
1.イベントとは？
🔑 ブラウザのイベントは
🔑 イベント用語
<input type="checkbox" onmouseover="alert('선택할 수 없습니다.')">
<!--
이벤트 타겟: checkbox
이벤트 타입: onmouseover(마우스 커서를 타겟 위에 올렸을 때)
이벤트 핸들러: alert('선택할 수 없습니다.')
-->2.フォームイベント
🔑 submit:フォーム内の情報をサーバ(submit)に送信するときに発生するイベントタイプ.
<body>
<form id="target" action="submit_result.html">
<label for="book">희망도서</label>
<input id="book" type="name">
<input type="submit">
</form>
<script>
let t = document.getElementById('target');
t.addEventListener('submit', function(event){
if(document.getElementById('book').value.length === 0){
alert('희망도서를 입력하세요.');
event.preventDefault(); // 폼의 action이 실행되는 것을 방지
}
});
</script>
</body> フォームに希望する図書を記入し、「提出」(Submit)ボタンを押します.
-入力されたデータは「submit result.html」に送信されます.
フォームに何も記入せずに「発行」ボタンをクリックします.
-「希望図書を入力してください.」フォームのアクションが実行されていない警告ウィンドウが表示されます.
🔑 フォームに関連するイベントは、主にユーザー入力データの有効性を決定するために使用されます.
3.マウスイベント
🔑 クリック(dblclick):マウスの左ボタン(ダブルクリック)をクリックしたときに発生するイベントのタイプ.
🔑 contextmenu:右クリック時に発生するイベントタイプ.
<body>
<input type="button" id="hider" value="on/off" />
<div id="text">감추기 버튼을 좌클릭하면 문장이 사라지고, 우클릭하면 다시 나타납니다.</div>
<script>
let h = document.getElementById('hider');
h.addEventListener('click', function(event) {
document.getElementById('text').hidden = true;
});
h.addEventListener('contextmenu', function(event) {
document.getElementById('text').hidden = false;
event.preventDefault();
});
</script>4.ドキュメントイベントの読み込み
🔑 load:Webページ上のすべての要素が処理されたときに発生するイベントのタイプ.
<script>
window.addEventListener('load', function(event) {
alert("페이지 로딩이 완료되었습니다.")
});
</script>-MDNイベント、https://developer.mozilla.org/ko/docs/Web/Eventsを参照
-生活コード活動タイプ、https://opentutorials.org/course/1375/6764
-モダンJavaScriptチュートリアル
https://ko.javascript.info/
作成中にエラーが発生した場合は、フィードバックに感謝します。開発者に小さなフィードバックを残してほしいです。ありがとうございます:)
Reference
この問題について(TILブラウザのイベント), 我々は、より多くの情報をここで見つけました https://velog.io/@okcleff/TIL-06브라우저에서의-이벤트テキストは自由に共有またはコピーできます。ただし、このドキュメントのURLは参考URLとして残しておいてください。
Collection and Share based on the CC Protocol