이벤트 등록 메소드란?
이벤트란 사이트에서 방문자가 취하는 모든 행위를 말하고, 이벤트 핸들러는 이벤트가 발생했을 때 실행되는
코드를 말한다.
이벤트 메소드를 이용하면 방문자가 지정한 요소에서 어떠한 특정 동작이 일어났을 때 저장된 코드를 실행
시킬 수 있다.
이벤트 등록 메소드에는 하나의 이벤트만 등록할 수 있는 단독 이벤트 등록 메소드와 2개 이상의 이벤트를
등록할 수 있는 그룹 이벤트 등록 메소드가 있다.
단독 이벤트 메소드는 한 동작에 대한 이벤트를 등록할 때 사용되는 메소드이다.
예를 들어 '요소를 클릭했을 때', '요소를 더블클릭했을 때', '요소에 마우스 포인터를 올렸을 때'등 하나의
이벤트에만 대응하여 이벤트 핸들러 코드가 실행된다.
이벤트의 기본형은 다음과 같다.
<button id="btn">버튼</button>$("#btn").click(function(){
자바스크립트코드;
});위 예제에서 버튼($("#btn))을 클릭(.click)했을 때 경고창(스크립트코드)을 나타내라 라는 명령이 있을 경우
버튼은 이벤트의 대상이 되고 클릭했을 때는 방문자의 특정 동작을 가리키는데, 이는 이벤트 등록 메소드가 된다.
마지막으로 경고창을 나타내라는 것은 이벤트가 발생했을 때 실행되는 이벤트 핸들러가 된다.
이러한 단독 이벤트 등록 메소드는 로딩 이벤트, 마우스 이벤트, 포커스 이벤트, 키보드 이벤트, 기타 이벤트로
나눌 수 있다.
다음 표는 이벤트 등록 메소드의 종류를 정리한 표이다.
| 구분 | 종류 | 설명 |
| 로딩 이벤트 |
load() | 선택한 이미지 또는 프레임 요소에 연동된 소스의 로딩이 완료된 후 이벤트가 발생 |
| ready() | 지정한 HTML 문서 객체의 로딩이 완료된 후 이벤트가 발생 | |
| error() | 이벤트 대상 요소에서 오류가 발생하면 이벤트가 발생 | |
| 마우스 이벤트 |
click() | 선택한 요소를 클릭했을 때 이벤트가 발생 |
| dblclick() | 선택한 요소를 더블클릭했을 때 이벤트가 발생 | |
| mouseout() | 선택한 요소의 영역에서 마우스 포포인터 벗어났을 때 이벤트가 발생. 이때 하위 요소의 영향을 받는다. | |
| mouseover() | 선택한 요소의 영역에 마우스 포인터를 올렸을 때 이벤트가 발생 | |
| hover() | 선택한 요소에 마우스 포인터를 올렸을 때와 벗어났을 때 각각 이벤트가 발생한다. | |
| mousedown() | 선택한 요소에서 마우스 버튼을 눌렀을 때 이벤트가 발생 | |
| mouseup() | 선택한 요소에서 마우스 버튼을 눌렀다 떼었을 때 이벤트가 발생 | |
| mouseenter() | 선택한 요소 범위에 마우스 포인터를 올렸을 때 이벤트가 발생 | |
| moseleave() | 선택한 요소 범위에서 마우스 포인터가 벗어났을대 이벤트가 발생 | |
| mousemove() | 선택한 요소 범위에서 마우스 포인터를 움직였을 때 이벤트가 발생 | |
| scroll() | 가로, 세로 스크롤바를 움직일 때마다 이벤트가 발생 | |
| 포커스 이벤트 |
focus() | 선택한 요소에 포커스가 생성되었을 때 이벤트를 발생하거나 선택한 요소에 강제로 포커스를 생성 |
| focusin() | 선택한 요소에 포커스가 생성되었을 때 이벤트가 발생 | |
| focusout() | 포커스가 선택한 요소에서 다른 요소로 이동되었을 때 이벤트가 발생 | |
| blur() | 포커스가 선택한 요소에서 다른 요소로 이동되었을 때 이벤트가 발생하거나 선택한 요소의 포커스가 강제로 사라지도록 한다. | |
| change() | 이벤트 대상인 입력 요소의 값이 변경되고, 포커스가 이동하면 이벤트가 발생. 그리고 강제로 change 이벤트를 발생시킬 때도 사용 | |
| 키보드이벤트 | keypress() | 선택한 요소에서 키보드를 눌렀을 때 이벤트가 발생. 문자키를 제외한 키의 코드값을 반환 |
| keydown() | 선택한 요소에서 키보드를 눌렀을 때 이벤트가 발생. 키보드의 모든 키의 코드값을 반환 | |
| keyup() | 선택한 요소에서 키보드에서 손을 떼었을 때 이벤트가 발생. |
이벤트 등록 방식
지정한 요소에 이벤트를 등록하는 방법에는 단독 이벤트 등록 방식과 그룹 이벤트 등록 방식의 두 종류가 있다.
예를 들어 마우스 포인터를 올렸을 때 환영 메시지를 출력하려면 단독 이벤트 등록 메소드나 그룹 이벤트 등록
메소드를 사용하고, 마우스 포인터를 올리거나 클릭했을 때 환영 메시지를 출력하려면 그룹 이벤트 등록 메소드를
사용한다.
즉, 한가지 동작에 대한 이벤트 등록 방식에는 단독 이벤트 등록 메소드나 그룹 이벤트 등록 메소드를 사용하고,
두 가지 이상의 동작에 대한 이벤트 등록 방식에는 그룹 이벤트 등록 메소드를 사용한다.
단독 이벤트 등록 메소드
대상에 한가지 동작에 대한 이벤트만 등록할 수 있다.
다음은 사용하기 위한 기본형이다.
$("이벤트 대상 선택").이벤트 등록 메소드(function(){
자바스크립트코드;
});다음은 사용자가 버튼을 클릭하면 환영 메시지를 경고 창에 나타내는 예제이다.
<button id="btn1">버튼</button>
$(".btn1").click(function(){
alert("welcome");
});
그룹 이벤트 등록 메소드
대상에 한가지 동작 이상의 이벤트를 등록 할 수 있다.
다음은 사용하기 위한 기본형이다. on()메소드를 사용하여 이벤트를 등록한다.
1. on()메소드 등록 방식 1
$("이벤트 대상 선택").on("이벤트 종류1 이벤트종류2...이벤트종류n",
function(){
자바스크립트 코드;
});
2. on()메소드 등록 방식 2
$("이벤트 대상 선택").on({
"이벤트종류1 이벤트종류2 ... 이벤트종류n":function(){
자바스크립트코드
}
});
3. on()메소드 등록 방식 3
$("이벤트 대상 선택").on(){
"이벤트 종류1":function(){자바스크립트 코드;1},
"이벤트 종류2":function(){자바스크립트 코드;2,
...
"이벤트 종류n":function(){자바스크립트 코드;n}
});
다음은 그룹 이벤트 등록에 대한 예제이다.
사용자가 버튼에 마우스 포인터를 올리거나 키보드를 사용하여 버튼에 포커스를 맞추면 환영 메시지가
콘솔 패널에 출력된다.
<button id="btn1">버튼</button>1. on()메소드 등록방식 1
$(".btn1").on("mouseover focus", function(){
console.log("welcome");
})2. on()메소드 등록방식 2
$(".btn1").on({
"mouseover focus":function(){
console.log("welcome");
}
});3. on()메소드 등록방식 3
$(".btn1").on({
"mouseover":function(){
console.log("welcome");
},
"focus":function(){
console.log("welcome");
}
});
다음은 단독 이벤트 등록 메소드(click())와 그룹 이벤트 등록 메소드(on())로 이벤트를 등록하는 예제이다.
<script>
$(function(){
$(".btn1").click(function(){
$(".btn1").parent().next()
.css({"color":"#f00"});
});
//사용자가 [버튼1]을 클릭하면 <p>내용1</p>의 글자를
//빨간색(#f00)으로 변경한다.
$(".btn2").on({
"mouseover focus":function(){
$(".btn2").parent().next()
.css({"color":"#0f0"});
},
//사용자가 [버튼2]에 마우스 포인터를 올리거나
//포커스를 이동하면 <p>내용2</p>의 글자를 초록색(#0f0)으로
//변경한다.
"mouseout blur":function(){
$(".btn2").parent().next()
.css({"color":"#000"});
},
//사용자가 [버튼2]에서 다른 요소로 마우스 포인터를 옮기거나
//포커스를 이동하면 <p>내용2</p>의 글자를 검은색(#000)으로
//변경한다.
});
});
</script>
</head>
<body>
<p>
<button class="btn1">버튼1</button>
</p>
<p>내용1</p>
<p>
<button class="btn2">버튼2</button>
</p>
<p>내용2</p>
</body>강제로 이벤트 발생시키기
'이벤트가 강제로 발생했다'는 말은 '사용자에 의해' 이벤트가 발생했음을 의미하는것이 아니라 '핸들러에 의해'
자동으로 이벤트가 발생했음을 의미한다.
예를 들어 버튼을 클릭할 때마다 변수의 값이 1씩 증가하는 버튼이 있다고 하면, 변수의 값을 증가시키려면
사용자가 직접 버튼을 클릭해야 한다.
하지만 단독 이벤트 등록 메소드를 사용하거나 trigger()메소드를 사용하면 강제로 이벤트를 발생시킬 수 있다.
즉, 사용자가 버튼을 클릭하지 않아도 변수가 증가한다.
다음은 단독 이벤트 등록 메소드와 trigger() 메소드를 사용해 강제로 이벤트를 발생시키는 메소드의 기본형과
예제이다.
1. $("이벤트 대상").단독 이벤트 등록 메소드();
2. $("이벤트 대상").trigger("이벤트 종류");<script>
$(function(){
$(".btn1").click(fuction(){
$(".btn1").parent().next()
.css({"color":"#f00"});
});
//[버튼1]에 click 이벤트가 발생하며
//이벤트 핸들러가 실행된다.
$(".btn2").on({
"mouseover focus":function(){
$(".btn2").parent().next()
.css({"color":"#0f0"});
}
});
//[버튼2]에 마우스 포인터를 올리면
//자동으로 실행되는 이벤트 핸들러
$(".btn1").click();
$(".btn2").trigger("mouseover");
//[버튼2]에 마우스 포인터를 올리면
//이벤트핸들러(function(){자바스크립트코드})
//가 자동으로 실행된다.
});
</script>
</head>
<body>
<p>
<button class="btn1">버튼1</button>
</p>
<p>내용1</p>
<p>
<button class="btn2">버튼2</button>
</p>
<p>내용2</p>
</body>이벤트 제거 메소드
이벤트를 제거하는 메소드로 off()가 있다.
다음은 메소드의 기본형이다
$("이벤트 대상").off("제거할 이벤트 종류");다음은 off()메소드를 이용한 예제이다.
<script>
$(function(){
$(".btn1").click(fuction(){
$(".btn1").parent().next()
.css({"color":"#f00"});
});
$(".btn2").on({
"mouseover focus":function(){
$(".btn2").parent().next()
.css({"color":"#0f0"});
}
});
$(".btn1").off("click");
//[버튼1]에 등록된 클릭 이벤트를 제거
$(".btn2").off("mouseover focus");
//[버튼2]에 등록된 마우스오버, 포커스 이벤트를 제거
});
</script>
</head>
<body>
<p>
<button class="btn1">버튼1</button>
</p>
<p>내용1</p>
<p>
<button class="btn2">버튼2</button>
</p>
<p>내용2</p>
</body>로딩 이벤트 메소드
사용자가 브라우저에서 HTML문서를 요청하여 HTML 문서의 로딩이 완료되면 이벤트 핸들러를 실행한다.
로딩 이벤트 메소드에는 ready()와 load()가 있다.
ready()메소드는 사용자가 사이트를 방문할 때 요청한 HTML 문서 객체(document)의 로딩이 끝나면 이벤트를
발생시킨다. load()메소드는 외부에 연동된 소스(iframe, img, video)의 로딩이 끝나면 이벤트를 발생시킨다.
다음은 ready()와 load() 메소드의 기본형이다.
1. $(document).ready(function(){자바스크립트코드});
2. ${document).on("ready", function(){자바스크립트코드});
3. $(window).load(function() {자바스크립트코드;});
4. $(window).on("load", function(){자바스크립트코드;});다음은 ready(), load() 이벤트 메소드를 사용한 예제이다.
외부에서 불러온 이미지의 로딩이 끝나면 이미지의 높이값을 콘솔 패널에 출력한다.
<script>
$(function(){
$(document).ready(function(){
var h1=$(".img1").height();
console.log("ready:", h1); //ready : 0
});
//HTML에 전체 요소가 로딩되면 이벤트 핸들러가 실행
$(window).load(function(){
var h2=$(".img1").height();
console.log("load:", h2); //load : 300
});
//외부 소스(이미지)가 완전히 로딩되면 이벤트 핸들러가 실행되며
//이미지 높이값(300)이 출력된다.
});
</script>
</head>
<body>
<p>
<img src="http://place-hold.it/300X300" class="img1">
</p>
</body>
마우스 이벤트
사용자가 사이트에서 마우스를 이용해서 취하는 모든 행위를 말한다.
가령 사용자가 지정한 요소에 마우스 포인터를 올리거나 클릭하는 등의 행위를 말한다.
click()/dblclick() 이벤트 메소드
click()메소드는 서낵한 요소를 클릭했을 때 이벤트를 발생시키거나 선택한 요소에 강제로 클릭 이벤트를 발생시킬때
사용한다. click()이벤트 메소드를 등록하는 기본형은 다음과 같다.
1. click이벤트 등록
$("이벤트 대상 선택").click(function(){자바스크립트코드});
$("이벤트 대상 선택").on("click", function(){자바스크립트코드});
2. click 이벤트 강제 발생
$("이벤트 대상 선택").click();
dblclick() 이벤트 메소드는 선택한 요소를 연속해서 두번 클릭했을 때 이벤트를 발생시키거나 선택한 요소에
강제로 더블클릭 이벤트를 발생시킨다.
기본형은 다음과 같다.
1. dblclick 이벤트 등록
$("이벤트 대상 선택").dblclick(function(){자바스크립트코드;});
$("이벤트 대상 선택").on("dblclick", function(){자바스크립트 코드;});
2. dblclick 이벤트 강제 발생
$("이벤트 대상 선택").dblclick();
<a>, <form>태그에 클릭 이벤트 적용시 기본 이벤트 차단하기
<a>요소에 click이나 dblclick을 등록하면 클릭할 때마다 <a>에 링크된 주소로 이동하는 문제가 발생한다.
이 문제를 해결하려면 <a> 요소의 기본 이벤트를 차단해야 한다. <form>요소의 제출버튼(submit)도
action에 등록된 주소로 이동시키는 문제가 발생한다.
우리가 등록한 이벤트를 정상적으로 수행하려면 이러한 기본 이벤트를 차단해야 한다.
다음은 <a>, <form> 태그에 이벤트를 등록하기 위해 기본 이벤트를 차단하는 기본형이다.
1. return false를 이용한 차단 방식
$("a 또는 form").이벤트 메소드(function(){
자바스크립트코드;
return false;
});
2. preventDefault()메소드를 이용한 차단 방식
$("a 또는 form").이벤트 메소드(function(){
e.preventDefault(); //prevent는 막다, default는 기본이벤트를 의미한다.
자바스크립트코드;
});
다음은 <a>와 <button>에 각각 click, dblclick 이벤트를 등록하는 예제이다.
<script>
$(function(){
$(".btn1").on("click", function(e){
e.preventDefault();
//<a>요소에 링크된 페이지로 이동하는 기본 이벤트를 차단
$(".txt1").css({"background-color":"#ff0"});
});
$(".btn2").on("click",function(e){
$(".txt2").css({"background-color":"#0ff"});
});
$(".btn3").on("dblclick", function(){
$(".txt3").css({"background-color":"#0f0"});
});
});
</script>
</head>
<body>
<p>
<a href="http://www.easypub.co.kr/" class="btn1">버튼1</a>
</p>
<p class="txt1">내용1</p>
<p><a href="http://www.easypub.co.kr/" class="btn2">버튼2</a></p>
<p class="txt2">내용2</p>
<p><button class="btn3">버튼3</button></p>
<p class="txt3">내용3</p>
</body>
mouseover() / mouseout() / hover() 이벤트 메소드
mouseover()이벤트 메소드는 선택한 요소에 마우스 포인터를 올릴 때마다 이벤트를 발생시키거나 선택한 요소에
mouseover 이벤트를 강제로 발생시킨다.
mouseout() 이벤트 메소드는 선택한 요소에서 마우스 포인터가 벗어날 때마다 이벤트를 발생시키거나 선택한 요소에
mouseout이벤트를 강제로 발생시킨다.
그리고 hover() 이벤트 메소드는 선택한 요소에 마우스 포인터가 올라갈 때와 선택한 요소에서 벗어날 때 각각
이벤트를 발생시키며, 이때 각각 다른 이벤트 핸들러를 실행 시킨다.
각 이벤트 메소드의 기본형은 다음과 같다.
1. mouseover 이벤트 등록
$("이벤트 대상 선택").mouseover(function(){자바스크립트코드});
$("이벤트 대상 선택").on("mouseover", function(){자바스크립트코드;});
2. mouseover 이벤트 강제 발생
$("이벤트 대상 선택").mouseover();1. mouseout 이벤트 등록
$("이벤트 대상 선택").mouseout(function(){자바스크립트코드});
$("이벤트 대상 선택").on("mouseout", function(){자바스크립트코드;});
2. mouseout 이벤트 강제 발생
$("이벤트 대상 선택").mouseout();hover 이벤트 등록
$("이벤트 대상 선택").hover(
function(){마우스 오버 시 실행될 코드},
function(){마우스 아웃 시 실행될 코드}
);다음은 버튼 요소에 mouseover, mouseout, hover 이벤트 메소드를 적용한 예제이다.
<script>
$(function(){
$(".btn1").on({
"mouseover":function(){
$(".txt1").css({"background-color":"yellow"});
},
//[Mouse Over/Mouse Out] 버튼에 마우스 포인터를 올리면
//class값이 "txt1"인 요소의 배경색을 노란색으로 변경한다.
"mouseout":function(){
$(".txt1".css({"background-color":"none"});
}
//버튼에서 마우스 포인터가 벗어나면 배경의 색을 다시 제거
});
$(".btn2").hover(function(){
$(".txt2").css({"background-color":"aqua"});
}, function(){
$(".txt2").css({"background-color":"none"});
});
});
</script>
</head>
<body>
<p>
<button class="btn1">Mouse Over/Mouse Out</button>
</p>
<p class="txt1">내용1</p>
<p>
<button class="btn2">Hover</button>
</p>
<p class="txt2">내용2</p>
</body>mouseenter() / mouseleave() 이벤트 메소드
mouseenter() 메소드는 대상 요소의 경계 범위에 마우스 포인터가 들어오면 이벤트를 발생 시키고,
mouseleave() 이벤트 메소드는 대상 요소의 경계 범위에서 마우스 포인터가 완전히 벗어나면 이벤트를 발생시킨다.
mouseover와 mouseenter의 차이점을 보면,
mouseover는 대상 요소에 마우스 포인터가 올라가면 발생하는 이벤트이고, mouseenter는 이벤트 대상이 포함된
범위에 마우스 포인터가 들어오면 발생하는 이벤트이다.
mouseover는 한 대상. mouseenter는 구역 혹은 영역이라고 생각하면 된다.
mouseout과 mouseleave도 역시 대상요소인지 범위인지에 따라 다른것이다.
다음은 mouseenter()와 mouseleave() 메소드의 기본형이다.
1. mouseenter 이벤트 등록
$("이벤트 대상 선택").mouseenter(function(){자바스크립트코드;});
$("이벤트 대상 선택").on("mouseenter", function(){자바스크립트코드;});
2. mouseenter 이벤트 강제 발생
$("이벤트 대상 선택").mouseenter();1. mouseleave 이벤트 등록
$("이벤트 대상 선택").mouseleave(function(){자바스크립트코드;});
$("이벤트 대상 선택").on("mouseleave", function(){자바스크립트코드;});
2. mouseleave 이벤트 강제 발생
$("이벤트 대상 선택").mouseleave();다음은 mouseenter와 mouseleave 메소드를 사용한 예제이다.
<script>
$(function(){
$("#box_1").on("mouseout", function(){
$("#box_1").css({"background-color":"yellow"});
});
$("#box_2").on("mouseleave":function(){
$("#box_2").css({"background-color":"pink"});
});
});
</script>
</head>
<body>
<h1>mouseout</h1>
<div id="box_1">
<p><a href="#">내용1</a></p>
<p><a href="#">내용2</a></p>
<p><a href="#">내용3</a></p>
</div>
<h1>mouseleave</h1>
<div id="box_2">
<p><a href="#">내용4</a></p>
<p><a href="#">내용5</a></p>
<p><a href="#">내용6</a></p>
</div>
</body>mousemove() 이벤트 메소드
다음은 mousemove()메소드의 기본형이다.
1. mousemove 이벤트 등록
$("이벤트 대상 선택").mousemove(function(){자바스크립트코드;});
$("이벤트 대상 선택").on("mousemove", function(){자바스크립트코드;});
2. mousemove 이벤트 강제 발생
$("이벤트 대상 선택").mousemove();다음은 mousemove 이벤트가 발생할 때마다 마우스 포인터의 좌표값을 각각 <span>에 출력하는 예제이다.
<script>
$(function(){
$(document).on("mousemove", function(e){
$(".posX").text(e.pageX);
$(".posY").text(e.pageY);
});
});
</script>
</head>
<body>
<h1>mousemove</h1>
<p>X : <span class="posX">0</span>px</p>
<p>Y : <span class="posY">0</span>px</p>
</body>
(참고 : do it 자바스크립트+제이쿼리 입문)
'Front > JQuery' 카테고리의 다른 글
| JQuery(그룹이벤트) (0) | 2020.05.22 |
|---|---|
| JQuery(이벤트 객체) (0) | 2020.05.22 |
| JQuery(객체조작) (0) | 2020.05.20 |
| JQuery(속성 탐색 선택자) (0) | 2020.05.20 |
| JQuery(위치탐색선택자) (0) | 2020.05.20 |
