자바스크립트

DOM에 대한 전반적인 개념

nickbegain 2021. 5. 7. 15:41

- DOM(Document Object Model)

→ DOM은 프로그래머 관점에서 바라 본 HTML 

→ DOM은 브라우저 환경에서 자바스크립트를 이용해 HTML을 조작할 수 있습니다.

→ HTML 문서에 이미 작성되어 있는 엘리먼트에 접근하거나, 새로운 엘리먼트를 생성 또는 삭제할 수 있음

→DOM은 Document Object Model의 약자로, HTML 요소를 Object(JavaScript Object)처럼 조작(Manipulation)할 수 있는 Model

→ 자바스크립트를 사용할 수 있으면, DOM으로 HTML을 조작할 수 있습니다.

→ HTML의 아주 작은 부분까지 접근할 수 있는 구조(Model; Structure)를 이용하여  HTML로 구성된 웹 페이지를 동적으로 움직이게 만들 수 있습니다.

→ 자바스크립트는 다양한 일을 할 수 있지만, 웹 페이지를 제어하기 위한 목적으로 오랜 기간 사용

----------------------------------------------------------------------------------------------------------------

→ HTML에 JavaScript를 적용하기 위해서는 <script> 태그를 이용합니다. 

ex) 아래의 경우 HTML 파일과 같은 디렉토리에 존재하는 myScriptFile.js을 불러옵니다. / <script src="myScriptFile.js"></script>

→ 웹 브라우저가 작성된 코드를 해석하는 과정에서 <script> 요소를 만나면, 웹 브라우저는 HTML 해석을 잠시 멈춥니다.

→ HTML 해석을 잠시 멈춘 웹 브라우저는 <script> 요소를 먼저 실행합니다

→ <script> 요소는 등장과 함께 실행된다는 사실을 꼭 기억하세요.

→ 이 <script> 태그를 추가하는 두 가지 대표적인 사례가 존재합니다. 

/ 하나는 <head> 태그에 추가하는 방법, 다른 하나는 </body> 가 끝나기 전에 추가하는 방법입니다

→ 만약 특정 변수에 querySelector()를 이용하여 요소를 지정할 경우 <head>태그에 <script>를 추가하여 js를 작성한 경우 요소를 지정하지 못하고 특정 변수에 null값이 할당된다.

/  웹브라우저는 <script>태그를 html문서의 태그 해석보다 우선적으로 수행하기 때문에 <body>내부에 작성된 요소가 해석되지 못하므로 지정하지 못하고 null값이 할당된다. 

→ 하지만 <body>태그 최하단 부분에 <script>를 작성하여 js를 작성한경우 특정변수에 지정한 요소가 저장되게 된다.

→ html 엘리먼트를 이용하기 위해서는 <body> 최하단에 <script>태그를 사용하여 js를 작성한다.

→ 자바스크립트라는 프로그래밍 언어와 DOM을 활용하여 HTML에 접근하고 조작

→ 자바스크립트에서 DOM은 document 객체에 구현되어 있습니다. 

→ 브라우저에서 작동되는 자바스크립트 코드에서는, 어디에서나 document 객체를 조회할 수 있습니다. 

→ console.log()를 이용하여 요소 출력시 해당 html태그 출력

/  console.dir()를 이용하여 요소 출력시 DOM을 객체의 모습으로 출력

 

→ console.dir(document.body) 를 통해 출력된 객체에서, children 속성을 찾을 수 있습니다

→ children 속성에 nav, news-contents, footer 가 자식으로 있는 것을 확인할 수 있습니다.  /  해당 속성에 자식 요소를 조회할 수 있다.

→ document.body.children 으로 자식요소를 바로 지정할 수 있다.

 

→ 자식요소가 여러개인 부모요소에서 원하는 자식요소를 지정하려는 경우 해당 자식요소를 지정한 후 index를 이용하여 해당 자식요소를 지정할 수 있음

→ parentElement = node.parentElement

/ 부모요소를 지정하기 위해서는 자식요소를 지정한 후 뒤에 .parentElement를 추가함

 

