JavaScript⑥

이벤트 객체(event, e)

DOM과 관련도어 발생한 이벤트 정보를 저장하는 객체
생성된 이벤트 객체는 *이벤트 핸들러의 첫 번째 인수로 전달된다.
이벤트에 의해 생성된 이벤트 객체는 이벤트 핸들러의 첫번째 인수로 전달되어 매개변수 e에 암묵적으로 할당된다.

브라우저가 이벤트 핸들러를 호출할 때 이벤트 객체를 인수로 전달하기 때문

이벤트 핸들러
이벤트가 발생했을 때 브라우저에 호출을 위임한 함수
-> 이벤트가 발생하면 브라우저에 의해 호출될 함수

html

<!-- 이벤트 객체 -->
<button id="btn">버튼</button>

script

const btn = document.getElementById('btn')
btn.addEventListener('click', (e) => {
	console.log('zmffls')
    console.log(e.type)  : 발생한 이벤트의 타입
    console.log(e.target) //발생한 이벤트의 요소
    console.log(e.currentTarget)  // 현재 이벤트를 처리중인(활성화 되어있는) 요소 출력
    console.log(e.eventPhase)  // 1: 캡쳐링 , 2: 타겟 , 3: 버블링
    console.log(e.defaultPrevented) //true/false : 기본적인 이벤트 실행여부(ex. a => 이동)
})

이벤트 흐름

https://www.w3.org/TR/DOM-Level-3-Events/

1. Capture 캡쳐링 : 이벤트가 상위에서 하위로 전파
2. Target 타겟 : 이벤트가 해당하는 실제 타겟요소에 전파
3. Bubbling 버블링 : 이벤트가 하위에서 상위로 전파

html

<!-- 이벤트 흐름 -->
<div id="section">
	<a href="http://naver.com" target="_blank" id="link">link</a>
</div>

script

// 버블링 예제
const section = document.getElementById('section')
const link = document.getElementById('link')

section.addEventListener('click', (e) => {
      console.log(e.target)
      e.currentTarget.style.background = 'gold'
})
    
link.addEventListener('click', (e) => {
	e.preventDefault()  //
    e.stopPropagation() //다른요소로 이벤트 전파 방지
    console.log(e.target)
    e.currentTarget.style.background = 'tomato'
})

실습 : li 3의 정보만 출력하기

html

<ul id="menu">
    <li id="li-4">1</li>
    <li id="li-1">2</li>
    <li id="li-2">3</li>
    <li id="li-3">4</li>
    <li id="li-5">5</li>
</ul>

script

const menu = document.getElementById('menu')
console.log(menu)

ver1 : 다른 li 태그들이 존재하거나 구조가 변하면 idx 번호가 달라질 수 있음

const lis = document.getElementsByClassName('li')
console.log(lis[2])

ver2 : 존재하는 요소만큼 객체 생성 필요

const li3 = document.getElementById('li-3')
console.log(li3)

ver3-1

menu.addEventListener('click', function (e) {
	console.log(e.target)
	console.log(this)  //객체자신을 선택! this를 사용한 menu(ul)객체
})

ver 3-2 : 아래 화살표함수 내용 참고

menu.addEventListener('click', (e) => {
console.log(e.target)
console.log(this) //window
})

화살표 함수 특징

1. new 생성자로 객체 생성 불가능함 : 생성자
2. 내부에서 this라는 것을 기본적(객체자기자신)으로 활용 불가능

화살표 함수 관련 --> this

1. new 객체 생성되었다면 내부 this -> 객체 자기 자신
2. 일반 함수에서 this를 호출하게 되면 -> window

function Test() {
	console.log(this)	-> 2. 생성자 함수 내부에서 this사용가능, 일반함수에서 this는 window를 가리킨다.
}
let test = new Test()	-> 1. new 키워드를 통해 객체를 생성해야만

---

bom

Browser Object Model

종류
window / location / document / history / screen / navigator

• window

document.write(window.outerHeight)
document.write(window.close())
document.write(window.self)

• location

setTimeout(() => {
	location.href = 'http://naver.com'
}, 3000)

location.reload()

• history

document.write(history.length)
history.go(1)
history.back()

• navigator

document.write(navigator.appName)
document.write(navigator.language)

const mobile_keys = ['iPhone', 'iPad', 'Android', 'LG']
document.write(navigator.userAgent)

for (let i in mobile_keys) {
	if(navigator.userAgent.match(mobile_keys)) {
		// console.log(로그기록) 
	}
}

---

콜백함수

함수의 매개변수를 통해 다른 함수의 내부로 전달되는 함수를 콜백함수라 한다.
매개변수를 통해 함수의 외부에서 콜백함수를 전달받은 함수는 고차함수라고 한다.

-> 다른 함수의 파라미터(매개변수)로 넘겨주는 함수

동작방식

https://developer.mozilla.org/ko/docs/Learn/JavaScript/Asynchronous/Introducing

1. 동기 (Synchronous) : 요청결과 응답 후, 다른 동작 실행되는 방식

[1, 2, 3].forEach(num => {
    console.log(num)
});

2. 비동기 (Ansynchronous) : 요청결과 응답과는 별개로 다음 동작이 실행되는 방식

[1,2,3].forEach((num) => {
	setTimeout(() => {
		console.log(num)
	}, 3000);
})

  console.log(1) //동기
  setTimeout(() => console.log(2) , 3000);  //비동기
  console.log(3)  //동기

자바스크립트 이벤트 루프

https://developer.mozilla.org/ko/docs/Web/JavaScript/EventLoop#%EC%9D%B4%EB%B2%A4%ED%8A%B8_%EB%A3%A8%ED%94%84

스레드와 비동기 관계

Javascript는 단일 스레드⭐
WebAPIs에서 제공하는 Queue영역으로 다중 스레드처럼 동작이 가능

자바스크립트 엔진은 한 번에 하나의 태스크만

프로미스 (Promise)

http