문서 객체에 이벤트 핸들러 적용

728x90

728x170

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26

<!-- 문서 객체에 이벤트 핸들러 적용 예제 -->
<html>
    ...
<body>
<h1 id="title">마우스 아웃</h1>
<a href="#" id="btn"><img src="images/btn_out.gif" alt="버튼"/></a>
<p id="img_src"></p>
<script type="text/javascript">
    var theBtn=document.getElementById("btn");
    var s=document.getElementById("img_src");
    theBtn.onmouseover=function(){
        document.getElementById("title").innerHTML="마우스 오버";
 
        theBtn.firstChild.src="images/btn_over.gif";
        s.innerHTML=theBtn.firstChild.src;
    }
 
    theBtn.onmouseout=function(){
    document.getElementById("title").innerHTML="마우스 아웃";
 
    theBtn.firstChild.src="images/btn_out.gif";
    s.innerHTML=theBtn.firstChild.src;
    }
</script>
</body>
</html>
Colored by Color Scripter

cs

소스 출처 : Do It! 자바스크립트+제이쿼리 입문 (정인용 지음, 이지스퍼블리싱)

728x90

그리드형(광고전용)

저작자표시

'Source Code > JavaScript' 카테고리의 다른 글

함수를 사용하여 사진 갤러리 만들기 (0)	2017.05.21
함수 (Function) (1)	2017.05.21
문서 객체 모델을 사용하여 자동차 견적 미리보기 페이지 만들기 (0)	2017.05.21
폼 요소 선택자 (0)	2017.05.21
선택자 호환성 문제 해결 (0)	2017.05.21
문서 객체 모델 (DOM) (0)	2017.05.21
브라우저 객체 모델을 사용해 운영체제와 스크린 정보 얻기 (0)	2017.05.21
navigator 객체 (0)	2017.05.21