강의노트

입문자를 위한 자바스크립트 기초 강의 (유노코딩) - 자바스크립트 기초 (이벤트~삼항연산)

꼽파 2023. 4. 2. 14:52

이벤트(event)

사용 중이거나 프로그래밍 중인 시스템 내에서 일어나는 사건

웹에서도 이벤트가 발생함.

 

웹에서 발생하는 이벤트의 예

웹페이지 사용자가 버튼을 클릭했다, 클릭 이벤트!

웹페이지 사용자가 키보드를 눌렀다, 키다운 이벤트!

웹페이지 사용자가 입력 폼의 내용을 제출했다, 제출 이벤트! ... 외 다수

 

이벤트 핸들러(handler)

이벤트가 발생되면 실행될 코드 블록, 함수가 이 역할을 담당함.

이벤트 핸들러 등록 : 이벤트 핸들러 역할을 수행할 함수를 정의하는 것

event handler register : 이벤트가 발생하면, 이 함수를 호출해라!

 

예시)

웹 사용자가 버튼(button) 요소를 클릭했을 때, 경고 다이얼로그 박스를 띄워 환영의 메시지를 보여주고 싶다면?

 

const handleClick = function(){
    window.alert("환영합니다!")
}

const button = document.querySelector("button")

button.onclick = handleClick // 여기가 포인트!

 

구문 기본 형태

 

이벤트가 발생할 수 있는(혹은 발생할 예정인) 타겟을 선택하고,

이벤트 핸들러 속성에 이벤트 핸들러를 대입한다.

 

타겟.on이벤트명 = 이벤트핸들러함수

→ button.onclick = handleClick

 

이벤트 핸들러를 등록하기 위해 이벤트 속성에 함수를 대입하는 것과 함수 호출문을 대입하는 것은 엄연히 다르다

 

// handleClick 함수를 대입한다 (이벤트 핸들러 등록)

button.onclick = handleClick

 

// handleClick 호출 후 반환값을 대입한다 (굳이?)

button.onclick = handleClick()

 

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>자바스크립트 실습해보자</title>
</head>
<body>
    <input type="text" id="typing" />
    <input type="button" id="push" value="PUSH" />
    <script src="script.js"></script>
</body>
</html>
const inputType = document.querySelector("#typing");
// inputType은 사용자가 키보드를 누르는 이벤트가 발생할 수 있는 타겟
const inputClick = document.querySelector("#push");
// inputClick은 사용자로부터 클릭이벤트를 발생할 수 있는 타겟

const handleTyping = function(){
    console.log("타이핑 되고 있어요!")
}

const handleClick = function(){
    console.log("클릭되고 있어요!")
}

/*
inputType이 타이핑 됐을 때 handleTyping이 실행됨.
inputClick이 클릭 됐을 때 handleClick이 실행됨.
*/

//onkeydown은 '키보드가 눌렸을 때'라는 이벤트 속성임
inputType.onkeydown = handleTyping
inputClick.onclick = handleClick
inputType.onkeydown = function(){
    console.log("타이핑 되고 있어요!")
}

inputClick.onclick = function(){
    console.log("클릭되고 있어요!")
}

// 굳이 함수 이름 지정하지 않고, 그냥 익명함수 넣는 경우도 있음

이벤트 속성에 함수를 대입하는 것과 함수 호출문을 대입하는 것은 다르다.

addEventListener & 이벤트 객체

 

addEventListener

onclick, onkeydown과 같은 이벤트 속성을 통해 이벤트 핸들러를 등록하는 것보다 현대적인 방법은 addEventListener 메소드를 활용하는 것이다.

 

클릭 이벤트 핸들러를 등록하는 경우의 예

// 이전 영상에서 학습한 방식
target.onclick = function(){}

// addEventListener의 방식
target.addEventListener('click', function(){})
 
// 두개의 결과는 같음

 

' 이벤트명을 나타내는 문자열 ', 이벤트 핸들러 역할을 할 함수

