[JavaScript] 자바스크립트 이벤트

1. 자바스크립트의 이벤트 연결

2. 이벤트 종류

3. 이벤트 객체 프로퍼티

4. 이벤트 객체의 메서드

1. 자바스크립트 이벤트 연결

자바스크립트에서 이벤트를 연결하는 방식에는 아래의 3가지가 있다.

1) 인라인 이벤트 연결: html 요소에 직접 이벤트 연결

2) 기본 이벤트 연결: html 요소를 취득 후 이벤트를 '객체의 메서드' 형식으로 연결

3) 표준 이벤트 연결: 객체.addEventListener('이벤트', 함수) 방식으로 연결

 

1) 인라인 이벤트 연결: html에서 연결

<button onclick='sum(10);'>클릭</button>
<!--button을 클릭하면 파라미터값으로 10을 가져가서 함수 sum() 실행-->

 

2) 기본 이벤트 연결: JS에서 연결

<button id = "bt">클릭</button>
<script>
	let bt = document.getElementById('bt'); //id로 html의 요소 취득
    bt.onclick = function(){ //이름 없는 함수 선언
    	console.log('ok'); //console에 'ok'가 출력되는 함수
    }
</script>

 

3) 표준 이벤트 연결: JS에서 연결

<script>
	window.onload = function(){
        let bt = document.getElementById('bt');
        function view(){
            console.log('ok');
        }
        bt.addEventListener('click', view); //함수가 같은 문서 내에 정의되어 있는 경우
    };					//호출시 () 불필요
</script>
<button id = "bt">클릭</button>

 

 

 

2. 자바스크립트 이벤트 종류

1)마우스 이벤트

• click: 마우스를 클릭했을 때 이벤트 발생
• dbclick: 마우스를 더블클릭했을 때 이벤트 발생
• mouseover: 마우스를 오버했을 때 이벤트 발생(=hover)
• mouseout: 마우스를 아웃했을 때 이벤트 발생
• mousedown: 마우스를 눌렀을 때 이벤트 발생
• mouseup: 마우스를 뗐을 때 이벤트 발생
• mousemove: 마우스를 움직였을 때 이벤트 발생

2)키 이벤트

• keydown: 키를 눌렀을 때 이벤트 발생
• keyup: 키를 뗐을 때 이벤트 발생
• keypress: 키를 누르고 있을 때 이벤트 발생

3)폼 이벤트

• focus: 포커스됐을 때 이벤트 발생
• blur: 포커스 벗어났을 때 이벤트 발생
• ★change: 값이 변경됐을 때 이벤트 발생
• submit: submit 버튼을 눌렀을 때 이벤트 발생
• reset: reset 버튼을 눌렀을 때 이벤트 발생
• select: input이나 textarea 요소 안의 텍스트를 드래그해서 선택했을 때 이벤트 발생

4)로드, 기타 이벤트

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

 

 

3. 이벤트 객체 프로퍼티

이벤트 객체는 자바스크립트에서 기본적으로 제공된다. 이를 이용해서 좌표값과 이벤트 객체 정보를 쉽게 얻을 수 있다.

 

객체 프로퍼티

• target: 이벤트 발생 객체 반환
• type: 이벤트 이름 반환
• clientX: 이벤트 발생 X좌표값 반환(브라우저 기준)
• clientY: 이벤트 발생 Y좌표값 반환(브라우저 기준)
• screenX: 이벤트 발생 X좌표값 반환(모니터 기준)
• screenY: 이벤트 발생 Y좌표값 반환(모니터 기준)
• button: 마우스 왼쪽(0), 가운데(1), 오른쪽(2) 버튼 값 반환

사용 예시

<button id = "bt">클릭</button>
<script>
	bt.onclick = function(event)
    {
    	console.log(event.target);
        console.log(event.type);
        console.log(event.clientX);
    }
</script>

 

 

 

4. 이벤트 객체의 메서드

1) preventDefault(): 기본 이벤트의 실행을 막음

기본 이벤트: a 태그를 클릭했을 때 이동하는 것, 폼의 submit을 클릭했을 때 서버에 제출하는 것 등

<script>
	window.onload = function(){
    	var a = document.getElementById('linker');
        a.onclick = function(event){
        	alert('개구리');
            event.preventDefault();
        }
    }
</script>

 

2) stopPropagation(): 이벤트 버블링 방지

※이벤트 버블링: 자식 이벤트로 인해 부모 이벤트까지 같이 실행되는 것

 

<script>
	window.onload = function(){
    	let a = document.getElementById('outer');
        let b = document.getElementById('inner');
        outer.onclick = function(){
        	alert('부모 이벤트');
        };
        inner.onclick = function(event){
        	alert('자식 이벤트');
            event.stopPropagation();
        };
    };
</script>