- DOM 구조

→ DOM 구조에서도 회사의 조직도와 유사한 모습

→ body가 가장 상위에 있고, 아래에 여러 구성요소가 부모-자식 관계를 가지고 있습니다.  /  트리구조

→ 트리 구조의 가장 큰 특징은 부모가 자식을 여러 개 가지고, 부모가 하나인 구조가 반복되는 점

→ 부모가 가진 하나 또는 여러 개의 자식 엘리먼트를 조회하는 코드를 작성한다면, 여러 번 반복해서 실행하는 코드가 필요

[예시문제] : id의 이름이 nav인 div 엘리먼트를 포함해서, 모든 자식 엘리먼트의 class 이름을 console.log를 사용하여 확인하는 방법을 수도코드(pseudocode)로 작성하세요.

function consoleLogAllElement(element){

// nav의 class 이름을 console.log 합니다.

// nav의 자식 엘리먼트가 있는지 검색합니다. (logo, menu-wrapper)

  //logo의 class 이름을 console.log 합니다.

  //logo의 자식 엘리먼트가 있는지 검색합니다. (없음)

  //menu-wrapper의 class 이름을 console.log 합니다.

  //menu-wrapper의 자식 엘리먼트가 있는지 검색합니다. (menu, menu, menu, profile-photo)

    //첫 번째 menu의 class 이름을 console.log 합니다.

    //첫 번째 menu의 자식 엘리먼트가 있는지 검색합니다. (없음)

    //두 번째 menu의 class 이름을 console.log 합니다.

    //두 번째 menu의 자식 엘리먼트가 있는지 검색합니다. (없음)

    //세 번째 menu의 class 이름을 console.log 합니다.

    //세 번째 menu의 자식 엘리먼트가 있는지 검색합니다. (없음)

    //profile-photo의 class 이름을 console.log 합니다.

    //profile-photo의 자식 엘리먼트가 있는지 검색합니다 (없음)

 //자식 엘리먼트를 모두 탐색했음으로, 함수 실행이 종료됩니다.

//자식 엘리먼트를 모두 탐색했음으로, 함수 실행이 종료됩니다.

}

[코드] 엘리먼트를 조회하는 코드를 작성하기 위한 수도코드

----------------------------------------------------------------------------------------------------------------

→ 부모요소.childElementCount : 해당 자식요소의 개수 반환

→ document 객체에는 많은 속성과 메소드가 존재

→ 집중할 부분은 CRUD(Create, Read, Update and Delete) 입니다

→ 어떤 종류의 개발이나 컴퓨터 언어를 배우시더라도 가장 먼저 CRUD에 집중

→ DOM에는 HTML에 적용(APPEND)하는 메소드가 따로 있으니 주의

----------------------------------------------------------------------------------------------------------------

- 새로운 element를 만드는 방법

→ document 객체의 createElement 메소드를 이용하여 요소를 생성할 수 있다

ex) document 객체의 createElement 메소드를 이용하여 div element를 만듭니다.

/  document.createElement('div')

→ 변수를 선언하고 생성된 요소를 변수에 할당해서 해당 요소를 지정하여 사용가능

→ 만약 요소를 생성한 후 이후 아무 조치도 취하지 않을 경우 해당 요소는 body태그 내부에 속하지 않고 붕뜬 상태가 된다  /  append()를 이용하여 body와 연결하여 트리에 추가를 한다.

→ append 라는 메소드를 사용해서, 변수 tweetDiv 를 body 에 넣어보겠습니다.

/  const tweetDiv = document.createElement('div');

  document.body.append(tweetDiv);

→  textContent 라는 메소드를 활용하면 문자열을 입력할 수 있습니다.

Further Study

→ append : 마지막 자식 뒤에 Node개체 또는 DOMString개체 집합을 삽입 

/  해당 요소의 가장 최하단 자식요소로 추가한다 (가장 마지막 자식으로 추가) 

/  해당요소.append(...nodesOrDOMStrings)

→ prepend : 첫 번째 자식 앞에 Node개체 또는 DOMString개체 집합을 삽입 

