[TIL][JS]Event
1543 ワード
≪イベント|Events|ldap≫ interaction: 상호작용
Webサービスを利用するユーザと効率的に対話するために、
HTMLとCSS構造のみが限られており、JavaScript
動的に対話できます.
JavaScriptの多くの要素の中で、Event
も機能します.
addEventListener
アクティビティを実行するときに使用する関数.
ご覧のように直感的な単語は
活動がいつ起こるかを聞くという意味です.요소.addEventListener(이벤트 종류, function() {
// 이벤트 발생 시 실행 내용
上記のようにすることができます.
callback function
上記の例では、パラメータとして渡される関数を「コールバック関数」と呼びます.
Click Event
click
イベントではサイト上で最も多くのイベントが発生します.const thisIsButton = document.getElementsByClassName('login-btn')[0];
thisIsButton.addEventListener('click', function() {
const password = document.getElementById('password').value;
const rePassword = document.getElementById('re-password').value;
if (!password) {
alert('비밀번호를 입력해주세요!');
return;
}
getElementsByClassNameを使用して、login-btnという名前のクラスを検索します.ここで、「getElements」のように複数型であるのは、クラスが同じクラス名で複数存在できるためであり、そのため配列[0]の位置も宣言されている.
Key Event
key down
key up
これはプレイヤーがキーボードを押したり、浮いたりしたときに発生するイベントです.const thisIsPw = document.getElementById('password');
const thisIsCode = document.getElementById('code');
thisIsPw.addEventListener('keydown', function(event) {
thisIsCode.innerHTML = event.keyCode;
});
getElementByIDを使用して「password」というIDを検索します.
キーが押されると、上記のイベントが発生するように設定できます.
Reference
この問題について([TIL][JS]Event), 我々は、より多くの情報をここで見つけました
https://velog.io/@kbhooo/TILJSEvent
テキストは自由に共有またはコピーできます。ただし、このドキュメントのURLは参考URLとして残しておいてください。
Collection and Share based on the CC Protocol
요소.addEventListener(이벤트 종류, function() {
// 이벤트 발생 시 실행 내용
const thisIsButton = document.getElementsByClassName('login-btn')[0];
thisIsButton.addEventListener('click', function() {
const password = document.getElementById('password').value;
const rePassword = document.getElementById('re-password').value;
if (!password) {
alert('비밀번호를 입력해주세요!');
return;
}
const thisIsPw = document.getElementById('password');
const thisIsCode = document.getElementById('code');
thisIsPw.addEventListener('keydown', function(event) {
thisIsCode.innerHTML = event.keyCode;
});
Reference
この問題について([TIL][JS]Event), 我々は、より多くの情報をここで見つけました https://velog.io/@kbhooo/TILJSEventテキストは自由に共有またはコピーできます。ただし、このドキュメントのURLは参考URLとして残しておいてください。
Collection and Share based on the CC Protocol