DOM 요소에 함수 직접 연결하기
- 이미지를 클릭하면 알림 창 표시하기
img 요소를 가져와 변수에 저장한 후 onclick을 사용해 변수에 이벤트 처리기(함수)를 직접 연결. 이미지를 클릭하면 알림 창이 나타나지만, 이미지 외의 다른 곳을 클릭하면 실행되지 않음.
<img src="../17/images/cup-1.png" id="cup">
<script>
var cup = document.querySelector("#cup");
cup.onclick = function() {
alert("이미지를 클릭했습니다.");
}
</script>함수 이름을 사용해 연결하기
- 이번트가 발생했을 때 실행할 함수를 따로 정의해 놓았다면 함수 이름을 사용해 연결할 수 있음. 이 경우에는 수 이름 다음에 괄호
()를 추가하지 않음. - 이미지를 클릭하면 함수 실행하기
이미지를 cup변수로 저장한 후 click이벤트가 발생했을 때 changePic()함수를 실행
<body>
<img src="../17/images/cup-1.png" id="cup">
<script>
var cup = document.querySelector('#cup'); // id=cup 요소를 가져옴.
cup.onclick = changePic; // cup을 클릭하면 ChangePic함수를 실행.
function changePic () {
cup.src="../17/images/cup-2.png"; // cup 요소의 경로를 다른 이미지 경로로 바뀜.
}
</script>
</body>DOM의 event 객체 알아보기
- DOM에는 이벤트 정보를 저장하는
event 객체가 있음. 이 객체에는 웹 문서에서 이벤트가 발생한 요소가 무엇인지, 어던 이벤트가 발생했는지 등의 정보가 들어있음. - 이미지에서 클릭한 위치 알아내기
이미지에 발생한 이벤트의 유형과 위치를 알림 창으로 보여 주는 예제. img요소를 클릭하면 그 위치를 확인하기 위해 event객체를 함수의 인수로 사용함.
<body>
<img src="../17/images/cup-1.png" id="cup">
<script>
var cup = document.querySelector("#cup");
cup.onclick = function(event) {
alert("이벤트 유형: " + event.type + ", 이벤트 발생 위치: "
+ event.pageX + "," + event.pageY);
}
</script>
</body>-
event객체의 프로퍼티altKey: 이벤트가 발생할 때Alt를 눌렀는지 여부를boolean값으로 반환button: 마우스에서 누른 버튼의 키값을 반환charCode:keypress 이벤트가 발생할 때 어떤 키를 눌렀는지유니코드값으로 반환clientX: 이벤트가 발생한가로위치를 반환clientY: 이벤트가 발생한세로위치를 반환ctrlKey: 이벤트가 발생했을 때Ctrl를 눌렀는지 여부를boolean 값으로 반환pageX:현재 문서 기준으로 이벤트가 발생한가로위치를 반환pageY:현재 문서 기준으로 이벤트가 발생한세로위치를 반환screenX:현재 화면 기준으로 이벤트가 발생한가로위치를 반환screenY:현재 화면 기준으로 이벤트가 발생한세로위치를 반환shiftKey: 이벤트가 발생할 때Shift를 눌렀는지 여부를boolean값으로 반환target: 이벤트가 최초로 발생한대상을 반환timeStamp: 이벤트가 발생한시간을 반환type: 발생한 이벤트이름을 반환which:키보드와 관련된 이벤트가 발생할 때키의 유니코드값을 반환
-
event객체의 메서드preventDefault(): 이벤트를 취소할 수 있는 경우에 취소
-
this예약어 사용하기
event 객체에는 이벤트 정보만 들어있음. 만약 이벤트가 발생한 대상에 접근하려면 이벤트 처리기에서예약어 this를 사용해야함.
<body>
<img src="../17/images/cup-2.png" id="cup">
<script>
var cup = document.querySelector('#cup');
cup.onclick = function(event) {
alert("클릭한 이미지 파일 : " + this.src);
}
</script>
</body>addEventListener() 메서드 사용하기
지금까지 살펴본 이벤트 처리기는 한 요소에 하나의 이벤트 처리기만 연결할 수 있음. 하지만 addEventListener() 메서드와 event 객체를 사용하면 한 요소에 이벤트 처리기를 연결해 실행할 수 있음. addEventListener() 메서드는 끝에 세미콜론(;)을 꼭 붙여야 함.
기본형요소.addEventListener(이벤트, 함수, 캡처 여부);
① 이벤트 : click과 keypress처럼 on을 붙이지 않고 사용.
② 함수 : 이벤트가 발생하면 실행할 명령이나 함수를 지정. 함수를 정의할 때는 event객체를 인수로 받음.
③ 캡처 여부 : 기본값은 false. true이면 캡처링, false이면 버블링한다는 의미. 이벤트 캡처링은 DOM의 부모 노드에서 자식 노드로 전달되는 것이고, 이벤트 버블링은 자식 노드에서 부모 노드로 전달되는 것.
- 마우스 포인터를 올리면 이미지 바꾸기
<img src="../17/images/easys-1.jpg" id="cover">
<script>
var cover = document.getElementById("cover");
cover.addEventListener("mouseover", changePic);
cover.addEventListener("mouseout", originPic);
function changePic() {
cover.src="../17/images/easys-2.jpg";
}
function originPic() {
cover.src="../17/images/easys-1.jpg";
}
</script>- 단순히 이벤트를 처리하는 함수라면, 즉 따로 다른 곳에서 다시 사용하는 함수가 아니라면 아래와 같이 메서드 안에서 함수 표현식으로 사용하는 경우가 많음.
함수 선언부분을 그대로 옮기면 되는데, 이때 함수명은 제외함.
<img src="../17/images/easys-1.jpg" id="cover">
<script>
var cover = document.getElementById("cover");
cover.addEventListener("mouseover", function() {
cover.src="../17/images/easys-2.jpg";
});
cover.addEventListener("mouseout", function() {
cover.src="../17/images/easys-1.jpg";
});
</script>CSS 속성에 접근하기
자바스크립트를 이용하면 스타일 속성값을 가져와서 그 값을 원하는 대로 수정할 수 있음.
기본형document.요소명.style.속성명
- id가 desc인 요소의 글자색 바꾸기
document.getElementById("desc").style.color = "blue"; color처럼 한 단어인 속성명은 그대로 사용하면 되지만 background-color나 border-radius처럼 중간에 하이픈(-)이 있는 속성은 backgroundColor나 borderRadius처럼 두 단어를 합쳐서 사용
- 도형의 테두리와 배경색 바꾸기
<div id="container">
<p>도형 위로 마우스 포인터를 올려놓으세요.</p>
<div id="rect"></div>
</div>
<script>
var myRect = document.querySelector("#rect");
myRect.addEventListener("mouseover", function(){
myRect.style.backgroundColor = "green";
myRect.style.borderRadius = "50%";
});
myRect.addEventListener("mouseout", function(){
myRect.style.backgroundColor = ""; // 배경색 원래 값으로 지정
myRect.style.borderRadius = ""; // 테두리 원래 값으로 지정
});
</script>