/  해당 요소의 가장 최상단 자식요소로 추가 (가장 첫번째 자식으로 추가)

/  해당요소.prepend(...nodesOrDOMStrings);

→ Node.appendChild() : 한 노드를 특정 부모 노드의 자식 노드 리스트 중 마지막 자식으로 붙입니다

/  만약 주어진 노드가 이미 문서에 존재하는 노드를 참조하고 있다면 appendChild() 메소드는 노드를 현재 위치에서 새로운 위치로 이동(이미 존재하는 요소는 자식요소 위치로 이동)

/  만약 노드가 이미 부모를 가지고 있다면 우선 삭제되고 새로운 위치로 이동

/  append도 이미 존재한 요소를 추가할 경우 기존의 위치의 요소를 제거하고 자식위치로 이동시킴

/  Node.cloneNode() 메소드는 노드가 새로운 부모의 밑으로 붙기 전에 노드를 복제

/  이 메소드는 서로 다른 문서로 노드를 이동시키진 못합니다. 만약 노드를  다른 문서로 이동시키고 싶다면 document.importNode() 메소드를 사용하셔야 합니다.

/  var aChild = element.appendChild(aChild);  (이동한 자식 노드를 반환)

 

- append()와 appendChild()의 차이점

  • Element.append()반환 값이없는 반면 Node.appendChild()추가 된 Node개체를 반환 합니다.
  • Element.append()는 여러 노드와 문자열을 추가할 수 있지만 Node.appendChild()는 하나의 노드 만 추가 할 수 있습니다.

----------------------------------------------------------------------------------------------------------------

- querySelector

→ DOM으로 HTML 엘리먼트의 정보를 조회하기 위해서는 querySelector의 첫 번째 인자로 셀렉터(Selector)를 전달하여 확인할 수 있습니다

→ 셀렉터로는 HTML 태그("div"), id("#아이디명"), class(.클래스명) 세 가지가 가장 많이 사용

→ 참고로 querySelector는 셀렉터를 조회한다는 의미

→ querySelector 에 '.tweet' 을 첫 번째 인자로 넣으면, 클래스 이름이 tweet 인 HTML 엘리먼트 중 첫 번째 엘리먼트를 조회할 수 있습니다.

/  조회되는 요소가 여러개일 경우 가장 처음 조회되는 요소 반환

ex) const oneTweet = document.querySelector('.tweet')

→ 여러 개의 엘리먼트를 한 번에 가져오기 위해서는, querySelectorAll 을 사용

→ 이렇게 조회한 HTML 엘리먼트들은 배열처럼 for문을 사용하실 수 있습니다

→ 앞서 조회한 HTML 엘리먼트들은 배열이 아닙니다! (정식 명칭은 Array-like Object)

/  이런 '배열 아닌 배열'을 유사 배열, 배열형 객체 등 다양한 이름으로 부릅니다

ex) const tweets = document.querySelectorAll('.tweet')

→ get으로 시작하는 DOM 조회 메소드는 querySelector 와 비슷한 역할을 하는 오래된 방식  

/  만약 이전 버전의 브라우저(인터넷 익스플로러) 호환성을 신경 써야 한다면, 이런 옛날 방식을 사용해야 할 수도 있습니다

/  실제 동작하므로 알아둘것

ex) const getOneTweet = document.getElementById('container')

/  document.getElementById(‘아이디명’);  -> 지정된 요소 반환

/  그외에도 className도 있음

→ querySelector를 이용하여 요소를 지정할 때 document를 부모로 지정해야 해당 웹페이지내 모든 요소를 탐색할 수 있다.

 

- textContent

→ textContent 를 사용해서, 비어있는 div 엘리먼트에 문자열을 입력

→ textContent는 문자열만을 조회 및 추가할 수 있다. 요소를 추가할 수는 없음

console.log(oneDiv) // <div></div>

oneDiv.textContent = 'dev';

console.log(oneDiv) // <div>dev</div>

→ classList.add()를 이용해 요소에 클래스를 추가할수 있습니다. 

