제이쿼리에서의 함수 정의 그리고 외부에서 함수 호출?
본문
안녕하세요.
자바스크립트를 학습하고 이제 막 이것저것 직접 손을 대보는 왕초보 입니다.
조언을 부탁드립니다.
html input 에 onclick 이벤트를 달았습니다.
<input type"checkbox" name="aa" onclick="hi()" />
그리고 외부 js 파일을 불러들여서 내용을 작성했습니다.
jQuery(function($){
....다른 내용...
function hi() {
alert("안녕");
}
});
function hi 안에 제이쿼리 함수를 쓸거라 이렇게 했는데,
웹화면에서 보니, input checkbox를 클릭해도 이벤트가 안먹히는 겁니다. 그래서 개발자도구를 보니, 함수가 정의가 안되어 있다고 하더라구요. 이해가 안가서 몇시간을 이리저리 시도를 해보다가,
function hi(){} 부분을 jQuery(function($){ } 밖으로 빼니까, onclick 이벤트가 먹히네요.
왜그럴까요?
html의 element에서 onclick으로 function hi() 함수를 호출하고 이 hi()함수에 query 함수를 쓰려면 어떻게 해야하나요?
조언을 부탁드립니다. 감사합니다.
답변 2
제이쿼리랑 일반적인 자바스크립트랑 헷갈린거같은데 제이쿼리는 도큐멘트레이디가 있어야지 실행되는거구요 그냥 일반적인 자스같은경우는 onclick이벤트핸들러를 줘서 hi()랑 바인딩처리하는거에요 암튼 자바스크립트할거면 도큐멘트레이디 여기서 할필요없어요
jQuery(function($){ .. }); 은
$(document).ready(function() { ... }); 의 축약형으로
문서가 로드되고 난 뒤 수행되도록 되어 있습니다.
자바스크립트의 window.load 와 유사합니다.
* 참고글 - http://hellogk.tistory.com/18
예로, 간단한 테스트 문서를 만들고,
$(document).ready(function() {
alert('hello world);
});
라고 코드가 되어 있으면, 문서가 로드된 뒤 알림창이 뜹니다.
알림창 코드 대신 함수 호출을 해도 됩니다.
jQuery(function($){
hi();
});
function hi() {
alert('안녕');
}
으로 되어 있으면 문서가 로드된 뒤, hi() 함수를 호출합니다. '안녕' 알림창이 나옵니다.
onclick 이벤트에서 정의한 함수를 호출하는 것은, jquery 프레임워크 사용시 기존 자바스크립트와 다르지 않습니다.
onclick 이벤트에 특정함수가 호출되도록 하려면, jquery 에서도 함수가 정의되어 있어야 하고,
$(document).ready(function() { .. }); 밖에 정의가 있어야 합니다.
jquery 식으로 해보고 싶다면, 다음의 코드는 가능합니다.
jQuery(function($){
$('input[name=aa]').on('clcick', function() {
hi();
});
});
fucntion hi() {
alert('안녕');
}
이렇게 해주면, <input name="aa">태그에서 onclcik 을 써주지 않아도 onclick 처리가 가능합니다.
문서가 로드되고 난뒤, <input name="aa"> 에 onclick 이벤트를 주는 방법이기도 합니다.
