DOM이벤트

사용자가 다음과 같은 행동을 하면 반응

클릭, 드래그, 드롭, 호버, 스크롤, 키 입력, 등등

onclick

const btn = document.querySelector('#2'); //id가 2인 버튼

btn.onclick = function () {
		console.log('you clicked me!')
}

// 이런식으로 버튼을 클릭하면 실행되는 함수를 만들수 있다.

onmouseenter

마우스 포인터를 해당 요소 위에 올리면 실행. onclick과 똑같이 쓰인다.

addEventListener

const btn = document.querySelector('h1');

btn.addEventListener('click', () => {
	alert("YOU clicked me!")
})

여러가지 방법으로 작동되게 만들 수 있다.

요소를 먼저 선택하고, 제너럴 메서드인 addEventListener를 쓴다. 스위스군용칼 처럼 여러가지 가능.

• click
• double click (’dblclick’ 으로 입력)
• mouseenter
• mouseup(클릭 손 뗄때)
• mousedown(클릭 누를때)
• 그 외에도 mdn에 다양한 이벤트들이 설명되어있음.

그 다음 콜백함수를 쓴다.

onclick과 addEventListener(click)의 차이

onclick으로 여러가지 함수를 쓰면

btn.onclick = shout;
btn.onclick = twist;

//이렇게 하면 밑에 twist만 실행된다. 
//하나의 객체에 onclick특성은 하나.
//그런데 거기에 여러개 함수를 할당하니 덮어진다.

btn.addEventListener('click', twist)
btn.addEventListener('click', shout)

//이렇게 하면 add니까 둘 다 실행된다. 충돌 없음.
//하나의 함수에 둘 다 넣어도 되지만, 따로 만든 다음 다르게 넣을 필요가 생긴다.

btn.addEventListener('click', twist, { once: true })

// once를 넣어주면 최초 1회만 실행되고 삭제된다.
// 이 밖에도 다양한 옵션이 있다. mdn참조.

다양한 옵션을 넣어서 addEventListener를 사용할때 유연성을 발휘할수 있다.

작동하는 방식, 콜백 발생 시간 등을 통제.

this와 이벤트

const buttons = document.querySelectorAll('button');

for(let button of buttons) {
		button.addEventListener('click', function() {
				console.log('clicked!')
				button.style.color = makeRandColor();
		})
} // 이렇게 하는 것을 함수를 따로 뺀 다음

function colorize() {
		this.style.color = makeRandColor();
}

