윤제니

JavaScript - 이벤트(Event), 이벤트의 종류, 이벤트 연결 본문

JavaScript/JavaScript

JavaScript - 이벤트(Event), 이벤트의 종류, 이벤트 연결

꿈다루 2020. 5. 4. 17:42

이벤트

  • 웹페이지에서 마우스를 클릭했을 때, 키를 입력했을 때, 특정요소에 포커스가 이동되었을 때 어떤 사건을 발생시키는 것 

 

이벤트의 종류 

 1) 마우스 이벤트

이벤트 설명
click 요소에 마우스를 클릭했을 때 이벤트가 발생
dbclick 요소에 마우스를 더블클릭했을 때 이벤트가 발생
mouseover 요소에 마우스를 오버했을 때 이벤트가 발생
mouseout 요소에 마우스를 아웃했을 때 이벤트가 발생
mousedown 요소에 마우스를 눌렀을 때 이벤트가 발생
mouseup 요소에 마우스를 떼었을 때 이벤트가 발생
mousemove 요소에 마우스를 움직였을 때 이벤트가 발생
contextmenu context menu(마우스 오른쪽 버튼을 눌렀을 때 나오는 메뉴)가 나오기 전에 이벤트 발생

 

 2) 키 이벤트 

이벤트 설명
keydown 키를 눌렀을 때 이벤트가 발생
keyup 키를 떼었을 때 이벤트가 발생
keypress 키를 누른 상태에서 이벤트가 발생 

 

 3) 폼 이벤트

이벤트 설명
focus 요소에 포커스가 이동되었을 때 이벤트 발생
blur 요소에 포커스가 벗어났을 때 이벤트 발생
change 요소에 값이 변경 되었을 때 이벤트 발생
submit submit 버튼을 눌렀을 때 이벤트 발생
reset reset 버튼을 눌렀을 때 이벤트 발생
select input이나 textarea 요소 안의 텍스트를 드래그하여 선택했을 때 이벤트 발생 

 

 4) 로드 및 기타 이벤트 

이벤트 설명
load 페이지의 로딩이 완료되었을 때 이벤트 발생
abort 이미지의 로딩이 중단되었을 때 이벤트 발생
unload 페이지가 다른 곳으로 이동될 때 이벤트 발생
resize 요소에 사이즈가 변경되었을 때 이벤트 발생
scroll 스크롤바를 움직였을 때 이벤트 발생 

 

 

 

이벤트 연결

  • 사용자가 실제 이벤트를 발생시켰을 때 그 이벤트에 대응하여 처리하는 것  =>  '이벤트 핸들러'
  • '이벤트 핸들러'는 앞에 '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>

 

★ <script></script>를 <head>태그 내부에 작성할 경우 ★

  • 'onload'는 '문서가 모두 로드되었을 때'를 의미
  • 'onload' 이벤트가 실행되면 'onload'의 익명함수 부분은 일단 미실행! 문서의 끝까지 모두 로드 되었을 때 익명함수 실행!
    • '<div id="bt">클릭</div>' 요소보다 document.getElementById("bt")가 먼저 정의 되었기 때문에 'onload'이벤트 사용
    • 'onload'이벤트 미사용시 'document.getElementById("bt")'가 실행되는 시점에 '<div id="bt">클릭</div>' 요소는 미존재 하므로 bt 변수에 저장되지 않는 문제 발생
  • 자바스크립트가 <head>태그 안에서 정의되고 getElementById() 메서드가 사용될 때는 반드시 'onload' 이벤트 사용 
  • 자바스크립트는 <body></body>태그 끝난 후 작성하는 것을 권장  
<!DOCTYPE html>
<html lang="ko">
  <head>
    <meta charset="UTF-8" />
    <title>이벤트</title>
    <style>
      div {
        border: 1px solid red;
      }
    </style>
    <script>
      window.onload = function () {
        var bt = document.getElementById("bt");
        bt.onclick = function () {
          alert("클릭했습니다.!");
        };
      };
    </script>
  </head>
  <body>
    <div id="bt">클릭</div>
  </body>
</html>

 

 

 

3) 표준이벤트 vs IE이벤트

    ★ 인라인 방식과 고전 방식의 경우 같은 객체에 대해 동일한 이벤트를 여러 번 사용 불가 ★

<!DOCTYPE html>
<html lang="ko">
  <head>
    <meta charset="UTF-8" />
    <title>이벤트</title>
  </head>
  <body></body>
  <script>
    function loadEnd1() {
      alert("실행1");
    }

    function loadEnd2() {
      alert("실행2");
    }

    window.onload = loadEnd1;
    window.onload = loadEnd2;
  </script>
</html>

>> 결과 : loadEnd2() 함수만 실행, 즉! 동일한 window객체에 대해 이벤트 핸들러('onload')는 마지막 하나만 적용 

      해결 : '이벤트리스너' 이용하여 해결  => 인터넷 익스플로러에 적용되는 것 과 그 외 (크롬,파이어폭스 등)에서 적용되는 것으로 나뉨.

'인터넷 익스플로러 이벤트 리스너' 추가 삭제 방법

객체.attachEvent('on이벤트명',function(){

});

객체.detachEvent('on이벤트명',function(){

});
'표준 이벤트 리스너' 추가 삭제 방법 (크롬, 파이어폭스 등)

객체.addEventListner('이벤트명',function(){

});

객체.removeEventListner('이벤트명',function(){

});

 

 

저작자표시

'JavaScript > JavaScript' 카테고리의 다른 글

JavaScript - BOM(Browser Object Model), Window 객체  (0) 2020.05.04
JavaScript - 이벤트 객체, 기본이벤트 실행 방지, 이벤트 버블링 방지, 이벤트 강제실행, this  (0) 2020.05.04
JavaScript - 생성자 함수, this, Object 객체, 클로저(closure)  (0) 2020.05.04
JavaScript - 객체(Object), 메서드, 내장객체  (0) 2020.05.02
JavaScript - 재귀함수, 내장함수 - number( ) / parseInt( ) / parseFloat( ), 특수값  (0) 2020.05.02
'JavaScript/JavaScript' Related Articles more