<img src="../17/images/cup-1.png" id="cup">
<script>
var cup = document.querySelector("#cup");
cup.onclick = function() {
alert("이미지를 클릭했습니다.");
}
</script>
()
를 추가하지 않음. <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>
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() 메서드
와 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>
자바스크립트를 이용하면 스타일 속성값을 가져와서 그 값을 원하는 대로 수정할 수 있음.
기본형
document.요소명.style.속성명
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>