힘수에다가 인자를 전달해줄 함수 = 콜백함수

 

addEventListener 함수를 사용하는 것의 이점

 

이전에 추가한 이벤트 핸들러를 제거할 수 있는 대응 메소드가 존재함. (remove 이벤트 메소드)

같은 리스너(타겟)에 대해 다수의 핸들러를 등록할 수 있음.

추가적인 옵션 사항들이 제공됨.

 

이벤트 객체

- 추가적인 기능과 정보를 제공하기 위해 이벤트 핸들러에 자동으로 전달되는 데이터

- 이를 활용하기 위해서는 이벤트 핸들러 함수에 매개변수를 추가하여 이벤트 발생 시마다 전달받을 수 있도록 해야 함.

 

// click 이벤트가 발생하면 함수를 호출하겠다!
target.addEventListener('click', function(){})

// click 이벤트가 발생하면 함수를 호출하겠다!
// + 이때 자동으로 전달되는 이벤트 객체를 매개변수 event에 대입하겠다!
target.addEventListener('click', function(event){})
<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>자바스크립트 실습해보자</title>
</head>
<body>
    <button id="one">버튼1</button>
    <button id="two">버튼2</button>
    <button id="three">버튼3</button>

    <script src="script.js"></script>
</body>
</html>
const btn1 = document.getElementById("one")
const btn2 = document.getElementById("two")
const btn3 = document.getElementById("three")

const handleClick = function(){
    console.log("저를 클릭하셨나요?")
}

btn2.addEventListener('click', handleClick)
/* 함수를 메소드에 인자로 전달함.
인자로 전달되는 함수 = 콜백함수
handleclick은 콜백함수로 전달됨
버튼 3개 생성 후
이벤트 핸들러 함수 만들기 */
// 1) 발생할 수 있는 이벤트명, 2) 이벤트 핸들러 함수

const btn1 = document.getElementById("one")
const btn2 = document.getElementById("two")
const btn3 = document.getElementById("three")

const handleClick = function(){
    console.log("저를 클릭하셨나요?")
}

btn2.addEventListener('click', handleClick)
// 이벤트핸들러 여러개 등록할 수 있음
btn2.addEventListener('click', function(){
    console.log("또 다른 핸들러가 추가 등록되었다!")
})
// 한번 누르면 동시에 두 개가 뜸! = 두 개의 핸들러가 동시에 호출!
/* onclick과 같은 이벤트핸들러 속성을 사용하면,
여러 개의 핸들러가 등록이 안 되고 마지막에 등록된 것만 덮어씌워짐. */

const btn1 = document.getElementById("one")
const btn2 = document.getElementById("two")
const btn3 = document.getElementById("three")

const handleClick = function(){
    console.log("저를 클릭하셨나요?")
}

btn2.addEventListener('click', handleClick)
// remove 이벤트리스너 사용해서 특정 이벤트핸들러 제거함
btn2.addEventListener('click', function(){
    console.log("또 다른 핸들러가 추가 등록되었다!")
})
btn2.removeEventListener('click', handleClick)
/* 예상 : function함수만 남음
클릭하면 " 또 다른 핸들러~"만 나옴
*/

이벤트 객체 확인

이벤트 객체 : 
'handleClick'이라는 이벤트핸들러를 'btn2'의 'click' 이벤트에 등록함
이때 시스템에서 'click' 이벤트가 발생하면 '이벤트객체'라는 것을 'handleClick'에 전달해 줌.
그리고 그것을 이벤트 핸들러가 받아서 사용하려면 매개변수가 있어야 함.
이벤트 핸들러를 전달하는 매개변수는 주로 'event', 'e'라고 씀.

 

const btn1 = document.getElementById("one")
const btn2 = document.getElementById("two")
const btn3 = document.getElementById("three")

const handleClick = function(event){
    console.log(event)
}

btn2.addEventListener('click', handleClick)

이벤트 타겟(event.target)

const btn1 = document.getElementById("one")
const btn2 = document.getElementById("two")
const btn3 = document.getElementById("three")

