애드프로 님 답변 참고해 코드를 수정해 봤는데,,,
본문
애드프로 님 답변 https://sir.kr/qa/323770
<script src="http://code.jquery.com/jquery-latest.js"></script>
<style>
.hz {width:100px; height:100px; }
.r {background: red;}
.b {background: blue; display: none;}
</style>
<div class="hz r"></div>
<div class="hz b"></div>
<button onmouseover="r()">red</button>
<button onmouseover="b()">blue</button>
<script>
//$(document).ready(function() { <---- 이 부분이 있으면 작동 X
function r(){
$('.hz').css('display','none'); $('.r').css('display','block');
}
function b(){
$('.hz').css('display','none'); $('.b').css('display','block');
}
//}); <---- 이 부분이 있으면 작동 X
</script>
왜 ready 메서드가 존재하면 작동 안 하는지 궁금합니다.
https://codepen.io/sinbi/pen/BaBqjPo 작동 O
https://codepen.io/sinbi/pen/zYOmrPp 작동 X
답변 3
저 함수를 ready 내에 넣어야할 이유도 없지만 넣으면 안되는 이유는
ready이부분도 결국은 함수 거든요
함수내의 값들은 전역으로 설정한 값이 아니면 외부에서 참조하거나 호출할 수가 없는 거죠
ready내에 aaa= 10이라고 설정하고 ready밖에서 aaa를 찾아보면 값이 없죠
아래처럼
<script>
$(function(){
var aaa=10;
});
function kkk(){alert(aaa);}
</script>
<a href="javascript:kkk()">kkk</a>
function kkk()를 ready내에 넣으면 마찬가지로 찾을 수가 없게되죠
그것은 함수를 ready안에 method 형태로 (지역함수)로 선언해서 그렇습니다.
<script src="http://code.jquery.com/jquery-latest.js"></script>
<style>
.hz {width:100px; height:100px; }
.r {background: red;}
.b {background: blue; display: none;}
</style>
<div class="hz r"></div>
<div class="hz b"></div>
<button onmouseover="r()">red</button>
<button onmouseover="b()">blue</button>
<script>
$(document).ready(function() {
r(); //굳이 부르겠다면 이렇게
b();
});
function r(){
$('.hz').css('display','none'); $('.r').css('display','block');
}
function b(){
$('.hz').css('display','none'); $('.b').css('display','block');
}
</script>
와 같이 선언부를 나누고 불러도 되지만
ready는
body 태그의
Onload에서 실행되는것과 유사한 구조라서
실제 마우스 오버이벤트가 작동하려면
함수가 밖으로 나와있어야죠
균이 님, 플래토 님 두 분 모두 감사합니다.
답변을 작성하시기 전에 로그인 해주세요.