Dom 기본개념 정리(2)_알아두면 좋은 이벤트와 이벤트의 기본 문법, value와 textContent의 차이

이번 글에서는 Dom에서 event의 기본문접과 알아두면 좋은 event와 'value와 textContent의 차이

3가지에 대해 이야기해보겠습니다.

 

 

첫번째 value와 textContent의 차이는 

html 태그를 생각해보시면 됩니다.

 

우리가 알고 있는 input, textarea 등과 같이 사용자가 직접 작성해야 하는 칸이 있을겁니다.

그 칸에 들어가는 사용자가 입력한 값이 value가 됩니다.

 

textContent는 div, a, h1 등의 태그는 안에 저희가 설정한 값이 들어가게됩니다. 

<h1>개발공부 화이팅</h1> 이라는 태그가 있다면

 

dom에서는 

let h1Element = document.querySelecteot('h1') 
 
h1Element.textContent =  "개발공부 화이팅" 

이렇게 됩니다. 

textContent는 태그에 입력된 값을 의미하고,

.value는 사용자가 입력한 값을 의미합니다.

헷갈리지 않기!!

 

 

두번째 Dom에서 알아두면 좋은 event

웹 사이트를 서핑하다 보면, 이미지나 카드를 클릭하거나 드래그하는 일이 있습니다. 이렇게 클릭이나 드래그하는 일을 이벤트라고 합니다. 기본적인 이벤트를 알고, 이벤트 핸들러를 구현합니다. 구현한 이벤트 핸들러를 적절한 엘리먼트에 적용하여, 사용자가 엘리먼트에 특정 이벤트를 발생시켰을 때 이벤트 핸들러가 동작하도록 해야합니다.

 

이벤트의 기본 문법은 2가지가 있습니다.

 

1-
 
elementDiv.addEventListener('click',function(){
 console.log("좋은하루되세요")
}, false)
 
addEventListener는 3가지 요소를 가집니다. 
첫번째는 event type === 여기선 'click'
두번째는 event handler ===  여기선 function(){}
세번째는 option === 여기선 false 입니다.
 
 
2-
elementDiv.onclick = function(){
    console.log("좋은 하루되세요")
}

나중에 좀더 자세하게 배우면 다시 글을 작성하겠습니다.

 

세번째는 이벤트 타입에 들어가는 event의 종류 입니다.

엄청 많더라구요! 모든걸 알 필요없고, 필요한게 생기면 가져다 쓰는게 좋다고 합니다.

event	뜻	event	뜻
load	loading이 완료되었을 때 발생	mousedown	마우스를 클릭했을때 발생
scroll	스크롤 내릴때 발생	mouseup	마우스가 특정개체 위에 올려졌을때 발생
resize	사이즈 조정할때 발생	mouseover	마우스에서 손을 땠을때발생
blur	대상 엘리먼트가 포커스를 잃었을 때 이벤트를 처리하는 이벤트 핸들러	keydown	키를 눌렀을때 발생
focus	마우스 포인터가 대상 엘리먼트에 위치할 때	keyup	키에서 손을 땠을때 발생
change	input요소의 값이 바뀔때 발생
sumbit	제출할때 발생
click	클릭할때 발생

 

이정도는 알고있는게 좋다고 김버그 영상에 나와있습니다^^ 나중에 채널가셔서 확인해보셔도 좋을것같아요!!

읽어주셔서 감사합니다.