앞 예제에서 사용하던 방법은 html이 주인이 되어 자바스크립트의 함수를 호출해서
사용하는 베이직한 방식이다.
하지만 DOM을 사용하면 자바스크립트가 주인이 되어 html의 요소를 가져와서
이벤트 처리를 하게 만들 수 있다.
중요한 점은 이벤트 처리를 html이 하게 만드는가,
혹은 자바스크립트가 처리하게 만드는가를 중심을 잡고 코드를 처리해야한다.

이벤트를 처리하는 방식1

웹 요소를 클릭했을 때 실행할 함수를 연결하려면 아래 기본형을 사용한다.
이 방식은 자바 스크립트가 주인이 되어서 이벤트를 처리하는 방식 중 하나이다.

    [기본형]
    요소명.on이벤트명 = 함수명;

    function 함수명(){이벤트 자바스크립트 코드~~;}
        예시) document.querySelector('#아이디명').onclick =함수명;

이벤트를 처리하는 방식2

이벤트를 적용하고 싶은 태그를 변수에 담아두었다가 이벤트를 연결하는 방식이다.
이 방식은 여러 태그의 동일한 이벤트를 적용하고 싶을때 많이 사용한다.

    [기본형]
    const 변수명1 = 요소선택; 
    const 변수명2 = 요소선택; 
    const 변수명3 = 요소선택;
    
    function 함수명(){이벤트 자바스크립트 코드~~;}

    변수명1.on이벤트명 =함수명;
    변수명2.on이벤트명 =함수명;
    변수명3.on이벤트명 =함수명;


    ex) 
    const tag1 = document.querySelector('#아이디명');
    const tag2 = document.querySelector('#아이디명');

    function 함수명(){이벤트 자바스크립트 코드~~;}
    
    tag1.onclick =함수명;
    tag2.onmouseover =함수명;

이벤트를 처리하는 방식3

태그에 직접 원하는 이벤트를 적용하는 방식. 이 방식은 익명함수를 사용하고
보통 해당 태그만 이 이벤트를 사용해야할 때 많이 쓰는 방식이다.

    [기본형]
    요소명.on이벤트명 = function(){이벤트 자바스크립트코드~~;};


    ex) document.querySelector('#아이디명').onclick =function(){
    이벤트 자바스크립트코드~~;
    };

1.2번은 다른 애들도 갖다 쓸 수 있다 - 함수명으로 분리해놨으니까 !
1과 2는 하나의 기능으로 두개이상의 태그를 같은 걸 적용해야할때
3은 다른 태그들은 안 쓰고 해당 태그에만 써야할때 필요한 것이다.
3번은 무척 길기때문에 가독성이 좋지 않다 그래서 변수로 따로 빼서 쓰도록 해보자