/  파라미터로 클래스명 작성

oneDiv.classList.add('tweet')

console.log(oneDiv) // <div class="tweet">dev</div>

→ classList.remove(‘클래스명’)를 이용해 요소에서 해당 클래스명을 삭제할수 있습니다.

→ Element.setAttribute(name, value);

/  지정된 요소의 속성 값을 설정한다.

/  속성이 이미 존재하는 경우 값이 업데이트됩니다

/  그렇지 않으면 지정된 이름과 값으로 새 속성이 추가됩니다.

/  name에 속성명, value에 속성값을 작성하면 된다.

→ 속성이 이미 존재하는 경우 값이 업데이트

→ 속성이 존재하지 않는 경우 지정된 이름과 값으로 새 속성이 추가

ex) b.setAttribute("name", "helloButton");

b.setAttribute("disabled", "");  ->속성값이 true/false인 속성에서 빈문자열을 넣을 경우 true

→ 만약 속성값이 없으면 해당 값은 false입니다

→ innerHTML 은 요소(element) 내에 포함 된 HTML 또는 XML 마크업을 가져오거나 설정

ex) const content = element.innerHTML;  -> 기존 값 조회

      element.innerHTML = htmlString;       -> 새로운 값 추가

→  문서(document)의 body 속성(attribute)을 지우면, 문서의 전체 내용을 지울 수 있습니다

→ innerHTML을 이용하여 element를 직접 추가할 수있기 때문에 innerHTML 을 사용하여 제어할 수 없는 문자열을 추가하여 웹페이지를 설정할 경우 보안위험이 발생할 수 있다

→ <script> tag를 활용하여 강제로 해커가 원하는 스크립트를 실행시키는 XSS Attack이 대표적인 보안위험(innerHTML을 이용한 공격)

/  Element.innerHTML는 이름 그대로 HTML을 반환

 

- remove

→ 삭제하려는 엘리먼트의 위치를 알고 있는 경우에 사용하는 방법

/ remove 메소드를 사용,  해당 요소를 지정할 수 있는 경우

ex) const container = document.querySelector('#container')

const tweetDiv = document.createElement('div')

container.append(tweetDiv)

tweetDiv.remove() // 이렇게 append 했던 엘리먼트를 삭제할 수 있다.

→ 여러 개의 자식 엘리먼트를 지우려면 innerHTML 을 이용하면, 아주 간단하게 모든 자식 엘리먼트를 지울 수 있습니다.

→ remove()메소드를 호출한 요소가 삭제된다.

→ remove()메소드에 파라미터가 있던 말던 이 메소드를 호출한 요소가 삭제된다

/  요소1.remove(요소2)  -> 요소1이 삭제된다.

ex) document.querySelector('#container').innerHTML = '';

/  자식 요소들을 모두 한번에 삭제

/  innerHTML은 보안에서 몇 가지 문제를 가지고 있습니다. (removeChild()사용)

→ removeChild(): removeChild()는 노드를 삭제하는 것이 아닙니다.

/  메모리에 해당 노드는 그대로 존재하며, 부모 노드와의 부모-자식관계를 끊어 DOM 트리에서 해제하는 것입니다. 최종적으로는 관계를 끊은 해당 노드의 참조를 반환합니다.

→ 모든 자식 엘리먼트를 삭제하기 위해, 반복문(while, for, etc.)을 활용할 수 있습니다

ex) 자식 엘리먼트가 남아있지 않을 때까지, 첫 번째 자식 엘리먼트를 삭제

const container = document.querySelector('#container');

while (container.firstChild) {

 container.removeChild(container.firstChild);

}

→ 지정된 자식요소 1개만 삭제할 수 있다.

ex)  container의 자식 엘리먼트가 1개만 남을 때까지, 마지막 자식 엘리먼트를 제거합니다.

const container = document.querySelector('#container');

while (container.children.length > 1) {

  container.removeChild(container.lastChild);

}

→ forEach() 메서드는 주어진 함수를 배열 요소 각각에 대해 실행합니다.

