JavaScript - DOM Event (1)

Mongs_sw·2023년 2월 26일

javascript

목록 보기

19/21

1. Event 개요

개요:이벤트는 사용자들이 하는 행동에 반응하는 작업을 말한다.

실행되는 코드에 응답하는 것을 의미하며, 사용자의 특정 행동을 의미한다고 보면 된다.

ex) 클릭, 드래그, 드롭, 마우스 올리기, 스크롤 움직이기, 폼 제출하기 등등..

2. 인라인 이벤트

(1) clicks

사용자가 뭔가를 클릭하는 경우 간단한 코드를 실행하게 만든다.

이를 표현하는데는 3가지 방법이 존재한다.

1. 첫 번째 병법

//index.html 파일에 클릭 속성 추가하기
//버튼을 눌렀을 떄 클릭을 하셨군요! 라는 창 띄우기
<body>
	<h1>Events</h1>
    <button onclick="alert(클릭을 하셨군요!);">Click Me!</button>
 
</body>

해당 방법은 마크업이 길어지며, 가독성이 상당히 떨어지고, 코드가 지저분해 질 우려가 크므로 좋은 방법은 아니다.

2. 두 번째 방법

js 파일에 함수의 형태로 만들어주는 방법.

//app.js 라는 자바스크립트 파일에 작성
//버튼에 id="btn1"으로 설정

const btn = document.querySelector('#btn1');

//"버튼을 클릭하셨군요!"라는 메세지를 창에 띄우기.
btn.onclick = function() {
	alert("버튼을 클릭하셨군요!");
}

해당 방법을 통하면 첫번째 방법보단 여러 면에서 쓰기 유용하다. 예를 들어 여러 개의 버튼에 적용하기 유용하며, 자바스크립트 파일에 따로 작성하기 때문에 오히려 더 낫다.

여기서 조심해야 할 부분은 버튼이라고 해서 onclick 속성만 사용가능한게 아니기 때문에 구현하고자 하는 기능을 잘 생각하여 코드작성을 해주면 된다.

+) 여기서 작성되는 함수는 직접 실행하고자 하는 것이 아닌 버튼을 클릭했을 때, 함수의 내용이 호출된다는 목적을 위해 존재하기 때문에 오해하지 말아야 한다.

3. 세번째 방법

`addEventLlistener`

이 기능을 사용하기 위해선 순서가 있다.

//1. 요소를 선택한다.

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


//2. 제너릭 메서드인 `addEventListener`을 사용하여 구현하고자 하는 속성을 전달시켜준다.

button.addEventListener('속성', () => {
	구현하고자 하는 내용.
})

두번째 인수로는 콜백 함수가 들어가며, 이벤트가 발생했을 때 실행하고자 하는 코드를 입력시키면 된다.

이 외에도 두번째 인수 자리에 이름을 붙인 함수를 넣어주면 해당 함수의 내용이 그대로 실행되기도 한다.

3. 왜 addEventListener 메서드를 사용하는게 더 좋을까?

// 샤우트 함수 
function shout() {
	console.log("SHOUT!")
}

//슛 함수
function shoot() {
	console.log("SHOOT IT")
}

//id가 ssb인 ssButton 버튼이 존재한다고 가정하자.
const ssButton = document.querySelector('#ssb');

ssButton.onclick = shout;
ssButton.onclick = shoot;

//결과는 shoot 함수의 내용이 결과로 출력됨.

왜 이런 결과가 나올까?

동일한 이벤트에 대해 두개의 서로 다른 콜백 함수를 설정해주면 1. shout 함수의 내용이 2. shoot 함수의 내용으로 덮어쓰여지는 결과가 나오게 됨.

즉, 동일한 이벤트에 대해 두 개의 서로 다른 콜백 함수를 지정하는게 불가능하다는 뜻이다.

4. 랜덤 컬러 띄우기

html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Random Colors</title>
</head>
<body>
    <h1>Welcome!</h1>
    <button>Click me!</button>
    
    <script src="app.js"></script>
</body>
</html>

javascript

//버튼을 누르면 버튼이 실행되어야 하므로 요소 선택
const button = document.querySelector('button');
//제목에 rgb의 랜덤 값이 나와야 하므로 h1 설정
const h1 = document.querySelector('h1');


//랜덤 컬러를 출력하고자 하기 때문에 r,g,b 값을 난수를 뽑아내는 식 활용.
button.addEventListener('click', function() {
    const newColor = randomColor();
  	document.body.style.backgroundColor = newColor
    h1.innerText = newColor;

})

//rgb의 함수식이 길고 반복되어 새로운 함수에 저장
const randomColor = () => {
	const r = Math.floor(Math.random() * 256);
    const g = Math.floor(Math.random() * 256);
    const b = Math.floor(Math.random() * 256);
	return `rgb(${r}, ${g}, ${b})`;
}