디자이너 윈썸 2022. 6. 24. 16:46

▶ 마우스 이벤트

이벤트 설명
click 마우스를 클릭했을 때 이벤트가 발생
dbclick 마우스를 더블클릭했을 때 이벤트가 발생
mouseover 마우스를 오버했을 때 이벤트가 발생
mouseout 마우스를 아웃했을 때 이벤트가 발생
mousedown 마우스를 눌렀을 때 이벤트가 발생
mouseup 마우스를 떼었을 때 이벤트가 발생
mousemove 마우스를 움직였을 때 이벤트가 발생

 

▶ 키 이벤트

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

 

▶ 폼 이벤트

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

 

▶ 로드, 기타 이벤트

이벤트 설명
load 로딩이 완료되었을 때 이벤트가 발생
abort 이미지의 로딩이 중단되었을 때 이벤트가 발생
resize 사이즈가 변경되었을 때 이벤트가 발생
scroll 스크롤바를 움직였을 때 이벤트가 발생

▶ 이벤트 연결

- 이벤트를 연결하는 방식에는 인라인 이벤트 모델, 기본 이벤트 모델, 표준 이벤트 모델이 있으며 이벤트 앞에 'on'을 붙임

▶ 인라인 이벤트 모델

인라인 이벤트 모델은 html 요소에 직접 이벤트를 연결하는 방식

<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title></title>
    <script>
     
       function sum(n) {
          alert(n);
        }

    </
script>
</head>
<body>
   
    <button onclick='sum(10);'>클릭</button>

    
</body>
</html>

 

▶ 기본 이벤트 모델

HTML 요소를 취득한 후 이벤트를 '객체의 메서드' 형식(객체.메서드 = function( ){ ... }) 으로 연결하는 방식

HTML 요소를 취득 할 /대는 순서상 '취득할 요소'가 '요소 취득 명령어' 이전에 있어야 함

<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title></title>
   <script>
     
     
    // 기본 이벤트 모델
    let bt = document.getElementById('bt');  //요소 취득 명령어
bt.onclick = function() {
    console.log('ok'); // ok
   }

   </
script>

</head>
<body>
   
    <button id="bt">클릭</button>  <!-- 취득할 요소 -->
 
</body>
</html>

'취득할 요소'가 '요소 취득 명령어' 이후에 오면 반드시 load 이벤트를 적용

<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title></title>
   <script>
   
 
window.onload = function() {
    let bt = document.getElementById('bt');
    bt.onclick = function() {
        console.log('ok');
    };
};

   </
script>

</head>
<body>
   
    <button id="bt">클릭</button>  <!-- 취득할 요소 -->
 
</body>
</html>

 

<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title></title>
   <script>
    
 
window.onload = function() {
    let bt = document.getElementById('bt');
    function view() {
        console.log('view');
    };
    bt.onclick = view;
};

   </
script>

</head>
<body>
   
    <button id="bt">클릭</button>  <!-- 취득할 요소 -->
 
</body>
</html>

 

기본 이벤트 모델로 다른 함수를 호출 때는 함수에 ( )를 붙이지 않음

만약 ( )를 붙이게 되면 웹페이지가 실행되었을 때 요소를 클릭하지 않아도 이벤트가 한번 실행되게 됨

이것을 이벤트 강제 실행이라고 함

bt.onclick = view( )

 

▶ 표준 이벤트 모델

표준 이벤트 모델은 객체.addEventListener('이벤트', 함수)의 방식으로 이벤트 연결

<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title></title>
   <script>
    
 
// 표준 이벤트 모델
window.onload = function( ) {
    let bt = document.getElementById('bt');
    function view() {
        console.log('ok');
    }
    bt.addEventListener('click',view);
}

   </
script>

</head>
<body>
   
    <button id="bt">클릭</button>  <!-- 취득할 요소 -->
 
</body>
</html>

'기본 이벤트 모델'은 객체에 동일한 이벤트가 한번만 적용되는 반면,

'표준 이벤트 모델'은 여러번 적용이 가능

<script>


window.onload = function( ) {

     console.log('ok1');  // ok1은 실행하지 않음
};

window.onload = function( ) {

    console.log('ok2');  // ok2
};


</script>
<script>

function win1( ) {

  console.log('ok1');
}

function win2( ) {
  
  console.log('ok2')
};

addEventListener('load', win1);  // ok1
addEventListener('load', win2);  // ok2

</script>

 

▶ 이벤트 객체

내장 객체처럼 자바스크립트에서 기본적으로 제공해 주는 객체

이벤트 객체를 이용하면 마우스를 클릭했을 때 클릭한 좌표 값이라든지 이벤트를 발생시킨 객체가 어떤 것인지 등에 대한 정보 값을 쉽게 얻을 수 있다