for(let button of buttons) {
		button.addEventListener('click', colorize()
}

//이렇게 this를 쓰는 함수를 써서 여러군데 활용할수 있다.

키보드 이벤트와 이벤트 객체

이벤트 객체라는 것은 콜백함수에 전달된다.

콜백함수가 그것을 사용하지 않아도.

document.querySelector('button').addEventListener('click', function(e) {
	console.log(e)
})

이렇게 콘솔로그로 찍어보면 이벤트 객체가 나온다.

클릭하면 객체에 대한 마우스 이벤트, XY값, 이벤트 타겟 등 이벤트에 대한 정보를 담고 있는 객체이다.

키보드 이벤트 객체를 받으면 어떤 키가 눌렸는지도 알수 있다.

const input = document.querySelector('input');
input.addEventListener('keydown', funtion () {
		console.log('keydown')
}) // 키보드 키가 눌려질때 뜬다. up은 뗄때 뜬다.

input.addEventListener('keydown', funtion (e) {
		console.log(e)
}) //키보드 이벤트 객체를 콘솔로그로 찍어보면 마우스 이벤트 객체와는 다른게 뜬다.

키보드 이벤트 객체에서 주목할 것은 두가지. code와 key다.

‘q’를 누르면

code: “KeyQ”

key: “q”

라고 뜬다.

input.addEventListener('keydown', funtion (e) {
		console.log(e.key)
		console.log(e.code)
})

스페이스바를 누르면

key: “ “

code: Space

왼쪽 쉬프트를 누르면

key: Shift

code: ShiftLeft

키는 값, code는 키보드 위에서 실제 위치를 나타낸다.

이벤트 객체는 모든 이벤트 핸들러에 액세스하고 자동으로 전달된다.

form Event, PreventDefault

폼 이벤트.

자바스크립트 없이 폼이 작동할때는

<form action=""></form> //action은 데이터가 전송되는 위치인 URL

자바스크립트 addEventListener를 쓰면

const tweetForm = document.querySelector('#tweetForm')
tweetForm.addEventListener('submit', function (e) {
		alert("Submit!")
});

버튼을 클릭하면 action을 입력하지 않았기 때문에 에러 페이지로 이동한다.

기본 동작이 제출이기 때문.

preventDefault 라는 메서드는 이벤트의 결과로서 일어날 기본 동작을 방지한다.

즉 폼에서는 action에 데이터를 전송하는 기본 동작을 막아버린다.

const tweetForm = document.querySelector('#tweetForm')
tweetForm.addEventListener('submit', function (e) {
		alert("Submit!")
		e.preventDefault();
});

alert만 뜨고 그만둔다. 기본 동작을 방지해서 에러 페이지로 넘어가지 않음.

document.querySelectorAll('input')[1].value
// input 태그 중 두번째 요소의 입력된 값을 선택.

change, input event

입력이 일어날때, 제출 된 후에 작동하는게 아니라 실시간으로 일어나게 할수 있다.

키 다운 이벤트가 있어도, 키를 누르지 않고 복사 붙여넣기 하거나, 음성인식을 하거나 해서 입력할 수 있다. 업데이트 방법은 여러 종류인데 입력창과 키다운, 키업은 그것을 포함하지 않는다.

input.addEventListener('change', function (e) {
		console.log("DD")
})

change 변경은 값이 변화할때가 아니라 ‘ 그 입력을 떠날 때마다’ 라고 생각해야한다.

인풋창을 떠나서 커서를 다른 곳으로 옮겨야 변경으로 간주됨.

값이 변할때마다로 하고 싶으면 Input을 써야한다.

input.addEventListener('input', function (e) {
		console.log("DD")
})

타이핑할때마다 바로바로 입력 이벤트가 된다.

하지만 shift키나 화살표키처럼 값에 영향을 주지 않으면 발동안됨.

Event Bubbling

<section onclick="alert('!')">
		<p onclick="alert('!')">
				i am paragraph:
				<button onclick="alert('!')">Click</button>
		</p>
</section>

버튼을 클릭하면 p도 클릭한게 되고, section도 클릭한게 된다.

중첩된 요소들도 발동된다.

맨 아래에서 더 높은 레벨로 물방울 처럼 공기방울(bubbling) 처럼 올라가는 것이다.

버튼→단락→섹션 순으로 발동된다.

버블링을 멈추고 싶으면 멈춰야 할 단계에서 stopPropagation을 넣어준다.

button.addEventListener('click', function (e) {
	container.style.backgroundColor = makeRandColor();
	e.stopPropagation
})

위에서 makeRandColor가 실행되고 멈춘다. 그 위로는 버블링되지 않는것.

이벤트 위임

페이지에 미리 설정해둔 장치가 그 후에 만들어진 요소에는 적용되지 않는다.

이럴때 이벤트 위임이 필요하다.

이벤트 위임이란 필요한 요소들의 상위 요소에 미리 추가해두는 것.

그러면 그 상위 요소 밑에 자식요소로 새로운 요소가 만들어져도,

부모 요소에 미리 추가해둔 설정이 상속된다.

<ul>
	<li></li>
	<li></li>
</ul>

이벤트 수신기를 ul에 추가해두면, li를 클릭할때 ul을 클릭한게 되지만,

이벤트 객체 안에 target: li로 표시된다.

따라서 이를 이용할수 있다.

li가 아닌 ul에 밑에 코들르 추가한다.

container.addEventListener('click', funtion (e) {
	e.target.remove
}) //타겟을 지움

이렇게 하면 클릭한 li가 지워진다.

하지만 li가 아닌 다른 부분도 지워져 버린다.

li만 지우고 싶다면

ontainer.addEventListener('click', funtion (e) {
	e.target.nodeName === 'Li' && e.target.remove();
}) // 타겟의 노드네임이 Li이면 타겟을 지움

연산자 and의 왼쪽이 거짓이면 오른쪽은 실행되지도 않음.

이런식으로 응용할수 있다.

이처럼 이벤트 위임은 이벤트 수신기가 추가된 시점에 페이지에 없었던 요소들을 다루어야 하는 상황에서 편리하다.

1. 부모 요소에 이벤트 수신기를 추가한 다음
2. target을 이용해 자식 요소에 적용되도록 한다.