[JS] event.preventDefault()について
8769 ワード
event.preventDefault()とは?
いくつかのラベルは、
<a>および<submit>のような特殊な機能を有する.<a>タグはhrefに接続されたリンクを介してページに移動する機能を有し、<submit>タグはタグ値を送信しながらページをリフレッシュする機能を有する.これらの機能は非常に有用ですが、使用しないと不便になる可能性があります.このとき使用されるのがevent.preventDefault()です.<a href="https://github.com/Kyeom1997" id="link">김형겸의 깃허브</a>
<script>
document.querySelector('#link').addEventListener('click', function(e){
e.preventDefault();
});
// a 태그 클릭 시 preventDefault를 사용했기 때문에 링크값이 있어도 이동하지 않는다.
</script><submit>も同様に使用します.const onLoginSubmit = (e) => {
e.preventDefault();
loginForm.classList.add("hidden");
const username = loginInput.value;
localStorage.setItem(USERNAME_KEY, username);
paintGreetings(username);
}preventDefaultとstopPropagationの違い
JSがイベントの伝播を阻止する方法には,
preventDefaultsの他にstopPropagationがある.ここで、preventDefaultsとstopPropagationの違いは、stopPropagationがイベントbundlingを中断できることである.イベントとは?
イベントbundlingとは、あるスクリーン要素でイベントが発生すると、そのイベントがより上位のスクリーン要素に渡される特性です.
<body>
<div class="one">
<div class="two">
<div class="three">
</div>
</div>
</div>
</body>const divs = document.querySelectorAll('div');
divs.forEach(function(div) {
div.addEventListener('click', logEvent);
});
function logEvent(event) {
console.log(event.currentTarget.className);
}
divラベルを1つクリックしただけで、ブラウザがイベントを検出する方法で3つのイベントが発生します.イベントが特定のスクリーン要素で発生すると、ブラウザはイベントを上部のスクリーン要素に伝播します.これらのサブエレメントから親エレメントへのイベント伝播方法をイベントbundlingと呼びます.
同様に、
event.preventDefault()がhtml内の標準タグの基本イベントの発生を阻止する方法にすぎない場合、event.stopPropagation()は、前述したように、上位別名へのイベントの伝播を阻止する、すなわちイベントbundlingの相違を阻止することを確認することができる.したがって、イベントが上位DOMに伝播しないようにするには、event.stopPropagationを使用する必要がある.参考資料
https://ifuwanna.tistory.com/289
https://joshua1988.github.io/web-development/javascript/event-propagation-delegation/
Reference
この問題について([JS] event.preventDefault()について), 我々は、より多くの情報をここで見つけました https://velog.io/@hang_kem_0531/JS-event.preventDefault-알아보기テキストは自由に共有またはコピーできます。ただし、このドキュメントのURLは参考URLとして残しておいてください。
Collection and Share based on the CC Protocol