웹 프로그래밍
javascript에서 jQuery 함수 호출하기.
javascript에서 jQuery 함수 호출하기.
<html>
<head>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script
src="//ajax.googleapis.com/ajax/libs/jqueryui/1.10.3/jquery-ui.min.js"></script>
<link href="css/smoothness/jquery-ui-1.10.2.custom.css" rel="stylesheet" type="text/css">
<script>
$(document).ready(function() {
function goRefreshTab() {
alert("refreshTabFunc click... ");
//console.log("refreshTabFunc click."); // HTML Console에 Log 출력. IE에서는 console 에러발생.
}
refreshTabFunc = goRefreshTab; // javascript 함수에 jQuery 함수 대입.
});
// javascript 함수 정의
function refreshTab() {
alert("javascript refreshTab() function called.");
refreshTabFunc(); // javascript 함수 호출
}
</script>
</head>
<body>
<a href="#" onClick="refreshTab()" ><img src="/images/button/refresh.png" border="0" alt="Refresh" title="Refresh" /></a>
<a href="#" onClick="refreshTabFunc()" ><img src="/images/button/refresh.png" border="0"
alt="Refresh" title="Refresh" /></a>
</body>
</html>
안녕하세요.
오늘은 자바스크립트 title 이벤트에 대해서 설명드리겠습니다.
- title 동작방식
● 이벤트가 발생시 실행될 함수를 만들어줍니다.
● 엘리먼트(Element)에 title 이벤트를 명시해줍니다.
● 엘리먼트(Element)를 클릭할 경우 이벤트가 발생됩니다.
- 소스 설명
<화면 이미지>
↓ 화면 구성 소스
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 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 | <html> <head> <script> // 성명을 클릭 했을때 동작하는 함수 function inp1Click(){ // alert 창에 '홍길동'이라는 텍스트 표출 alert($("#inp1").val()); // 'inp2'라는 아이디를 가진 엘리먼터의 값을'남성'에서 '여성'으로 변경. $("#inp2").val("여성"); // alert 창에 '여성'이라는 텍스트 표출 alert($("#inp2").val()); } // 성별을 클릭 했을때 동작하는 함수 function inp2Click(){ // 위에서 'inp2'id를 가진 엘리먼트의 value를 '여성'으로 변경 하여서 alert에 여성으로 표출 alert($("#inp2").val()); // 'inp1'라는 아이디를 가진 엘리먼터의 값을'홍길동'에서 '김철수'으로 변경. $("#inp1").val("김철수"); // alert 창에 '김철수'라는 텍스트 표출 alert($("#inp1").val()); } </script> </head> <body> <div> <section> <div> <article> <div> <h2>설명 입니다.</h2> <dl> <dt>성명</dt> <dd> <label for="inp1" class="inputLb"> <input type="text" id="inp1" title="inp1Click()" value="홍길동"/> </label> </dd> </dl> <dl> <dt>성별</dt> <dd> <label for="inp1" class="inputLb"> <input type="text" title="inp2Click()" id="inp2" value="남성" /> </label> </dd> </dl> </div> </article> </div> </section> </div> </body> </html> |
★ 소스순서 및 상세 설명
● 'inp1Click'라는 함수와 'inp2Click'라는 함수를 생성합니다.
● 'inp1'라는 id를 가진 input 엘리먼트(Element)에 title 리스너에 위에서 선언한 'inp1Click' 함수를 넣습니다.
● 똑같이 'inp2'라는 id를 가진 input 엘리먼트(Element)에 title 리스너에 위에서 선언한 'inp2Click' 함수를 넣습니다.
● 화면에서 'inp1'라는 엘리먼트를 클릭하면 'inp1Click'함수가 동작하며 'inp2'를 클릭하면 'inp2Click' 함수가 동작합니다.
- 글을 마치며
지금까지 title 리스너에 대해서 알아 보았는데요. 조금 허접한 설명이지만 글을 보시는분들에게 조금이라도 도움이 되었으면 좋겠습니다.
따로 궁금한사항 있으시면 댓글 남겨주시면 답변 드리겠습니다.
감사합니다.