ex) const arraySparse = [1,3,,7]

let numCallbackRuns = 0

 

arraySparse.forEach(function(element){

  console.log(element)

  numCallbackRuns++

})

 

console.log("numCallbackRuns: ", numCallbackRuns)

 

// 1

// 3

// 7

// numCallbackRuns: 3

→ 예시의 배열은 길이가 3이기 때문에 3번 반복을 하며 배열.forEach(el)에서 파라미터 el은 배열의 각 element를 접근 그 값을 할당받는다.

 

ex) const tweets = document.querySelectorAll('.tweet')

// 여기서 tweets변수에는 tweet라는 클래스명을 가진 요소들을 element로 가진 배열을 할당 받는다.

tweets.forEach(function(tweet){

    tweet.remove();

})

// or

for (let tweet of tweets){

    tweet.remove()

}

 

*객체는 for in / 문자열, 배열은 for of

Further Study

element와 node의 차이 : 

→ DOM API상에 존재하는 모든 것들. 그것들을 모두 포괄하는 이름이 node이다.

→ element: one specific type of node. 예를 들어  div, body, window 같은 특정한 타입.

모든 element는 HTMLElement의 자식이다. 따라서, HTMLElement의 property를 똑같이 가지고 있다. 동시에, element의 성격에 따라서 자신만의 property를 가지고 있다.

children과 childNodes의 차이 :
→ children과 childNodes모두 모든 자식요소를 지정하는 것은 동일하지만 children의 경우 비요소 노드를 제외하고 반환하며 childNodes는 비요소 노드를 모두 포함하여 NodeList를 반환한다.

*비요소노드 : 주석, 줄바꿈 등

*reduce() 메서드는 배열의 각 요소에 대해 주어진 리듀서(reducer) 함수(작성한 함수) 를 실행하고, 하나의 결과값을 반환

→ 해당 메서드는 배열 메소드  

→ 리듀서 함수에는 파라미터를 2개를 넣는데 앞쪽에 있는 변수는 배열의 element들이 리듀서 함수를 실행하고 나온 결과값을 저장하는데 사용되며 뒤의 변수는 배열에서 새로 element를 접근할 때 사용된다. ( 첫번째 파라미터의 초기값은 배열의 0번째 인덱스 값이다)

→ 아래 예시는 배열의 모든 element를 빼는 연산을 하는 함수이다.

→ 누산된 결과값은 첫번째 파라미터에 저장되어 있음

→ reduce()메소드의 두번째 파라미터는 누산된 결과값을 초기화할 때 사용한다.

/  리듀서 함수의 첫번째 파라미터에 값에 할당하는 역할 

ex) 

const array1 = [1, 2, 3, 4];

const reducer = (accumulator, currentValue) => accumulator - currentValue;

 

// 1 - 2 - 3 - 4

console.log(array1.reduce(reducer));

// expected output: -8

 

// 5 - 1 - 2 - 3 - 4

console.log(array1.reduce(reducer, 5));

// expected output: -5

 

removeChild와 remove의 차이 : remove()는 해당 요소를 삭제하고 removeChild()는 해당 요소의 자식 요소를 삭제한다.

tweets에 forEach는 되는데, reduce는 안되는 이유 

tweets를 유사 배열에서 배열로 바꾸는 방법 

----------------------------------------------------------------------------------------------------------------

- 추가사항

→ Node는 Element의 상위 개념입니다. DOM 관련 객체는 대부분 Node에서 파생되었다고 봐도 과언이 아닙니다. Node의 기능을 적용(implements)한 객체는 여러 타입이 있는데, 그 중 가장 많이 사용되는 타입이 Element입니다.

→ DOM은 document 객체를 통해 HTML(root document)에 접근합니다.

/  자바스크립트를 이용하여 동적인 화면을 구성한다.

참고 - BOM(Browser Object Model)이 window 객체를 통해 브라우저에 접근합니다.

→ window 객체 : 웹브라우저의 기본 구성 객체, document 상위 개념

