jQuery 이벤트
이벤트 처리
엘리먼트에서 특정 이벤트 발생시 실행될 콜백함수를 구현하고, 엘리먼트에 부착시키는 처리
다양한 방법들<button onclick="fn()"> function fn() { ... } <button id="btn"> document.getElementById('btn').onclick = function() { ... } <button id="btn"> document.getElementById("btn").addEventListener('click', function() { ... })* jQuery는 브라우져의 종류에 상관없이 일관된 방식으로 이벤트처리가 가능하도록 추상화된 이벤트 처리관련 메소드를 제공한다. * jQuery 집합객체의 이벤트 관련 API - 메소드 $(selector).on('이벤트명', 콜백함수) 선택된 엘리먼트에서 지정한 이벤트가 발생할 때 마다 콜백함수가 실행된다. $(container).on('이벤트명', selector, 콜백함수) container로 지정된 엘리먼트안에 selector로 검색되는 현재 존재하거나 미래에 추가될 엘리먼트에서 지정한 이벤트가 발생할 때마다 콜백함수가 실행된다. * container : 이벤트 처리 대상이 되는 엘리먼트를 후손으로 가지는 엘리먼트를 지정한다. * selector : 이벤트 처리 대상이 되는 엘리먼트 $(selector).one('이벤트명', 콜백함수) 선택된 엘리먼트에서 지정한 이벤트가 발생하면 단 한 번만 콜백함수가 실행된다. $(selector).off('이벤트명') 선택된 엘리먼트에서 지정된 이벤트와 관련된 이벤트처리를 삭제한다. $(selector).trigger('이벤트명') 선택된 엘리먼트에서 지정된 이벤트가 발생되게 한다. * 각 이벤트의 편리메소드를 콜백없이 실행하면 해당 이벤트를 발생시키는 trigger가 된다. * 각각의 이벤트마다 이벤트명으로 된 편리메소드가 있다. * click(cb) 엘리먼트를 클릭했을 때 콜백 실행 dbclick(cb) 엘리먼트를 더블클릭했을 때 콜백 실행 keydown(cb) 엘리먼트(입력필드)에서 키보드를 누를 때 콜백 실행 keypress(cb) 엘리먼트에서 키보드가 완전이 눌러졌을 콜백 실행 * keyup(cb) 엘리먼트에서 키보드가 다시 올라올 때 콜백 실행(입력필드에 값이 표시) mouseenter(cb) 엘리먼트의 경계범위 안으로 마우스 포인트가 진입했을 때 콜백 실행 mouseleave(cb) 엘리먼트의 경계범위 밖으로 마우스 포인트가 빠져나갈 때 콜백 실행 mouseover(cb) 엘리먼트 위에 마우스 포인트가 위치할 때 콜백 실행 mouseout(cb) 엘리먼트 위에서 마우스 포인트가 나갈 때 콜백 실행 mousemove(cb) 엘리먼트 위에서 마우스 포인트를 움직일 때 마다 콜백 실행 focus(cb) 엘리먼트(폼입력요소)가 포커스를 획득했을 때 콜백 실행 blur(cb) 엘리먼트(폼입력요소)가 포커스를 잃을 때 콜백 실행 * change(cb) 엘리먼트(select, radio, checkbox)의 값(선택된/체크된 값)이 변할 때 마다 콜백 실행 * submit(cb) 폼엘리먼트의 입력값들이 서버로 제출될 때 콜백 실행 load(cb) 페이지의 로딩이 완료됐을 때 콜백 실행 ready(cb) Document객체가 준비됐을 때 콜백 실행 resize(cb) 브라우저의 윈도사이즈가 변할 때 마다 콜백 실행 * scroll(cb) 스크롤바가 움직일 때 마다 콜백 실행 * hover(cb1, cb2) mouseenter와 mouseleave를 한 번에 처리하는 메소드 cb1은 mouseenter, cb2는 mouseleave일 때 콜백 실행
.one('이벤트명', 콜백함수)
- 선택된 엘리먼트에서 지정한 이벤트가 발생하면 단 한 번만 콜백함수가 실행된다.
.off('이벤트명')
- 선택된 엘리먼트에서 지정된 이벤트와 관련된 이벤트 처리를 삭제한다.
.trigger('이벤트명')
- 선택된 엘리먼트에서 지정된 이벤트가 발생되게 한다.
$((function) {...})의 ready와 load
- 파싱 : 해석하는 작업
- ready : Document객체가 준비 완료되면 실행되도록 한다.(load 전에 무언가를 실행할 수 있게 되었다.)
- load : 화면출력이 완료되면 실행된다.
sample8-event.jsp
<script type="text/javascript">
// on버튼은 버튼1에 이벤트 핸들러를 등록시킨다.
$('#btn-on').click(function() {
// .one() 메소드는 선택된 엘리먼트에서 지정된 이벤트가 발생했을 때 실행할 이벤트 핸들러를 등록시킨다.
$('#btn-1').on('click', function() {
alert("버튼1이 클릭되었습니다.");
})
})
// one버튼은 버튼2에 딱 한번만 실행할 이벤트 핸들러를 등록시킨다.
$('#btn-one').click(function() {
// .one() 메소드는 선택된 엘리먼트에서 지정된 이벤트가 발생했을 때 딱 한번만 실행할 이벤트 핸들러를 등록시킨다.
$('#btn-2').one('click', function() {
alert("버튼2이 클릭되었습니다.");
})
})
// off버튼은 버튼1에 등록된 이벤트 핸들러를 삭제시킨다.
$('#btn-off').click(function() {
// .off() 메소드는 선택된 엘리먼트에서 지정된 이벤트명으로 등록한 이벤트 핸들러를 삭제시킨다.
$('#btn-1').off('click');
})
// trigger버튼은 버튼1에서 이벤트를 강제발생시킨다.
$('#btn-trigger').click(function() {
// .trigger() 메소드는 선택된 엘리먼트에서 지정된 이벤트를 강제로 발생시킨다.
$('#btn-1').trigger('click');
})
</script>on / one / off / trigger
- on : "버튼1"을 몇 번 눌러도 실행된다. (on버튼을 N번 눌렀을 때는 N번 실행된다.)
- one : "버튼2"를 눌렀을 때 딱 한 번 실행된다.
- off : "버튼1"을 눌러도 실행되지 않는다.
- trigger : "버튼1"을 직접 누르지 않아도 강제 실행된다.
기본동작 실행되지 않게 하기 (prevent Default / 반환값)
sample9-event.jsp
<script type="text/javascript">
// Document객체가 준비되면 자동으로 실행되는 콜백함수를 등록한다.
// 콜백함수에서는 이벤트처리가 필요한 엘리먼트를 검색해서 각각의 엘리먼트에 이벤트핸들러 함수를 등록하는 작업을 수행한다.
// 콜백함수에서는 서버와 HTTP 통신을 수행해서 초기 데이터를 획득해서 화면에 표시하는 작업을 수행한다.(AJAX 작업)
$(function() {
/*
기본동작이 지정된 엘리먼트에서 이벤트 발생시 실행되는 기본동작이 일어나지 않게 하기
1. event.preventDefalut() 메소드 사용
$("#link-1").click(function(event) {
event.preventDefault(); // 이벤트에 대한 엘리먼트의 기본동작이 일어나지 않게 한다.
// 수행문;
})
2. 이벤트 핸들러에서 true/false값 반환
$("#link-1").click(function(event) {
// 수행문;
// 수행문;
return flase; // 이벤트에 대한 엘리먼트의 기본동작이 일어나지 않게 한다.
})
// 폼에서 입력값 유효성을 체크해서 폼 입력값을 서버로 제출할 지, 제출하지 않을 지 제어할 수 있다.
$("#form-login").submit(function(event){
// 입력값 유효성 체크
if (입력값이 유효하지 않다면) {
return false; // 폼 입력값이 서버로 제출되지 않는다.
}
if (입력값이 유효하지 않다면) {
return false; // 폼 입력값이 서버로 제출되지 않는다.
}
return true; // 폼 입력값이 서버로 제출된다.
})
*/
// 링크1에서 클릭이벤트가 발생했을 때 실행할 이벤트 핸들러 함수를 등록한다. (이벤트 핸들러 함수는 event라는 객체를 전달받을 수 있다.)
$("#link-1").click(function(event){
event.preventDefault(); // 기본동작의 실행을 방해할 수 있다.
// this는 이벤트가 발생할 엘리먼트 객체다.
// $(this)는 엘리먼트객체가 포함된 jQuery 객체를 반환한다.
// .attr("속성명")은 선택된 엘리먼트에서 지정된 속성명에 대한 속성값을 반환한다. (this=<a href="http://www.daum.net" id="link-1" >링크1</a>)
var linkAddress = $(this).attr("href");
// .text(컨텐츠)는 선택된 엘리먼트의 텍스트 컨텐츠 값을 변경한다.
$("#message-box").text(linkAddress);
//return false; // 기본동작의 실행을 방해할 수 있다. & 이벤트 버블링이 안되게 한다.
// return true; // 요청의 기본동작을 실행한다.
});
// 링크2에서 클릭이벤트가 발생했을 때 실행할 이벤트 핸들러 함수를 등록한다.
$("#link-2").click(function(event){
//event.preventDefault();
var linkAddress = $(this).attr("href");
$("#message-box").text(linkAddress);
return false;
});
// 폼에서 submit이벤트가 발생했을 때 실행할 이벤트 핸들러 함수를 등록한다.
$("#form-login").submit(function(event){
//event.preventDefault();
// .val()은 입력요소의 값을 반환한다.
var idValue = $(":input[name=id]").val();
if (idValue === "") {
alert("아이디는 필수입력값입니다.");
return false;
}
var passwordValue = $(":input[name=password]").val();
if (passwordValue === "") {
alert("비밀번호는 필수입력값입니다.");
return false;
}
return true;
})
});
</script>링크 1, 링크2 버튼을 눌렀을 때
아이디나 비밀번호를 입력하지 않고 로그인 버튼을 눌렀을 때
hover
sample10-event.jsp
<script type="text/javascript">
/*
$("#dept-list-group .list-group-item").mouseenter(function() {
// this는 이벤트가 발생한 엘리먼트 객체다.
// $(this)는 이벤트가 발생한 그 엘리먼트를 포함하는 jQuery객체를 반환한다. jQuery객체 = 이벤트가 발생한 엘리먼트 + jQuery 메소드
$(this).addClass("active");
})
$("#dept-list-group .list-group-item").mouseleave(function() {
// this는 이벤트가 발생한 엘리먼트 객체다.
// $(this)는 이벤트가 발생한 그 엘리먼트를 포함하는 jQuery객체를 반환한다. jQuery객체 = 이벤트가 발생한 엘리먼트 + jQuery 메소드
$(this).removeClass("active");
})
*/
// .hover(handler1, handler2)
// handler1은 mouseenter 이벤트 발생시 실행할 이벤트핸들러함수
// handler2는 mouseleave 이벤트 발생시 실행할 이벤트핸들러함수
$("#dept-list-group .list-group-item").hover(function() {
// this는 마우스가 진입한 엘리먼트다. <li class="list-group-item" data-dept-target="dept-100">인사부</li>
// $(this).addClass('active')는 마우스가 진입한 엘리먼트에 active 클래스를 추가한다. <li class="list-group-item active" data-dept-target="dept-100">인사부</li>
$(this).addClass('active');
// 마우스가 진입한 엘리먼트에서 data-dept-target 속성값을 조회한다. deptDivId는 "#dept-100"
var deptDivId = $(this).attr("data-dept-target");
// 표시할 사원목록을 포함하는 div만 화면에 표시한다.
$("#dept-tables > div").hide();
$(deptDivId).show();
}, function() {
$(this).removeClass('active');
$("#dept-tables > div").hide();
})
// 인사부 사원목록만 표시되게 한다.
//$("#dept-tables > div:not(:first-child)").hide();
// 사원목록이 표시되지 않게 한다.
$("#dept-tables > div").hide();
// list-group-item 중에서 첫번째 엘리먼트에서 mouseenter 이벤트를 강제발생시킨다.
$("#dept-list-group .list-group-item:first").trigger("mouseenter");
</script>실행 결과 (초기 화면)
실행 결과 (사원 목록 이외의 화면에 마우스를 가져다 놓았을 때)
- click, trigger는 실행시키는 메소드가 아니라 등록하는 메소드다.
- 그래서 지정하지 않았을 때는 딱 한 번 실행된다.
버튼 추가히기
sample11-event.jsp
<script type="text/javascript">
$('#btn-add').click(function(){
var htmlContent = ' <button class="btn btn-outline-primary btn-sm">버튼</button>';
// .append(html컨텐츠)는 선택된 엘리먼트 안에 html 컨텐츠를 추가한다.
$("#button-box").append(htmlContent);
});
/*
<div id="button-box"></div> 엘리먼트 안에 현재 존재하거나, 미래에 추가될 버튼에서 클릭이벤트가 발생했을 때 실행할 이벤트 핸들러 등록하기
// <div id="button-box"></div>엘리먼트 안에 현재 존재하는 버튼에만 이벤트 핸들러가 등록된다.
$('#button-box button').click(function() {
alert("버튼이 클릭되었습니다.");
})
// #button-box 엘리먼트 안에 현재 존재하거나 미래에 추가되는 button 엘리먼트에서 click 이벤트가 발생했을 때 실행할 이벤트 핸들러 등록하기
// #button-box가 아닌 그 안에 존재하거나 추가되는 엘리먼트에서 실행할 이벤트 핸들러를 등록하는 것이다!
$("#button-box").on("clikc", 'button', function(){
})
*/
// <div id="button-box"></div>엘리먼트 안에 현재 존재하거나 미래에 추가되는 버튼에 이벤트 핸들러가 등록된다.
$("#button-box").on('click', 'button', function(){
alert("버튼이 클릭되었습니다.");
})
</script>"버튼 추가하기" 버튼을 클릭했을 경우
추가된 "버튼" 버튼을 클릭했을 경우
-
미래에 생기는 것에는 이벤트를 추가할 수 없다.
(그래서 추가된 "버튼"을 클릭해도 "버튼이 클릭되었습니다."라는 알람이 뜨지 않는다.) -
미래에 생기는 것에는 이벤트를 추가하기 위해서는 부모가 무조건 있어야한다.
(그래서 $("#button-box").on('click', 'button', function(){
alert("버튼이 클릭되었습니다.");
}) 를 추가하였다. )
HTML DOM 조작
HTML DOM 조작
sample12-dom.jsp
<script type="text/javascript">
// 텍스트 읽어오기
$("button:eq(0)").click(function(){
// .text() : 엘리먼트의 텍스트 컨텐츠를 조회한다. 태그 사이의 텍스트를 읽어오는 것이다.
var textContent = $("#el-1").text();
alert(textContent);
});
// 텍스트 변경하기
$("button:eq(1)").click(function(){
// .text(textContet) : 엘리먼트의 컨텐츠를 지정된 텍스트 컨텐츠로 변경한다. 태그 사이의 텍스트를 변경하는 것이다.
$("#el-2").text("텍스트 컨텐츠 변경했다.");
});
// html 조회하기
$("button:eq(2)").click(function(){
// .html() : 엘리먼트의 html 컨텐츠를 조회한다. 태그 사이의 html 컨텐츠를 읽어오는 것이다.
var htmlContent = $("#el-3").html();
alert(htmlContent);
});
// html 변경하기
$("button:eq(3)").click(function(){
// .html(htmlContent) : 엘리먼트의 컨텐츠를 지정된 HTML 컨텐츠로 변경한다. 태그 사이의 html 컨텐츠를 변경하는 것이다.
$("#el-4").html('<strong class="text-danger">32,000원</strong>');
// html 대신 text로 적었을 경우 : <strong class=$quot;text-danger"&get;32,000원
// html로 읽어오고 html로 변경해야 한다.
});
// 폼 입력값 조회
$("button:eq(4)").click(function(){
// .val() : 폼 입력요소의 값을 조회한다.
var value = $("#el-5").val();
alert(value);
});
// 폼 입력값 변경
$("button:eq(5)").click(function(){
// .val(value) : 폼 입력요소의 값을 지정된 값으로 변경한다.
$("#el-6").val("hong@gmail.com");
});
// 속성값 조회
$("button:eq(6)").click(function(){
// .attr(name) : 엘리먼트에서 지정된 속성명으로 설정된 값을 조회한다.
var value = $("#el-7").attr("src");
alert(value);
});
// 속성값 변경
$("button:eq(7)").click(function(){
// .attr(name, value) : 엘리먼트에 지정된 속성명과 속성값을 추가한다. 해당 속성이 이미 존재하면 그 값을 변경한다.
$("#el-8").attr("src", "resources/images/image-8.jpg");
});
// 폼입력요소, 버튼 활성화
$("button:eq(9)").click(function(){
// .prop("disabled", false) : 폼입력요소, 버튼을 활성화시킨다.
$("#el-9").prop("disabled", false);
});
// 폼입력요소, 버튼 비활성화
$("button:eq(8)").click(function(){
// .prop("disabled", true) : 폼입력요소, 버튼을 비활성화시킨다.
$("#el-9").prop("disabled", true);
});
// 체크박스, 라디오버튼 활성화
$("button:eq(10)").click(function(){
// .prop("checked", true) : 체크박스, 라디오버튼을 활성화시킨다.
$("#el-10").prop("checked", true);
});
// 체크박스, 라디오버튼 비활성화
$("button:eq(11)").click(function(){
// .prop("checked", false) : 체크박스, 라디오버튼을 비활성화시킨다.
$("#el-10").prop("checked", false);
});
</script>- 체크박스나 라디오버튼은 .attr이 아닌 .pop을 통해 조작할 수 있다.
sample13-dom.jsp
<script type="text/javascript">
$(function() {
/*
$("#book-amount").change(function() {
// 가격, 현재수량
var price = $("#book-price").text().replace(",", ""); // <strong>35,000</strong> 태그사이의 컨텐츠 조회
var amount = $("#book-amount").val(); // <input type="number" value="1"> 입력요소의 값 조회
// 구매가격 계산
var orderPrice = price*amount;
// new Number(숫자).toLocaleString() : 숫자를 3자리마다 ","가 포함된 텍스트로 반환한다.
var currencyOrderPrice = new Number(orderPrice).toLocaleString();
// 구매가격을 태그의 컨텐츠로 변경
$("#book-order-price").text(currencyOrderPrice); // <strong>35,000</strong> 태그 사이의 컨텐츠 변경
})
*/
$("#book-amount").on('change keyup', function() { // 이벤트를 2개를 등록할 때(미래의 것까지 이벤트를 등록할 때)는 .on을 사용하는 것이 좋다.
// 가격, 현재수량
var price = $("#book-price").text().replace(",", ""); // <strong>35,000</strong> 태그사이의 컨텐츠 조회
var amount = $("#book-amount").val(); // <input type="number" value="1"> 입력요소의 값 조회
// 구매가격 계산
var orderPrice = price*amount;
// new Number(숫자).toLocaleString() : 숫자를 3자리마다 ","가 포함된 텍스트로 반환한다.
var currencyOrderPrice = new Number(orderPrice).toLocaleString();
// 구매가격을 태그의 컨텐츠로 변경
$("#book-order-price").text(currencyOrderPrice); // <strong>35,000</strong> 태그 사이의 컨텐츠 변경
})
})
</script>
한 걸음 한 걸음 나아가는 개발자