[JS]DOMイベント(イベント)
21717 ワード
≪イベント｜Events｜ldap≫
ブラウザのイベントは
사용자가 클릭을 했을 '때', 스크롤을 했을 '때', 필드의 내용을 바꾸었을 '때'와 같은 것을 의미で、ブラウザはそれを検出して通知し、ユーザーとブラウザの間でインタラクションを行うことができます.이벤트 리스너を使用してイベントを検出する.document.querySelector('.myButton').addEventListener('click', function () {
alert('Clicked!');
});click이라는 이벤트の発生時に이벤트 핸들러 function () { ... }で処理される이벤트 리스너を定義するコードである.上記addEventListenerおよびDOMイベントは、setTimeoutと同様に動作する.
さらに、より多くのアクティビティはイベントのタイプで確認できます.
イベントハンドラ登録方式と
1) inline
HTML要素のイベントハンドラ属性(attribute)にイベントハンドラを登録します.
<input type='button' onclick='fn()' value='button' />
<script>
function fn () {
alert('Hello world');
console.log(this);
}
</script>
/* Angular/React/Vue.js와 같은 프레임워크/라이브러리에서는
동일한 관심사로 생각하여 분리하지 않고
인라인 이벤트 핸들러 방식으로 이벤트를 처리한다고 한다. */inline方式は、イベントハンドラ内部の
this는 전역 객체 windowを指す通常の関数として呼び出される.
2) Property Listener
イベントをイベントターゲットに対応するオブジェクトのプロパティとして登録します.
<input type='button' id='target' value='button' />
<script>
const element = document.getElementById('target');
element.onclick = function(){
alert('Hello world 1');
}
element.onclick = function(){
alert('Hello world 2');
console.log(this);
}
/* Hello world 1는 실행되지 않는다.*/
</script>Property Listenerメソッドは
this는 이벤트에 바인딩된 요소です.
参照
Attribute와 PropertyHTMLの属性はAttribute CSSの属性はPropertyです.ドキュメントを表示するときにHTMLでもPropertyと書くことがあります.
これは、
attributeがhtmlドキュメントの静的(不変)属性そのものであり、propertyがhtml DOMの動的(可変)属性であることを意味する.3) addEventListener( )
イベントハンドラの登録に最適な方法
2)と異なり,複数のイベントハンドラを登録することができる.
<input type='button' id='target' value='button' />
<script>
const element = document.getElementById('target');
element.addEventListener('click', function () {
alert('Hello world 1');
console.log(this);
});
element.addEventListener('click', function () {
alert('Hello world 2');
});
/* Hello world 1와 Hello world 2가 정상적으로 실행된다.*/
</script>addEventListenerメソッドで指定されたイベントハンドラ内部の
this는 이벤트리스너에 바인딩된 요소.
イベントの例
会員登録の例を聞いてみましょう.
次のコードはaddEventListener()を使用して
input tag에 글자를 입력할 때마다 이벤트를 발생のコードを入力し、入力した文字が2文字未満の場合にメッセージを出力します.📝コード#コード#<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<label for='your-name'>이름:
<input type='text' id='your-name'>
<p class='message'></p>
</label>
<script>
const input = document.querySelector('input[type=text]');
const message = document.querySelector('.message');
input.addEventListener('input', function () {
if(input.value.length < 2){
message.innerHTML='2글자 이상 입력해주세요.';
message.style.color='red';
} else {
message.innerHTML='';
}
});
</script>
</body>
</html>
イベントオブジェクト
이벤트가 발생하면 이벤트 객체는 동적으로 생성、アクティブな이벤트 핸들러의 parameter로 전달を処理できます.addEventListener('click', function (e) { // 해당 e가 event obejct
console.log(e);
});다양한 Property와 method를 가지고 있다.の関連コンテンツはEvent Objectで見つけることができる.代表的に使われている
targetとcurrentTargetを見てみましょう.1) currentTarget
MDN文書によれば、It alwaysは、イベントハンドラに付加された要素、すなわち
event handler가 붙여진 요소を参照することを意味する.2) target
逆にtargetは
실제로 이벤트를 발생시킨 요소を参照する.次の例では、操作方法を示します.
📝コード#コード#
<button id='target'>
<span style='background-color: red;'>Hello</span>
</button>
<script>
const element = document.getElementById('target');
element.addEventListener('click', function(event){
console.log(event.currentTarget);
console.log(event.target);
});
</script>
event handlerに貼り付けられた要素はbuttonなのでevent.CurrentTargetは
부모 요소인 button을 반환です.ここで私たちは
span을 눌러 이벤트를 발생 시켰기 때문에 eventですtargetは자식 요소인 span을 반환と確認できます.Reference
Reference
この問題について([JS]DOMイベント(イベント)), 我々は、より多くの情報をここで見つけました https://velog.io/@jiseong/JS-DOM-이벤트eventテキストは自由に共有またはコピーできます。ただし、このドキュメントのURLは参考URLとして残しておいてください。
Collection and Share based on the CC Protocol