<script> 태그 안의 JQuery 이벤트가 무시되는 현상 (그래서 모든 버튼마다 인라인으로 이벤트를 만들어 넣어줘야만 했더랬지)
결론부터 말하면, DOM이 다 로드된 이후에 실행하라고 명시적으로 작성해줘야 했다.
(더불어 이벤트 3개를 한 문서 객체에 연결지어 코드를 대폭 줄였다. 깔끔하게 작동한다. 음핫핫)
예를 들어 이런 제이쿼리 코드가 있을 때,
// index.html
<head>
<script>
$("#official").mouseover(function () {
$("#official").html("테스트");
});
</script>
</head>이걸 그냥 실행시키면 id=”official”속성을 가진 문서 객체가 생성되기도 전에 저 스크립트를 실행하고 넘어가게 되어 아무 일도 일어나지 않는다.
이를 방지하기 위해 두 가지 해결책이 있다:
// 1.
<script>
$(document).ready(function () {
$("#official").mouseover(function() {
$("#official").html("테스트");
})
});
</script>// 2.
<script>
$(function () {
$("#official").mouseover(function() {
$("#official").html("테스트");
})
});
</script>둘 모두 잘 동작함을 확인했다.
- 그런데 1번이나 2번이나, “official”이라는 id를 가진 버튼에 마우스를 올릴 때마다 반복되서 실행되는데 그건 어떤 원리로 가능한 건지 모르겠다.
⇒ 저 함수들은 이벤트를 ‘연결지어줌’을 완료한 것이기 때문일까?
개인적으로 2번이 더 이해가 안가고 1번이 더 안전하고 확실해 보인다. 앞으로 1번 방식을 사용하기로 한다.
참고로:
부트스트랩 버튼을 <input type=”button”> 해주고 class를 부트스트랩 버튼 클래스들로 똑같이 채우기만 하면 똑같은 모양으로 만들어지는 신기한 현상을 확인했다!
// 부트스트랩 원조 버튼
<button type="button" id="official" class="btn btn-outline-secondary">소개</button>
// 복제 input 버튼
<input type="button" id="official2" class="btn btn-outline-secondary" value="인풋버튼"/>
그리고 이 두 버튼의 “소개”라는 내용물을 바꾸고 싶을 때 사용할 수 있는 코드 팁:
$("#official").html("원조버튼2")
$("#official").val("원조버튼2")
$("#official2").attr('value', '인풋버튼2')
$("#official2").val("인풋버튼3")
⇒ 이렇게 잘 바뀐다:
아무튼 그래서 인라인 함수를 하나 밖으로 빼보는 중…
오오오오… 버튼 클릭시 발생하는 인라인 이벤트 하나를 완전히 밖으로 빼내고 이벤트 3개를 한꺼번에 연결하는 것까지 성공했다..! 제이쿼리의 on() 메소드 다음과 같이 이용하면 된다.
원래 이렇게 클릭할 때와 하버할 때가 따로 놀던 코드를:
// <script> 내부
$(document).ready(function () {
// Un과 Official에 마우스가 올라오면 글씨 바꾸기:
$("#official").hover(
function() {
$("#official").html("소개");
},
function() {
$("#official").html("Official");
}
);
})
// Official 버튼을 누르면 Unofficial 카드들을 모두 숨김.
// Official 카드들을 보임
function showOfficial() {
if ($('.unofficial-cards').is(':visible')) {
$('.unofficial-cards').hide();
}
$('.official-cards').show();
}
// <body> 내부
<button onclick="showOfficial()" type="button" id="official" class="btn btn-outline-secondary">Official</button>
이렇게 깔끔하게 줄였다:
$(document).ready(function () {
$("#official").on({
mouseenter: function() {
$("#official").html("소개");
},
mouseleave: function() {
$("#official").html("Official");
},
click: function() {
if ($(".unofficial-cards").is(':visible')) {
$(".unofficial-cards").hide();
}
$(".official-cards").show();
}
})
});
// <body> 내부
<button type="button" id="official" class="btn btn-outline-secondary">Official</button>깔끔하게 동작하는 것을 확인!
참고:
https://www.devkuma.com/docs/jquery/이벤트의-연결-및-처리-on--off--one-/ - JQuery의 이벤트 처리 변천사와 on()의 사용법
https://inspiredjw.tistory.com/entry/jQuery-유용한-팁-노하우-이벤트-문제-해결 - “DOM이 다 로드된 이후에 처리하기”
그리고 튜터님의 동지애.
Uploaded by N2T