[JS]DOM, 이벤트

웹브라우저는 HTML 문서를 해석하고, 화면을 통해 해석된 결과를 보여준다.

해석한 HTML 코드를 화면을 통해 보여주는 과정을 '렌더링'이라고 한다.

 

브라우저는 HTML 코드를 해석해서 요소들을 트리 형태로 구조화해 표현하는 문서를 표현한다

이를 DOM이라 하고, 브라우저는 DOM을 통해 화면에 웹 콘텐츠를 렌더링한다.

 

DOM: 자바스크립트를 사용해서 웹 콘텐츠를 추가, 수정, 삭제하거나 

마우스 클릭, 키보드 타이핑 등 이벤트에 대한 처리를 정의할 수 있도록 제공되는

프로그래밍 인터페이스 

---

이벤트

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

각각의 이벤트들은 이벤트 핸들러를 가짐.

이벤트 핸들러?: 이벤트가 발생되면 실행될 코드 블록

*이벤트 핸들러 등록 시 함수 명만 대입해야 함*

 

ex. 

inputType.onkeydown=handleTyping

inputClick.onclick=handleClick

handleTyping()는 반환값이 되므로 괄호 붙이면 안됨!

 

onclick 과 onkeydown을 통해 등록하는 것보다 현대적인 방법은 addEventListener 메소드 활용하는 것

target.onclick=function(){}

target.addEventListener('click', function(){})

두 코드는 결과가 같음

 

addEventListener 사용 시 이점 

->이전에 추가한 이벤트 핸들러를 제거할 수 있는 대응 메소드 존재

->같은 리스너에 대해 다수의 핸들러 등록 가능

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

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("또 다른 핸들러가 추가 등록되었다!")

})

//여러개 핸들러 등록 가능함

btn2.removeEventListener('click', handleClick)

const btn1=document.getElementById("one")

const btn2=document.getElementById("two")

const btn3=document.getElementById("three")

const handleClick=function(event){

    console.log(event.target)

}

btn2.addEventListener('click', handleClick)

event의 다양한 속성 활용 가능함

 

---

document.createElement

document.createElement('div')

메소드의 지정된 html요소를 만들어서 반환해 준다

 

곧장 웹 브라우저 화면에 추가되는 것은 아니고

appendChild 메소드를 사용해야 DOM내에 개별 요소에 추가 가능함

appendChild	append
추가한 자식 노드를 반환함	반환 데이터가 없음
노드 객체 추가	노드 객체, 문자열을 자식 요소로 추가

const button=document.getElementById("push")

const div=document.getElementById("area")

button.addEventListener('click', function(){

    console.log("div 생성 중! ")

    const newDiv=document.createElement("div")

    newDiv.style.backgroundColor="red"

    newDiv.style.width="200px"

    newDiv.style.height="200px"

    console.log(div.appendChild(newDiv))

})

---

입력 요소 값 읽기

사용자로부터 입력을 받는데 사용되는 요소

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

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

 

value

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

console.log(target.value)

 

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

target.value="변경값"

const textInput =document.getElementById("text")

const button=document.getElementById("button")

button.addEventListener("click", function(){

    console.log(textInput.value)

    textInput.value="클릭하면 이렇게 바뀝니다"

})

 

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

action이 없으면 이벤트 객체 사용해 보기

form에서 이벤트가 제출되는 submit 이벤트가 발생하면 action 속성의 url로 리다이렉트되지만, 

preventDefault()를 통해 기존 기능 차단하기 가능함 

<form>

        <input type="text" placeholder="이름" name="name" />

        <input type="text" placeholder="동네" name="town" />

        <input type="submit" value="PUSH" />

    </form>

   `<script src="new.js"></script>

const form=document.querySelector("form")

form.addEventListener("submit", function(e){

    e.preventDefault() //기존 기능을 차단한다

    console.log(form.name.value)

    console.log(form.town.value)

   

})

 

삼항 연산

세 개의 항을 이용해 결과를 반환하는 연산

조건식? 참일 경우: 거짓일 경우 

const select=document.querySelector('select')

const button=document.querySelector('button')

button.addEventListener('click',function(){

    console.log(select.value)

    let result;

    result=select.value=="foot"?

    "축구를 선택했네요!":

    "축구를 선택하지 않았네요!"

    alert(result)

})