[ Jquery ] 제이쿼리 클릭(click) 이벤트 예제(값 가져오기 포함).

안녕하세요. 오늘은 제이쿼리 클릭 이벤트 시 함수를 만드는 법과

자기 자신의 값을 가져 오는 것을 알려 드리겠습니다.

현재 아래와 같이 span의 id에 testClick를 선언 하였습니다.

현재 testClick이라는 id에 클릭 이벤트를 걸어 주면

alert를 통하여 "테스트 클릭 성공"이라는 메세지가 표출 될 것입니다.

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

<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>
 
<div>
    <span id="testClick">
        test 입니다.
    </span>
</div>
 
<script>
 
    // 테스트용 클릭
    $("#testClick").click(function(){
        alert("테스트 클릭 성공");
    });
</script>
</body>
</html>
http://colorscripter.com/info#e" target="_blank" style="color:#4f4f4ftext-decoration:none">Colored by Color Scripter

http://colorscripter.com/info#e" target="_blank" style="text-decoration:none;color:white">cs

두번째 방법으로는 아래와 같이

button의 id에 "test"라고 선언을 한 후

test로 명시한 아이디를 가지고 클릭 이벤트를 걸 경우

$(this).val()이라는 방식을 사용하여 현재 button의 value의 값인 "고현우"라는 데이터를

가지고 올 수 있습니다.

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

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>
 
<div>
    <button id="test" value="고현우">
    
    </button>
</div>
 
<script>
 
    // 테스트용 클릭
    $("#test").click(function(){
        alert($(this).val());
    });
</script>
</body>
</html>
http://colorscripter.com/info#e" target="_blank" style="color:#4f4f4ftext-decoration:none">Colored by Color Scripter

http://colorscripter.com/info#e" target="_blank" style="text-decoration:none;color:white">cs

위의 소스가 유용 하셨다면 좋아요 한번씩 클릭 해주시면 감사하겠습니다.

저작자표시 비영리

'JavaScript' 카테고리의 다른 글

[ jquery ] 제이쿼리 체크박스(checkbox) 체크된 데이터만 가져오기 (0)	2019.09.25
[제이쿼리] Jquery selectbox value 값 가져오기. (0)	2019.09.23
자바스크립트 onclick() 이벤트 예제 (0)	2018.11.06
[ Jquery ] 제이쿼리 서브스트링(substring) 예제 (1)	2018.11.01
[ Jquery ] 제이쿼리 스플릿(split) 예제 (0)	2018.11.01