→ document 객체 : 현재 생성한 화면(html) 구성 객체
→ 다른 언어도 DOM을 가지고 있지만, 자바스크립트의 DOM이 전통적으로 오래 쓰여왔고 안정입니다.

→ document.querySelector 는 , 생성하기 위한 메소드가 아니라 조회하는 메소드 

→ document.cloneNode 는, 생성하는 메소드가 아니라 복제하는 메소드 입니다

→  innerHTML 은 Element를 집어서 텍스트를 HTML 형식에 맞게 주입하는 방식으로 활용할 수 있습니다. ex) '<div></div>'

→ document.importNode 는, template 을 활용하여 내용을 붙여넣을 때 사용하는 메소드

→ document.getElementsByTagName('태그명') : 해당 태그명을 가진 요소를 지정(모든 요소 지정)

→ document.deleteNode(aElement) deleteNode라는 메소드는 없습니다.

*HTMLCollection과 NodeList의 차이점

두 객체의 공통점은 모두 배열과 비슷하지만 배열이 아닙니다

두 객체 모두 항목의 수를 정의하는 length 속성을 가지고 있습니다.

둘 다 배열과 같이 각 항목을 접근하기 위한 인덱스를 제공합니다.

HTMLCollection의 항목은 name, id 속성으로도 접근이 가능하지만,

NodeList의 항목은 인덱스 번호로만 접근이 가능합니다.

NodeList객체에만 Text Node가 포함될 수 있습니다.(XML의 경우 Attribute Node도 포함될 수 있습니다.)

 

→ document.querySelector("#world").remove(), document.querySelector("#world").remove(aElement)

두 메소드는 world 엘리먼트 전부를 지우게 됩니다.

→ 지정된 요소에 id속성 및 id값 설정(setAttribute() 사용하지 않고 간편하게)

→ insertBefore() : 파라미터인 노드를 호출한 노드의 앞에 추가한다.

→ textContent는 해당 내용을 모두 텍스트로 인식, innerHTML은 태그형식은 태그로 인식

→ 어떤 이벤트 발생 시 작동하는 함수를 할당하는 방법

→ oncilck, onkeyup 속성이나 addEventListener 메소드로 이벤트 핸들러 함수를 HTML 엘리먼트에 적용

→ DOM 객체에 onclick을 직접 지정할 수도 있음 : (1), 이벤트 속성 이용

→ addEventListener라는 메소드를 사용해서 할당할 수도 있음 : (2)

(1) function displayAlert() {

  alert('코드스테이츠에 오신 것을 환영합니다')

}

document.querySelector('#apply').onclick = displayAlert

(2) document.querySelector('#apply').addEventListener('click', function(){

   alert("코드스테이츠에 오신 것을 환영합니다")

})

→ onclick 는 중복실행이 안되고 addeventlistener 는 된다.

→ 같은 element 에 대해 onclick 여러개를 할당하면 마지막 것만 실행이 되고 addeventlistener 는 같은 경우 함수가 전부 다 실행된다고 합니다

*tip : div.클래스명 -> 엔터시 div태그,클래스명까지 지정되서 생성

div#아이디명  /  태그명.클래스명*개수 : 해당 태그(클래스명을 가짐)를 개수만큼 생성함

 

- 추가사항

textContent와 innerText차이

https://developer.mozilla.org/ko/docs/Web/API/HTMLElement/innerText(참고)

 

-----------------------------------------------------------------------------------------------------------------

→ css에 dislay:none이 추가되면 해당 요소가 안보인다.

/ css파일에 class명으로 hide를 만든후 dispaly:none추가

/  가려야할 요소에 hide클래스명 추가

/  자바스크립트로 조건을 주어서 조건에 따라 클래스명인 hide를 삭제해서 보이게함

→ document.querySelector('#username').value = '새로운 값';

/  input이나 textarea의 입력값을 가져옴

→visibility: hidden은 얼핏 비슷해보이나, display: none이 브라우저에서 아예 영역조차 사라지는 것과는 달리, 엘리먼트가 차지하는 영역을 그대로 남겨놓는다는 점이 다릅니다.

