고똘이의 IT 개발이야기

- Javascript onclick 이벤트 예제 -


안녕하세요. 오늘은 onclick 이벤트에 대해서 알아보겠습니다.

아래에 소스와 함께 주석으로 설명을 적어놨습니다.


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
27
28
29
<script>
 
$(document).ready(function(){
    // test라는 클래스를가진 div를 클릭할 경우 "테스트입니다요."라는 alert가 뜬다.
    $(".test").on("click"function(){  
        alert("테스트입니다요.");
    });    
});
 
</script>
 
<div class="test">
    안녕하세요
</div>
 
<!-- *********************************** -->
 
<script>
    // div에 onclick이벤트를 줘서 div를 클릭했을경우 test라는 함수를 호출합니다.
    // 호출 시 "테스트2입니다요."라는 alert가 뜬다.
    function test(){ 
        alert("테스트2입니다요.");
    }
</script>
 
<div onclick="test()">
    안녕하세요
</div>
 
cs




- 조금 더 상세한 onclick에 대해서 궁금하시다면 아래의 텍스트를 클릭하시면 좀 더 자세한 글이 있는곳으로 이동이 됩니다.


[JavaScript] - [Javascript/Jquery] 자바스크립트 onclick 이벤트 리스너 설명 및 소스(초간단)



자바스크립트의 이벤트 핸들러는 무궁무진한데요.

앞으로도 자주 쓰이는 이벤트 핸들러에 대해서 올리겠습니다.

유용하셨다면 댓글도 달아주시면 감사하겠습니다.

이 글을 공유합시다

facebook twitter googleplus kakaoTalk kakaostory naver band