JavaScript5

 <h1>이벤트(Event)</h1>
    <pre>
        이벤트 :
            -> 브라우저에서 동작, 행위
            click, keydown, keypress, keyup,
            mouseover, mouseout, mouseleave, mouseenter,
            change, submit.....

        
        이벤트리스너(Event Listener)
        -> 이벤트가 발생하는 것을 대기하고 있다가
        이벤트 발생이 감지되면 연결된 기능(함수)를 수행함

        ex) onclick, onkeyup, onchange, onsubmit ,...(on이벤트)


        이벤트 핸들러(Event Handler)
        -> 이벤트 리스너에 연결된 기능(함수)
            이벤트가 발생했을 때 수행하고자 하는 내용을 작성하는 함수
    </pre>

    <hr>
    <h1>인라인 이벤트 모델</h1>
    <pre>
        요소 내부에 이벤트 리스너, 핸들러 작성하는 방법

        on이벤트명"함수명()" 형태로 작성
    </pre>
        <!-- 리스너   핸들러 -->
    <button onclick="fnTest1(this)">인라인 이벤트 모델 확인용 버튼</button>
    
    <hr>

    <h1>고전 이벤트 모델</h1>
    <pre>
        요소가 가지고 있는 이벤트 속성(이벤트 리스너)에
        이벤트 핸들러를 직접 연결하는 방법
    </pre>

    <button id="btn1">고전 이벤트 모델 확인</button>
    



    <hr>
    <h1>표준 이벤트 모델</h1>
    <pre>
        - W3C에서 공식적으로 지정한 이벤트 모델

        - 요소.addEventListener("이벤트명", 함수);

        - 고전 이벤트 모델의 단점 보완 가능
        (한 요소에 여러 이벤트 핸들러를 설정할 수 있다.)
    </pre>

    <button id="btn2">클릭해보세용</button>

    <hr>

    <h1>배경색이 입력한 값으로 변하는 박스</h1>
    <div id="div1"></div>
    <input type="text" id="input1">