이벤트 등록 방식
지정한 요소에 등록하는 방법에는 <단독 이벤트 등록 방식> 과 <그룹 이벤트 등록 방식>이 있다.
- 단독 이벤트 등록 방식 : 한 가지 동작에 대한 이벤트 등록
- 그룹 이벤트 등록 방식 : 여러 동작에 대한 이벤트 등록
1. 단독 이벤트 등록 방식
: 대상에 한 가지 동작에 대한 이벤트만 등록할 수 있다. 이때는 on이라는 키워드를 넣지 않는다.
[기본형]
$('이벤트 대상').이벤트명(function(){ 코드 });
<button type="button" id="btn1">눌러보세요</button>
//단독이벤트 예제
$("#btn1").click(function () {
alert("눌렀습니다");
});
2. 그룹 이벤트 등록 방식
: 이벤트 대상에 한 가지 이상의 동작 이벤트를 넣을 수 있다.
이때 on()이라는 메서드를 사용한다.
[기본형]
1. on()메서드 등록 방식 1
$('이벤트 대상').on("이벤트종류1 이벤트종류2 이벤트종류3...", function(){ 코드 });
: 여러 개의 이벤트를 한꺼번에 등록한다.
* 단, 이벤트가 발생할 때마다 동일한 이벤트 핸들러(함수)가 실행된다.
2. on()메서드 등록 방식 2
$('이벤트 대상').on({
'이벤트종류1 이벤트종류2 이벤트종류3...' : function(){ 코드 }
})
: 1번과 동일하다. 객체로 등록하는 부분만 다르다. 여러 개의 이벤트를 한꺼번에 객체로 등록한다.
* 단, 이벤트가 발생할 때마다 동일한 이벤트 핸들러(함수)가 실행된다.
3. on()메서드 등록 방식 3
$('이벤트 대상').on({
'이벤트종류1' : function(){ 코드 },
'이벤트종류2' : function(){ 코드 },
'이벤트종류3' : function(){ 코드 },
})
: 여러 개의 이벤트를 한꺼번에 객체로 등록한다. 단, 이벤트명에 따라 각각의 핸들러(함수)를 가지고 있어
동작마다 다른 이벤트를 발생시킬 수 있다.
//그룹이벤트 등록방식1
$("#btn2").on("mouseover focus", function () {
console.log("웰컴");
});
//그룹이벤트 등록방식2
$("#btn3").on({
"click focus": function () {
console.log("버튼2입니다.");
},
});
//그룹이벤트 등록방식3
$("#btn4").on({
click: function () { console.log("버튼3 클릭 이벤트입니다.");},
focus: function () { console.log("버튼3 포커스 이벤트입니다.");},
});
혹은,
$("button").on({
"mouseover focus": function () {
$("div img").attr("src", "./img/pic_8.jpg");
},
+ 클릭을 한 것도 focus이다. tab키로 이동하는 것도 focus
단독 이벤트 예제 실습 )
<div>
<button type="button" class="btn1">단독 이벤트</button>
</div>
<p>내용입니다.</p>
<br />
<div>
<button type="button" class="btn2">그룹 이벤트</button>
</div>
<p>내용입니다.</p>
// 단독이벤트 & 그룹이벤트
$(".btn1").click(function () {
//.btn1의 부모태그의 아래위치에 있는 동생 p태그 선택
$(".btn1").parent().next().css({ color: "tomato" });
});
버튼을 누르면p가 변해야하니깐 인접관계 선택자로 p태그 선택
그룹 이벤트 예제 실습 )
$(".btn2").on({
//마우스오버 되거나 포커스 되었을 때
"mouseover focus": function () {
$(".btn2").parent().next().css({ color: "tomato" });
},
//마우스아웃 되거나 포커스를 잃었을 때 focus의 반대는 blur
"mouseout blur": function () {
$(".btn2").parent().next().css({ color: "black" });
},
});
탭키로 포커스 상태
! focus의 반대 상태는 blur 다
예제 실습2 )
마우스 오버하면 li의 배경색 적용하기 / 버튼에 마우스 오버하면 이미지 바꾸기
html
<!--
1. 단독이벤트로 ul을 마우스 오버하면 li에 배경색이 적용
-->
<ul id="menu1">
<li>list1</li>
<li>list2</li>
<li>list3</li>
<li>list4</li>
</ul>
<!-- 그룹이벤트를 사용해서 버튼을 마우스오버하거나 포커스 상태가 되면 이미지를 다른 이미지로 바꾸고
마우스아웃되거나 포커스를 잃으면 이미지를 원래대로 바꿔주세요
-->
<div>
<img src="./img/pic_7.jpg" alt="이미지1" width="400" />
<p>내용입니다</p>
</div>
<button type="button">이미지 바꾸기</button>
제이쿼리
<script>
$(function () {
//1
$("ul").mouseover(function () {
$("ul li").css({ backgroundColor: "pink" });
});
//2
$("button").on({
"mouseover focus": function () {
$("div img").attr("src", "./img/pic_8.jpg");
},
"mouseout blur": function () {
$("div img").attr("src", "./img/pic_7.jpg");
},
});
});
</script>
근데 이미지가 바뀌면 alt 속성도 바뀌여야하니깐,
//2
$("button").on({
"mouseover focus": function () {
$("div img").attr({
src: "./img/pic_8.jpg",
alt: "이미지2",
});
},
"mouseout blur": function () {
$("div img").attr({
src: "./img/pic_7.jpg",
alt: "이미지1",
});
},
});
attr에 객체 { }로 넣어서 alt속성도 같이 바꿔주는 게 좋다.
