자바스크립트 입문[Javascript] - 자바스크립트와 브라우저의 상호작용 (Javascript On The Browse) - ( 2 )

2021-07-24

자바스크립트 학습일지입니다.

해당 내용은 노마드코더님의 <바닐라JS로 크롬 앱 만들기> 강의를 들으며 추가적인 학습을 정리한 내용입니다.

---

[Javascript On The Browse - ( 2 )] 

 

Javascript는 브라우저에서 매우 강력합니다. 브라우저 안의 스타일도 쉽게 바꿀 수 있습니다.

const title = document.querySelector("div.title h1");

title.style.color = "blue";

↑ 자바스크립트를 이용해 HTML의 글자 색깔을 수정 

 

Events

 

모든 Events를 자바스크립트는 감지 (Listen) 할 수 있습니다.

 

 

const title = document.querySelector("div.title h1");

function handleTitleClick () {
	console.log("title was clicked!");
}

title.addEventListener("click", handleTitleClick);

↑클릭 이벤트를 감지하는 자바스크립트

자바스크립트가 Event를 감지하는 방법은 HTML element를 가져와서 , addEventListener function이 실행됩니다.

const title = document.querySelector("div.title h1"); 로 HTML element를 가져옵니다.

(이때, title이라는 변수는 object가 됩니다.)

addEventListener을 이용한 이벤트 등록은 이벤트를 등록하는 가장 권장되는 방식입니다.

(참고로, addEventListener은 method입니다.)

 

addEventListener 안에 들어가는 함수 handleTitleClick에 ( ) 를 붙여주지 않는게 매우 중요합니다.

만약, title.addEventListener( "click", handleTitleClick( ) ) 라면 유저가 클릭하기 전에 handleTitleClick가 실행이 되어console.log ( "title was clicked!" ) 가 실행됩니다. title은 클릭되지않았는데 말이죠.이전 포스팅에 말했든 함수 뒤 ( ) 은 실행을 뜻합니다.

따라서 우리는 Javascript에 function 넘겨주고,

( 이 경우, addEventListener에 handleTitleClick을 넘겨주고)

유저가 click이라는 행위를 할 경우 JS가 실행버튼을 눌러주길 기다리는겁니다. 

 

addEventListener가 가장 권장되는 방식인 이유 중 하나는,

addEventListener  이용하면 여러개의 이벤트 핸들러를 등록할 수 있습니다. 

 

title.onclick=handleTitleClick;
title.onmouseenter=handleMouseEnter;
title.onmouseleave=handleMouseLeave;

 

위와 같이 property에 대한 이벤트 등록을 한다면 두가지 이벤트를 등록할 수 없습니다.

 

<input type="button" id="target" value="button" />
<script>
    var t = document.getElementById('target');
    t.addEventListener('click', function(event){
        alert(1);
    });
    t.addEventListener('click', function(event){
        alert(2);
    });
</script>

위의 예시에서 버튼을 클릭할 때 alert(2)만 나타납니다. (alert (1)의 실행은 무시된거죠)

 

<input type="button" id="target" value="button" />
<script>
    var t = document.getElementById('target');
    t.addEventListener('click', function(event){
        alert(1);
    });
    t.addEventListener('click', function(event){
        alert(2);
    });
</script>

그러나 위의 예시처럼 addEventListener은 덮어쓰는 것이 아니라 추가하는 방식이기 때문에 여러가지 이벤트를 등록할 수 있습니다.

위의 예시는 하나의 element에 여러 이벤트를 등록한 것입니다.

 

이와 반대로, 복수의 element에 하나의 이벤트를 등록해서 재사용 할 수도 있습니다.

<input type="button" id="target1" value="button1" />
<input type="button" id="target2" value="button2" />
<script>
    var t1 = document.getElementById('target1');
    var t2 = document.getElementById('target2');
    function btn_listener(event){
        switch(event.target.id){
            case 'target1':
                alert(1);
                break;
            case 'target2':
                alert(2);
                break;
        }
    }
    t1.addEventListener('click', btn_listener);
    t2.addEventListener('click', btn_listener);
</script>

 

event.target.id 를 하게되면 각각의 element들이 가지고 있는 id값을 알 수 있습니다.

switch 문에 event.target.id를 인자로 받는다면, case 별로 alert=1 (id=target1 인 버튼을 클릭시)

또는 alert=2 (id=target2 인 버튼 클릭시) 가 실행되고 , break를 만나 switch문이 끝나게 됩니다.

 

예제 -  마우스 움직임에 따라 반응하는 브라우저

 

const title = document.querySelector("div.hello:first-child h1");

function handleTitleClick() {
	title.style.color = "blue";
}

function handleMouseLeave() {
	title.innerText = "Mouse is gone!"
}

function handleMouseEnter() {
	title.innerText = "Mouse is here!"
}

title.addEventListener("click",handleTitleClick);
title.addEventListener("mouseenter",handleMouseEnter);
title.addEventListener("mouseleave",handleMouseLeave);

 

 

유의해야할 것

 

document의 head, title, body 는 중요하기 때문에 document.body.style 같은 형식이 허용됩니다.   

그러나 h1 이나 div 같은 요소는 호출이 안되기때문에 querySelector 또는, getElementById로 호출해야합니다.

 

부록 - 자주 사용하는 이벤트의 종류

 

• click – 마우스버튼을 클릭하고 버튼에서 손가락을 떼면 발생한다.
• mouseover – 마우스를 HTML요소 위에 올리면 발생한다.
• mouseout – 마우스가 HTML요소 밖으로 벗어날 때 발생한다.
• mousedown – 클릭을 하기 위해 마우스버튼을 누르고 아직 떼기 전인 그 순간, HTML요소를 드래그할 때 사용할 수 있다.
• mouseup – 마우스버튼을 떼는 그 순간, 드래그한 HTML요소를 어딘가에 놓을 때 사용할 수 있다.
• mousemove – 마우스가 움직일때마다 발생한다. 마우스커서의 현재 위치를 계속 기록하는 것에 사용할 수 있다.
• focus – HTML요소에 포커스가 갔을때 발생한다.
• blur – HTML요소가 포커스에서 벗어났을때 발생한다.
• keypress – 키를 누르는 순간에 발생하고 키를 누르고 있는 동안 계속해서 발생한다.
• keydown – 키를 누를 때 발생한다.
• keyup – 키를 눌렀다가 떼는 순간에 발생한다.
• load – 웹페이지에서 사용할 모든 파일의 다운로드가 완료되었을때 발생한다.
• resize – 브라우저 창의 크기를 조절할때 발생한다.
• scroll – 스크롤바를 드래그하거나 키보드(up, down)를 사용하거나 마우스 휠을 사용해서 웹페이지를 스크롤할 때 발생한다. 페이지에 스크롤바가 없다면 이벤트는 발생하지 않다.
• unload – 링크를 클릭해서 다른 페이지로 이동하거나 브라우저 탭을 닫을 때 혹은 브라우저 창을 닫을 때 이벤트가 발생한다.
• change – 폼 필드의 상태가 변경되었을 때 발생한다. 라디오 버튼을 클릭하거나 셀렉트 박스에서 값을 선택하는 경우를 예로 들수 있다.

 

---

출처

 

addEventListener() - 생활코딩

 

EventTarget.addEventListener() - Web APIs | MDN

 

노마드 코더 Nomad Coders

 

노마드 코더 Nomad Coders