[인터랙티브웹] 3. 이벤트, 함수 작성하기, 외부Script 불러오기

1. 클릭했을 때, 마우스를 움직였을 때

• 이벤트 기본 동작 방식

1) click 이벤트를 발생시킨다.

const ilbuni = document.querySelector('.ilbuni:nth-child(3)')
-> 3번째 class가 선택이 된다. 

ilbuni.addEventListener('click', function() {
	ilbuni.classList.add('special');
})

2) head 태그 안에서 사용되기 위해,
아래 태그들이 다 load된 뒤에 작동시키게 만들기 위해
window.addEventListener함수를 사용한다.

<script>
 ** window.addEventListener('load', function()** {
  	const ilbuni = document.querySelector('.ilbuni.c');
  });
</script>

3) toggle기능을 추가

<script>
        window.addEventListener('load', function(){
            const ilbuni = document.querySelector('.ilbuni.c');
            console.log(ilbuni); // 문서가 다 로드될 때까지 기다린다. 

            function clickInbuniHandler(){
                ilbuni.classList.toggle('special');
            }
        // 클릭했을 때 실행될 함수를 만들었다.
            ilbuni.addEventListener('click', clickInbuniHandler);
        });
</script>

load는 문서의 모든 리소스가 load될 때까지 기다린다. 전부 다 load가 끝날 때까지 기다렸다가 실행이 된다.

load자체가 비효율적인 면이 있다.
-> DOMContentLoaded를 사용하면 DOM구조의 내용만 다 load가 되고 난 뒤 실행이 된다. img 데이터까지 기다리지 않기 때문에 실행 시점이 빠르다.

jquery의 $(function() {});과 비슷한 기능이다.

3) DOMContentLoaded 사용하기
window.addEventListener('DOMContentLoaded', function(){})을 작성하여 사용한다.

4) script태그를 마지막에 작성하기
body태그가 끝나기 직전에 script태그를 작성하면 load코드를 따로 작성할 필요가 없다.

- 함수 작성하는 방법

1) 기존 작성 방법
const clickInbuniHandler = function() {

};

2) ES6이후 도입된 화살표함수
const clickInbuniHandler = ()=>{
ilbuni.classList.toggle('special')
};

- 전역변수를 사용하지 않고 동작하도록 만들기

전역변수를 사용하면 코드가
1) function을 이용하여 ()소괄호를 사용하여 감싼다.

// 전역변수 -> 전역변수를 최소화 해야 한다. 전역변수를 피하기 위해 
        // 함수 안으로 집어넣는다.
        (function() {
            const ilbuni = document.querySelector('.ilbuni.c');

            const clickInbuniHandler = ()=>{
                ilbuni.classList.toggle('special');
            }
        // 클릭했을 때 실행될 함수를 만들었다.
            ilbuni.addEventListener('click', clickInbuniHandler);
    
        })();

const와 let은 변수의 scope가 블록단위이기 때문에 감싸줘도 실행이 된다.

2) {} 중괄호를 사용하기

   ```

{
const ilbuni = document.querySelector('.ilbuni.c');

        function clickIlbuniHandler() {
            ilbuni.classList.toggle('special');
        }
        ilbuni.addEventListener('click', clickIlbuniHandler);
    }

외부에서 script 불러오기

• deffer

스크립트를 괄호에 넣지 않고, 새로운 파일에 넣기
스크립트를 외부에 넣고 불러올 때는
defer 옵션을 주면 background에서 load가 된다.
html 로드와 파싱이 다 끝난 뒤에 스크립트를 실행한다.

• async비동기적으로 load가 되지만,
  실행 순서가 보장이 되지 않는다.

이벤트 리스너에서 this의 역할

console.log(this);에서 this는 characters를 가리킨다.
console.log(e.currentTarget);의 currentTarget도 characters를 가리킨다.
console.log(e.target);은 내가 선택한 값이 무엇인지 나타낸다.

<script>
(function() {
	const characters = document.querySelector('.characters');
    function clickHandler() {
    	console.log(this);
        console.log(e.currentTarget);
        console.log(e.target);
     }
     characters.addEventListener('click', clickHandler);
})
</script>