const handleClick = function(event){
    console.log(event.target)
}
// 지금 이벤트가 발생할 순간에 타겟을 알려줌 -> 결과는 다름
btn1.addEventListener('click', handleClick)
btn2.addEventListener('click', handleClick)
btn3.addEventListener('click', handleClick)

createElement & appendChild

 

document.createElement

 

document의 createElement 메소드는 지정된 이름의 HTML 요소를 만들어 반환해 준다.

지정된 이름 : 인자로 전달된 이름

문자열 형태로 이름을 전달해주면 됨.

 

document.creatElement('div) : div 요소를 만들어 반환해주는 메소드 호출문

document.createElement('p') : p요소를 만들어 반환해주는 메소드 호출문

document.createElement('a') : a요소를 만들어 반환해주는 메소드 호출문

 

HTML 요소가 만들어지고 또 반환되었다고 해서, 해당 요소가 곧장 웹브라우저 화면에 추가되는 것은 아니다.

메소드 통해 만든 요소를 DOM에 추가해야만 브라우저에 렌더링 되는 것을 볼 수 있음.

 

appendChild 메소드는 DOM 내 개별 요소 ('노드'라고도 함)에 자식 요소를 추가할 때 사용하는 메소드

 

기본 사용법

target.appendChild(자식으로_추가할_요소)

→ 타겟 요소 안에 새롭게 자식요소가 추가되어서 브라우저 화면상에도 그 결과가 반영됨.

 

예제

const p = document.createElement("p")

document.body.appendChild(p)

→ createElement를 이용해서 p요소를 생성하고, 이를 문서의 body 태그 안에 자식으로 추가하겠다는 코드임.

 

appendChild vs append

appendChild 메소드와 append 메소드는 비슷한 역할을 함.

타겟 요소에 자식 요소를 추가한다는 점에서 같으나, 차이점도 존재함.

 

주요한 차이

- appendChild의 경우 추가한 자식 노드를 반환하지만, append는 반환 데이터가 없음.

- append를 이용하면 요소에 노드 객체 또는 문자열을 자식 요소로 추가할 수 있지만, appendChild는 노드 객체만을 추가할 수 있음.

 

상황에 맞게 선택하면 됨.

 

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>자바스크립트 실습해보자</title>
</head>
<body>
    <button id="push">눌러</button>
    <div id="area"></div>
   
    <script src="script.js"></script>
</body>
</html>
const button = document.getElementById("push")
const div = document.getElementById("area")

button.addEventListener('click', function(){
 console.log("div 생성 중!")
 document.createElement("div")
})
/*
이때 버튼을 누르면 div가 생성일 될 뿐
실제 렌더링되는 DOM 안에는 생성되지 않음
-> 만든 div를 DOM에 추가해주는 작업까지 해야됨.
*/

 

'눌러'라는 버튼을 눌러도 elements를 보면 div가 표시되지 않는 걸 알 수 있음.

area안에 새롭게 만든 div를 append하는 작업이 필요해서 코드를 추가함.

 

const button = document.getElementById("push")
const div = document.getElementById("area")

button.addEventListener('click', function(){
 console.log("div 생성 중!")
 // 새로 만든 div 추가
 const newDiv = document.createElement("div")
 div.appendChild(newDiv)
})

버튼을 누를 때마다 div가 생성되는 것을 확인할 수 있음.

 

createElement는 요소를 생성하지만, 요소를 실제 DOM에 추가해주지 않음.

→ 따로 append나 appendchild를 해줘야 됨.

 

const button = document.getElementById("push")
const div = document.getElementById("area")

button.addEventListener('click', function(){
 console.log("div 생성 중!")
 const newDiv = document.createElement("div")

 /*
 만들어진 것에 대한 속성을 조작하는 작업
 여기서는 style 속성을 조작함.
 */

 newDiv.style.backgroundColor = "red" // '-'기호는 빼기
 newDiv.style.width = "200px"
 newDiv.style.height = "200px"

 div.appendChild(newDiv)
})

 

const button = document.getElementById("push")
const div = document.getElementById("area")

button.addEventListener('click', function(){
 console.log("div 생성 중!")
 const newDiv = document.createElement("div")

 /*
 만들어진 것에 대한 속성을 조작하는 작업
 여기서는 style 속성을 조작함.
 */

 newDiv.style.backgroundColor = "red"
 newDiv.style.width = "200px"
 newDiv.style.height = "200px"

 div.append("벚꽃핀다")
})

append나 appendchild나 요소를 추가함.

append는 문자열에 대한 추가가 가능함. 

appendchild는 오브젝트(DOM요소, 노드)만 넣을 수 있음.

 

반환값의 여부

append는 반환 O, appendChild는 반환 X

value 속성 외

 

입력 요소 값 읽기

 

<input>,<select>처럼 사용자로부터 입력을 받는데 사용되는 요소들이 있음.

여기에서 사용자가 입력한 값을 읽어들일 때는 요소의 value 속성에 접근하자.

 

차이를 기억하자

• 요소의 텍스트에 접근하고 싶다 : textContent 또는 innerText

• 사용자가 요소에 입력한 값에 접근하고 싶다 : value

 

입력 요소의 value에 접근하여 할 수 있는 일 : 읽기, 쓰기

 

// 대상 요소의 사용자 입력값을 읽어 콘솔에 출력하자!

console.log(target.value)

 

// 대상 요소의 사용자 입력값을 "변경값"으로 바꾸자!

target.value = "변경값"

 

여러 입력 요소를 포함할 수 있는 폼 요소로부터 여러 입력 값을 읽을 수 있음.

 

<form>

  <input name="nickname" placeholder="닉네임" />

  <input name="character" placeholder="특징" />

  <input type="submit" value="입력 완료" />

</form>

 

form에서 이벤트를 제출하는 작업 후 submit 이벤트 발생하면 입력 값을 읽는다.

 

form은 action에 지정한 url로 입력값을 제출한다.

 

<form action="없는데요">

  <input name="nickname" placeholder="닉네임" />

  <input name="character" placeholder="특징" />

  <input type="submit" value="입력 완료" />

</form>

 

만일 action 속성이 지정되지 않은 상태에서 url을 제출하게 되면, 그때는 페이지가 새로고침 되어버리는 현상이 나옴.

action이 없을 때에는 이벤트 객체를 사용한다.

 

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>자바스크립트 실습해보자</title>
</head>
<body>
    <input type="text" placeholder="아무거나" id="text" />
    <input type="button" value="PUSH" id="button" />

    <script src="script.js"></script>
</body>
</html>
const textInput = document.getElementById("text")
const button = document.getElementById("button")
/* 버튼 누르면 textInput의 value를 출력
value는 사용자 입력값을 의미함 */
button.addEventListener("click", function(){
 console.log(textInput.value)
})

value는 사용자 입력값을 의미함.

사용자 입력이 가능한 입력요소에서 사용되는 속성임.

읽어들이는 것, 값 변경하는 것 모두 가능함.

 

form 요소를 통해서 입력 데이터를 여러 개 다룰 때 적극적으로 사용할 수 있음.

 

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>자바스크립트 실습해보자</title>
</head>
<body>
  <form>
    <input type="text" placeholder="이름" name="name" />
    <input type="text" placeholder="동네" name="town" />
    <input type="submit" value="PUSH" />
  </form>
    <script src="script.js"></script>
</body>
</html>
const form = document.querySelector("form")

form.addEventListener("submit", fuction(){
    console.log(form.name.value)
    console.log(form.town.value)
})
/*form에서 submit 이벤트가 발생했을 때 function함수를 실행시킬 것임
함수의 내용 :
name이 'name'인 요소에서 value를 읽어드릴 것임
name이 'town'인 요소에서 value를 읽어드릴 것임
name,town은 요소에 대한 접근자, 식별자로서 역할을 함
*/

728x90