→ display 속성은 해당 엘리먼트의 표현 방식을 결정

/   flexbox로 설정할 수도 있으며, block 또는 inline과 같이 줄바꿈/인라인 속성을 결정

 

- 관심사 분리

→ 디자인의 디테일한 요소가 자바스크립트 코드에 담기는 것을 방지하기 위해

→ 따로 클래스를 이용하면, 해당 디자인을 디자이너가 쉽게 바꿀 수 있기 때문에

→ CSS는 디자인, 자바스크립트는 로직에 집중할 수 있게 하기 위해

- 이벤트 핸들러

→ onkeyup : 해당 요소에 키보드가 입력되면 이벤트 발생

/  요소.onkeyup = 이벤트 처리 함수

→ 여기서 조건을 함수로 따로 작성한다

→ 길이가 4이상일 경우 true를 반환, 미만일 경우 false를 반환

/  함수를 호출함으로써 조건문의 역활을 한다.

→ 조건문에 해당 함수를 호출하여 조건문으로 사용

→ 조건에 해당할 때 마다 css에 작성한 클래스명을 이용하여 클래스명 추가/삭제를 통해 요소의 css설정

→ 브라우저 창 크기를 조절하거나, 스크롤하는 것도 DOM 이벤트의 일종이다.

*주의사항(이벤트 핸들러 함수 설정시)

function handler() {

  console.log('버튼이 눌렸습니다!');

}

 

1) btn.onclick = handler;

2) btn.onclick = handler();

→ 이 둘중 옳은 것은 1)이다.
/  이벤트 속성(onclick)에 이벤트 핸들러를 등록할 때에는 함수 그 자체로 등록해야 합니다

/  함수 실행을 등록할 경우 함수의 반환값이 저장되기 때문에 함수가 실행이 되지 않기 때문에 함수 실행을 등록해서는 안된다.

 

- 이벤트 객체

→ 이벤트 : 클릭이나 드래그하는 일을 이벤트라고 합니다

→ 기본적인 이벤트 동작 구성 : 구현한 이벤트 핸들러를 적절한 엘리먼트에 적용하여, 사용자가 엘리먼트에 특정 이벤트를 발생시켰을 때 이벤트 핸들러가 동작

----------------------------------------------------------------------------------------------------------------

→ pos기 작동

let menus = document.querySelectorAll("button"); //모든 버튼을 가져옵니다.

 

let btnAmericano = menus[0];

let btnCaffelatte = menus[1];

 

btnAmericano.onclick = handleClick;

btnCaffelatte.onclick = handleClick; // 이상으로 for 문으로 충분히 구현할 수 있는 내용입니다.

 

function handleClick() {

  let currentMenu = event.target.textContent; // TODO

  console.log(currentMenu + "를 클릭하셨습니다.");

}

→ event 객체는 이벤트가 발생할 때마다 해당 이벤트에 대한 정보를 제공한다.

/  이벤트 핸들러 내에서 이벤트가 발생한 요소를 지정시 event객체 사용

→ 이벤트 리스너가 등록되고 해당 객체나 요소에 지정된 타입의 이벤트가 발생하면, 브라우저는 자동으로 등록된 이벤트 리스너를 호출

→ 이때 이벤트 리스너는 인수로 이벤트 객체(event object)를 전달받으며, 식별자를 통해 전달받은 이벤트 객체를 참조

 

→ 브라우저 사양에 따라 속성명이나 메서드 명이 달라질수 있음

→ event객체 내부에서는 해당 이벤트에 대한 정보가 담겨있음

→ event.target은 이벤트가 발생한 요소를 지정한다

/  event.target.textContent -> 이벤트가 발생한 요소의 내부 text값

→ event객체를 사용하기 위해서 파라미터로 event 작성한다.

onsubmit  /  onchange  /  onmouseover  /  onkeyup [일반적 이벤트]

event.preventDefault : 이벤트가 발생하지 않도록 하는 이벤트 

/  이벤트를 취소할 수 있는 경우, 이벤트의 전파를 막지않고 그 이벤트를 취소합니다.