12-02.이벤트 연결

이벤트 연결

사용자가 실제 이벤트를 발생시켰을 때 그 이벤트에 대응하여 처리하는 것 => '이벤트 핸들러'
'이벤트 핸들러'는 앞에 'on'을 붙여 주고 이벤트에 대한 동작(함수)을 처리

이벤트를 객체와 연결하는 방식

인라인 방식 & 고전방식 : DOM Level 0 / 단점 : 동일한 객체에 동일한 이벤트 여러번 적용 불가
인터넷 익스플로어 방식 & 표준 이벤트 방식 : DOM Level 2 / DOM Level 0의 단점을 보완하기 위한 것

1) 인라인 방식

<태그명 on이벤트 = 자바스크립트 코드> </태그명>

  <div onclick="alert('클릭했습니다1.')">클릭</div>
  <div onclick="view()">클릭</div>
    
  <script>
    function view() {
      alert("클릭했습니다2.");
    }
  </script>

2) 고전 방식

[1]
객체.on이벤트명 = function() {
}
[2]
function 함수명() {
}
객체.on이벤트명 = 함수명

<div id="bt">클릭</div>

  [방법1]
  <script>
    var bt = document.getElementById("bt");
    bt.onclick = function () {
      alert("클릭했습니다!!!");
    };
  </script>
  
  
  [방법2]
  <script>
     var bt = document.getElementById("bt");
     function view() {
        alert("클릭했습니다!!!");
     }
     
     bt.onclick = view;
     
     /*
     bt.onclick = function() {
        view();
     }
     */
   </script>