[JavaScript] DOM 이벤트 함수 사용 및 원리

 

1) 자바스크립트 함수 생성 

function sayName (name){
	console.log("your name : ", name);
}

sayName("ohbox");

 

2) 자바스크립트는 html 코드를 모두 가져와 DOM 객체로 바꾼다. 

 

- 아래의 예시는 title이라는 id를 가진 html 요소를 가져온다. 

const title = document.getElementsByName('title'); //id

 

- 아래의 예시는 노드의 첫번 째 인자를 가져오는 document의 querySelector 객체를 이용했다.

#는 html의 id,

. 는 html의 class를 가리킨다. 

const title = document.querySelector('#title'); //노드의 첫 번째 인자
const description = document.querySelector('.description'); //노드의 첫 번째 인자

title.innerHTML = "Hi,From JS";
description.innerHTML = "This is JAVA practice";

 

3) 이벤트 발생 

 

EventTarget의 addEventListener() 메서드는 지정한 이벤트가 대상에 전달될 때마다 호출할 함수를 설정한다. 

 

- EventTarget :  window

- 이벤트 : resize 

- 함수 : handleResize

function handleResize(){
    console.log("resize");
}
window.addEventListener("resize", handleResize);

- EventTarget :  example3 (element)

- 이벤트 : click 

- 함수 : handleClicked

const example3 = document.querySelector('#example3'); //노드의 첫 번째 인자
const CLICKED_CLASS = 'clicked';
example3.innerHTML = 'Change the font style (using css)';

function handleClicked(){
     example3.classList.toggle(CLICKED_CLASS);
}

example3.addEventListener("click", handleClicked);

 

** DOM 이벤트 참고 

developer.mozilla.org/ko/docs/Web/Events

이벤트 참조 | MDN

4) 이벤트 제어 

 

보통 이벤트가 발생하면 root, 즉 form에서 발생한다. 

form에서 이벤트가 발생하면 document까지 이벤트가 전달된다.  그래서 새로고침이 발생한다.

이를 막기 위해 event.preventDefault()를 작성한다.