[FC]イベントの理解(接続イベント)Day-9

Event?

何かが起こる行為を活動といいます.

ユーザーによって引き起こされたイベント

(Web上のクリック、mouseover、mousemove、mousewheel、スクロールなど)

システムイベント

(loar, error)

<a href="#">링크</a>

<script>main.js</script>

イベントの接続方法

DOM.onclick = () => {}

DOM.addEventListener(「イベント」=>{})

通常addEventListenerが使用されます.
ex) main.js (onclick)
alertの前のウィンドウは省略されています.
window.alert(「Clickリンク」);

const a = document.querySelector("a");
a.onclick = () => {
	alert("Click 링크");
}

addEventListenerを多く使用する理由は上書きする必要はありません。(既存の接続機能は削除できません。)

const a = document.querySelector("a");
a.addEventListener("click", () => {
	console.log("클릭하셨습니다.");
});

イベント発生時に関連する引数として渡されるイベントオブジェクト。

<a href="https://naver.com">네이버</a>
<script>main.js</script>

ex) main.js

リンクの移動を阻止するPreventDefault()

const a = document.querySelector("a");
a.addEventListener("click", (e) => {
    e.preventDefault();
    console.log("Clicked");
});

ex)マウス移動

<div class="box"></div>
<script>main.js</script>

const box = document.querySelector(".box");

box.addEventListener("mousemove", (e) => {
    console.log(`현재 마우스 x 축 위치 : ${e.pageX}`);
    console.log(`현재 마우스 y 축 위치 : ${e.pageY}`);
});

ex)mousewareの例

window.addEventListener("mousewheel", (e) => {
	console.log(e.deltaY)
});

イベント発生の目標

<main>
	<section>
    	<article>
        	<nav>
            	<div></div>
            </nav>
        </article>
    </section>
</main>

e.target

イベントが発生すると、マウスポインタがある要素に戻ります.

e.currentTarget

イベントが発生すると、イベントコンテキストは選択者要素を返します.

const main = document.querySelector("main");

main.addEventListener("click", (e) => {
	console.log(e.currentTarget);
});

e.targetとe.currentTargetの違い

targetはマウスポイントの位置自体を返し、currentTargetは含まれるすべての内容を返します.

const main = document.querySelector("main");

main.addEventListener("click", (e) => {
	console.log(e.target);
});