bt.onclick = function(event) {

     event.프로퍼티

     event. 메서드
}

익명 함수으이 매개 변수 event가 이벤트 객체를 의미

변수명을 반드시 'event'로 사용할 필요는 없으나, 보통 이벤트 객체의 의미로 'event'를 많이 사용

 

▶ 이벤트 객체 주요 프로퍼티

프로퍼티 설명
target 이벤트를 발생시킨 객체를 반환
type 이벤트의 이름을 반환
clientX 이벤트가 발생한 x좌표 값을 반환(브라우저 기준)
clientY 이벤트가 발생한 y좌표 값을 반환(브라우저 기준)
screenX 이벤트가 발생한 x좌표 값을 반환(모니터기준)
screenY 이벤트가 발생한 y좌표 값을 반환(모니터기준)
button 마우스 왼쪽(0), 가운데(1), 오른쪽(2) 버튼 값을 반환
<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title></title>
    <style>
        div{
            height: 100px;
            background: #718c00;
            margin-top: 20px;
            color: #fff;
        }
    </style>
</head>
<body>
   
    <button id="bt">클릭</button>  <!-- 취득할 요소 -->
    <div id="area">여기에 마우스 왼쪽, 가운데, 오른쪽 버튼 클릭</div>


    <script src="index3.js"></script>
 
</body>
</html>
window.onload = function() {
    let bt = document.getElementById('bt');
    let area= document.getElementById('area');

    bt.onclick = function(event) {
        console.log(event.target);
        console.log(event.type);
        console.log(event.clientX);
        console.log(event.clientY);
        console.log(event.screenX);
        console.log(event.screenY);
    }
    area.onmousedown = function(event) {
        console.log(event.button);
    };
};

 

▶ 이벤트 객체 주요 메서드

메서드 설명
preventDefault( ) 기본 이벤트의 실행을 막아 줍니다.
stopPropagation( ) 이벤트 버블링 방지해 줌

** preventDefault( ) 메서드

기본 이벤트 (Default event)는 html 요소 중 자바스크립트의 이벤트가 아닌, html 요소 자체가 가지고 있는 이벤트

예를들어,

<a> 요소는 내용을 클릭했을 때 링크 주소로 페이지가 이동하거나 <submit> 버튼처럼 버튼을 클릭했을 때 폼 값을 전송하는 요소 자체의 이벤트를 말함

 

<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title></title>
   
</head>
<body>
  

    <div><a href="http://icoxpublish.com" id="icox">아이콕스</a></div>


    <script src="index3.js"></script>
 
</body>
</html>
window.onload = function() {
    let icox = document.getElementById('icox');
    icox.onclick = function() {
        alert('아이콕스');
    }
}

아이콕스를 클릭하면 alert( ) 함수가 실행되고 <a> 태그에 연결된 주소로 이동

<a> 태그의 기본 이벤트를 발생 시키지 않으려면 preventDefault( ) 메서드를 사용하면 됨

 
    icox.onclick = function() {
        alert('아이콕스');
    event.preventDefault( )
}

event.preventDefault( ) 대신return false를 사용해도 기본 이벤트가 발생하지 않음


 
  
icox.onclick = function() {
        alert('아이콕스');
    return false;
}

stopPropagation( ) 메서드

'이벤트 버블링'은 부모 요소와 자식 요소 모두에 이벤트가 연결되어 있을 경우 자식 요소의 이벤트를 실행 하였을 때

부모 요소의 이벤트도 같이 실행되는 현상을 말함

<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title></title>
    <style>
      

        *{
            padding: 0;
            margin: .0;
        }

        #outer{
            background: #ff0000;
            padding: 20px;
        }

        #inner{
            background: #00ff00;
            padding: 20px;
        }

    </style>
</head>
<body>
   
   


    <div id="outer">
        <p id="inner">클릭</p>
    </div>


    <script src="index3.js"></script>
 
</body>
</html>
window.onload = function() {
    let outer= document.getElementById('outer');
    let inner= document.getElementById('inner');

    outer.onclick = function() {
        alert('부모 이벤트');
    };
    inner.onclick = function() {
        alert('자식이벤트');
    };
}

inner영역을 클릭하면 자신의 이벤트 실행 후 부모의 이벤트도 실행되는 현상을 볼 수 있음

이런 이벤트 버블링 현상을 방지하려면 stopPropagation( ) 메서드를 사용하면 됨

 inner.onclick = function() {
        alert('자식이벤트');
        event.stopPropagation( );
    };

추가된 코드의 결과를 확인해 보면 부모 이벤트가 발생하되지 않는 것을 확인할 수 있다.