TIL 2021.10.01 - 2주차 ✏️

📍이번주 학습 목표

• JavaScript 기초 문법 공부하기
• DOM과 이벤트 동작 방법 이해하기
• 제이쿼리 사용 방법 공부하기
• 자료구조의 개념 공부하기
  
  

  오늘 배운 내용 💪

  • Javascript 기초 문법 공부하기

<오늘 복습할 내용>
1. return
2. addEventListener

오늘도 자바스크립트에 대해서 공부했다. 그 중에서도 새로 알게 된 내용 복습하기! return과 이벤트에 대해서 복습해보자! return은 기본중에 기본이지만 놓혔던 부분 체크하기!

1. return

• return 명령문은 함수 실행을 종료하고, 주어진 값을 함수 호출 지점으로 반환합니다.
  = return으로 주어진 값을 반환하는 것 뿐만 아니라, 함수 실행을 종료하는 break를 걸어줄 수 있다는 뜻이다! 이걸 잘 활용 하면 함수 실행을 종료하도록 응용이 가능하다! ✅

const num1 = 1;
const num2 = 2;

function example(n){
    if (n === 1) {
      	return '함수에서 나가자!'
    }
    return '실행하자!'
}

console.log(example(num1)); // '함수에서 나가자!'
console.log(example(num2)); // '실행하자!'

2. addEventListener

= 자바스크립트에서는 많은 종류에 이벤트를 만들어서 등록해서 실행하는게 가능한데, 이벤트를 등록하는 방법 중에 가장 권장 되는 방법은 addEventListener를 사용하는 것이다. 그 이유는 이 방식을 이용하면 여러개의 이벤트 핸들러를 등록 할 수 있기 때문이다.
*주의사항! addEventListene는 여러개의 이벤트를 등록할 수 있는 반면, Event handler properties를 사용해서 만들게 되면 마지막에 설정된 이벤트만 실행한다. 그러나, addEventListenr 는 ie8 이하 버전에서는 작동하지 않는다.

이벤트 객체

이벤트를 만들어서 실행할 때, 브라우저는 자동적으로 이벤트 객체를 생성해서 이벤트에 관한 정보를 담고, 핸들러의 인수의 형태로 전달한다.

function handleClick(e){
	console.log(e.target); //이벤트의 대상 
    console.log(e.type); 	//이벤트의 타입 = "click"
}

item.addEventListener("click" , handleClick);