[Javascript] event 객체의 프로퍼티와 메서드

구분		설명
프로퍼티	altKey	이벤트가 발생할 때 Alt키를 눌렀는지 여부를 boolean값으로 반환합니다.
	button	마우스에서 누른 버튼의 키값을 반환합니다.
	charCode	keypress 이벤트가 발생할 때 어떤 키를 눌렀는지 유니코드값으로 반환합니다.
	clientX	이벤트가 발생한 가로 위치를 반환합니다.
	clientY	이벤트가 발생한 세로 위치를 반환합니다.
	ctrlKey	이벤트가 발생했을 때 Ctrl키를 눌렀는지 여부를 boolean값으로 반환합니다.
	pageX	현재 문서 기준으로 이벤트가 발생한 가로 위치를 반환합니다.
	pageY	현재 문서 기준으로 이벤트가 발생한 세로 위치를 반환합니다.
	screenX	현재 화면 기준으로 이벤트가 발생한 가로 위치를 반환합니다.
	screenY	현재 화면 기준으로 이벤트가 발생한 세로 위치를 반환합니다.
	shiftKey	이벤트가 발생할 때 Shift키를 눌렀는지 여부를 boolean값으로 반환합니다.
	target	이벤트가 최초로 발생한 대상을 반환합니다.
	timeStamp	이벤트를 발생한 시간을 반환합니다.
	type	발생한 이벤트 이름을 반환합니다.
	which	키보드와 관련된 이벤트가 발생할 때 키의 유니코드값을 반환합니다.
메서드	preventDefault()	이벤트를 취소할 수 있는 경우에 취소합니다.

event 객체에는 이벤트 정보만 들어있다. 따라서 이벤트가 발생한 대상에 접근하려면 이벤트 처리기에서 예약어 this를

사용해야 한다.

 

* this 예약어 사용하기

(...생략...)
<img src = "images/card.png" id = "card"> // id값이 card인 이미지

...
<script>
	var card = document.querySelector("#card");
    card.onclick = function(event) {
    	alert("클릭한 이미지 파일 : " + this.src); // 알림창에 클릭한 이미지의 파일 경로 표시
    }
</script>
(...생략...)

 

* addEventListener() 메서드 사용하기

addEventListener() 메서드와 event 객체를 사용하면 한 요소에 여러 이벤트 처리기를 연결해 실행할 수 있다.

- 기본형 : 요소.addEventListener(이벤트, 함수, 캡처 여부);

이벤트 : 이벤트 유형을 지정한다. 단, click과 keypress처럼 on을 붙이지 않고 쓴다.

 

addEventListener() 메서드의 예시로 마우스 포인터를 올리면 이미지를 바꾸는 예제가 있다.

(...생략...)

<div id="container">
		<img src="images/easys-1.jpg" id="cover">	
</div>

	<script>
		var cover = document.getElementById("cover");
		cover.addEventListener("mouseover",changePic, false);
    	cover.addEventListener("mouseout",originPic, false);
    
    	function changePic() {
      	cover.src = "images/easys-2.jpg"; // 이미지 경로를 easys-2.jpg로 바꿈
    	}
    	function originPic() {
      	cover.src = "images/easys-1.jpg"; // 이미지 경로를 easys-1.jpg로 바꿈
    	}
	</script>
(...생략...)

이 예제에서는 함수 changePic()과 originPic()을 따로 선언하고 사용했다. 하지만 따로 다른 곳에서 다시 사용하는 함수가 아니라면 다음처럼 메서드 안에서 함수 표현식으로 주로 사용된다.

(...생략...)

<div id="container">
		<img src="images/easys-1.jpg" id="cover">	
</div>

	<script>
		var cover = document.getElementById("cover");
		cover.addEventListener("mouseover", function() {
      	cover.src = "images/easys-2.jpg"; 
    	});
    	
        cover.addEventListener("mouseout", function() {
      	cover.src = "images/easys-1.jpg"; 
    	});
    
	</script>
(...생략...)

이렇게 addEventListener() 메서드 안에 함수를 함께 선언하면 특정 이벤트에서 어떤 명령을 실행하는지

한눈에 확인할 수 있어서 편리하다.

 

* CSS 속성에 접근하기

CSS 속성에 접근하려면 해당 스타일이 적용된 HTML 요소 다음에 예약어 style을 쓰고 속성을 적는다.

- 기본형 : document.요소명.style.속성명

예를 들어 id가 desc인 요소의 글자를 파란색으로 변경하려면 다음과 같이 작성한다.

document.getElementById("desc").style.color = "blue";

이렇게 color처럼 한 단어인 속성명은 그대로 사용하면 되지만 background-color, border-radius처럼 중간에

하이픈(-)이 있는 속성은 backgroundColor나 borderRadius처럼 두 단어를 합쳐서 사용한다.

 

이번엔 사각형 위에 마우스 포인터를 올려놓으면 초록색 원으로 바뀌고,

내려놓으면 원래 도형으로 되돌아가는 예제이다.

(...생략...)
<div id="rect"></div>
....

	<script>
		var myRect = document.querySelector("#rect");
		myRect.addEventListener("mouseover", function() {  // mouseover 이벤트 처리
			myRect.style.backgroundColor = "green";  // myRect 요소의 배경색 
			myRect.style.borderRadius = "50%";  // myRect 요소의 테두리 둥글게 처리
		});
		myRect.addEventListener("mouseout", function() {  // mouseout 이벤트 처리
			myRect.style.backgroundColor = "";  // myRect 요소의 배경색 지우기 
			myRect.style.borderRadius = "";  // myRect 요소의 테두리 둥글게 처리 안 함
		});
	</script>