4일차
이벤트 등록 메서드의 개요
이벤트란 사이트에서 방문자가 마우스를 움직이거나, 요소를 클릭하거나, 텍스트 박스에 글을 쓰는 등
방문자가 취하는 모든행위를 말한다.
이벤트를 처리하기 위해서는 이벤트 핸들러(event handler)라는 함수를 작성하여 연결해야 한다.
이벤트는 종류가 아주 많지만 수업시간에 알려주것들 위주로 정리하고자 한다.
bind
bind는 쫌 옛날방식이고 요즘은 on을 더 많이쓰는 추세다.
이벤트등록메서드를 사용하기 위해선 여러방식이있다.
형식1) window.on이벤트종류명=호출할 함수명 or function(){}
형식2) window.addEventListener(이벤트종류명,실행할 함수명)
하지만 제이퀘리에서 간단하고 편하게 사용할수있는데 이때 사용하는것이 bind 이다.
$(이벤트발생 대상자 선택자).bind(등록할 이벤트 종류명,함수명or익명함수)
대부분 익명함수를 사용하긴한다.
예시) a링크를 클릭할때 이미지태그에 src와 경로를 부여한다할때
<body>
<ul><!-- 링크걸기(기본기능) -->
<li><a href="../picCats/Persian.jpg">Persian</a></li>
<li><a href="../picCats/RussianBlue.jpg">RussianBlue</a></li>
<li><a href="../picCats/BritishShorthairs.jpg">BritishShorthairs</a></li>
</ul>
<img>
<!-- <img src="../picCats/Persian.jpg"> --> 여기에 사진이 뜨게끔하고자하면
</body>
--익명함수를 사용할경우--
<script>
$('a').bind('click',function(){ //대부분 익명함수사용
//여기서 $(this)를 사용 => each내부의 같은 태그를 구분할때,이벤트를 발생시킨 태그를 구분
var href=$(this).attr('href'); //$(선택자).attr(속성명,속성값)
return false;
</script>
---------------------------
--이벤트종류명을 사용할경우--
<script>
$('a').bind('click',function(event){//매개변수로 event를 등록
var href=$(this).attr('href'); //$(선택자).attr(속성명,속성값)
$('img').attr('src',href);
event.preventDefault();
</script>
=> 이걸 더 간단하게 줄이면
<script>
$('a').bind('click',function(event){
$('img').attr('src',$(this).attr('href'));//위에 두문장을 이렇게 하나로 합칠수있다
event.preventDefault();
</script>
('p').bind('click',function(){ // bind는 쫌 옛날 방식('p').on('click',function(){
('p').click(function(){ //(선택자).이벤트종류명(function)(){} => 이렇게 이밴트종류명이 밖으로 나오거나 on을 쓰기도한다.
toggleClass
addClass<->removeClass 이 둘을 번갈아가면서 호출
형식)$(선택자).toggleClass(적용시킬 클래스명)
클릭하면 색을 적용하고 다시클릭하면 다시 색이 지워지도록 허고싶은 경우
<style>
p {margin:4px;font-size:16px;font-weight:border; cursor:pointer}
.blue {color:blue}
</style>
<script>
$(function(){
$('p').click(function(){
$(this).toggleClass('blue');
})
})
</script>
</head>
<body>
<p class="blue">엘리먼트에 적용된 클래스를</p>
<p>추가하고 제거하기를 반복연습합니다.</p>
</body>on 또는 bind를 사용하는 이유
이벤트 연결방식 2가지
1. on또는 bind를 사용하는 경우 -> 현재 발생시킬 이벤트 종류뿐만아니라 앞으로다른 이벤트도 연결이 가능(=그룹) (여러개 연결)
2.bind를 사용 X -> 단독으로 발생시킨 이벤트만 처리
<script>
bind 또는 on을 사용하면 이렇게 한번에 여러개 적용가능
$('img').on({//<->unbind=>이벤트 연결을 해제시켜주는 함수
mouseout:function(){//마우스를 때면 다시 원래사진으로
$('img').attr('src','../picCats/Persian.jpg');
},
mouseover:function(){//마우스를 갖다대면 사진을 다른사진으로 바꿈
$('img').attr('src','../picCats/RussianBlue.jpg');
},
click:function(){//클릭했을때 alert창 띄우기
alert('bind함수를 이용한 연결테스트입니다.')
}
})
-----------------------------------------------
안쓰면 이렇게 따로 쓴다
$('img').mouseover(function(){})
$('img').mouseout(function(){})
$('img').click(function(){})
$('img').on('click,function(){}')->bind 대신에
</script>remove
remove와 empty의 차이
결론부터 말하자면 remove와 empty의 차이는
remove=내용+구조까지 싹다 삭제
empty=내용만 삭제
<script>
$(function(){//=> on또는bind를 안쓰고 하는방법
$('#button1').click(function(){
$('#div1').remove();
//전체삭제 -> 오라클로 치면 drop table 삭제시킬 테이블명(구조까지 싹다 삭제)
})
$('#button2').click(function(){
$('#div1').empty(); //empty는 내용만 지움
//중첩의 경우(특정태그의 자식태그를 포함한다면) 자식태그들을 삭제
})
$('#button3').click(function(){
$('.test').empty();//특정태그의 내용만삭제 -> delete from 테이블명 => div first만 지움
})
})
</script>
</head>
<body>
<div id="div1" style="height:100px;width:300px;
border:1px solid black;background-color:yellow">
<p class="test" style="height:50px;width:50px;
border:1px solid black;background-color:yellow">
div first</p>
<p>div second</p>
</div><br>
<button id="button1">Remove div</button>
<button id="button2">Empty div</button>
<button id="button3">Empty p</button>
</body>
event객체->이벤트를 발생시킨 객체에 대한 정보를 가지고있는 객체
ex)클릭한 객체의 좌표값,마우스버튼 누른경우 등
<script>
$(function(){
$('img').bind('dblclick',function(event){//<->unbind()
//var target=$(this) //이벤트를 발생시킨 대상자
var target=$(event.target);//위에 $(this)를 쓴거와 같다
target.width(target.width()*2);//setter로 불러오기 /x축이 늘어나면 y축도 비례해서 같이 늘어난다.
이벤트를 해제할꺼면
//형식1)$(이벤트발생대상자 선택자).unbind('해제시킬 이벤트종류명')
//형식2)$(이벤트발생대상자 선택자).unbind()->모든 이벤트연결 해제
target.unbind();
//target.unbind('dblclick') /이벤트 종료 => 딱 한번만 실행시키고 종료된다.
여기서는 어짜피 하나라서 둘중 뭘써도 같다.
=> 여기서는 굳이 종료(target.unbind()) 안하고 한번만 실행시키는
$('img').one('dblclick',function(event){
로 대신 사용가능
//한번만 실행시키는 것으로 bind 하고 unbind한거랑 같다
-----------------------------
})
마우스 커서위치에 좌표값 찍어주기
//on()<->off()
$(document).on('mouseover',function(e){
$('.posX').text(e.pageX);//e.pageX->x좌표값
$('.posY').text(e.pageY);//e.pageY->y좌표값
})
})
</script>
</head>
<body>
<img src="../picCats/Persian.jpg">
<p>x:<span class="posX">0</span></p>
<p>y:<span class="posY">0</span></p>
</body>
</html>hover
마우스 포인터를 올렸을 때, 그리고 마우스 포인터가 그 요소를 벗어났을 때 어떤 효과를 넣는 이벤트
mouseover와 mouseout함수를 번갈아 가면서 호출해주는 함수
형식)$('선택자').hover(1.mouseover , 2.mouseout)
<style>
.reverse {background:black;color:white}
</style>
이 스타일을 hover를 이용해 사용한다면?
<script>
$(function(){
$('h1').hover(function(){
$(this).addClass('reverse');
},function(){
$(this).removeClass('reverse');
})
})
</script>
이렇게 적용하면 마우스를 갖다대면 적용,때면 해제하게된다.keyUp , keyDown , keyPress
사용자가 글자를 입력했을때 발생하는 이벤트->keyUp
보통 글자를 누른경우->KeyDown
단순히 특정글자를 누른경우->keyPress(F1~F12,Alt.Ctrl,Shift)
input창에 글씨를 입력하면 동시에 밑에 div박스 안에서도 입력되게할거면?
<script>
$(function(){
$('input').keyup(function(){
var value=$(this).val();//써진글자
report(value);
=> // $('#console').text(value) ->함수없이 바로 작성하는 경우 / 이렇게 해도됨
})
//사용자정의 함수->div태그에 입력받은값을 추가시켜주는 함수
위에 함수안에 넣어도되지만 이렇게 따로 만들어도 됨
function report(msg){
$('#console').text(msg)//<->var test=$('#console').text()
}
})
</script>
change
셀렉터를 정하여 해당 셀렉터의 값이 변할경우 변화를 캐치하는 이벤트
바로 예시를 보자면 셀렉터에서 고른값에따라 각각 다른 이미지를 출력시키고싶다면?
<script>
$(function(){
$('#sel').change(function(event){
var imgSrc=$(event.target).val();//위에 매개변수event를 안주면 그냥 this로 대체가능
$('#img').attr('src',imgSrc);
=>위에꺼를 이렇게 한줄로 통합가능
$('#img').attr('src',$(event.target).val()); // 이렇게 한줄로도 가능
})
})
</script>
</head>
<body>
<form name="frm">
<table>
<tr>
<td>
<select id="sel">
<option value="../picCats/ragdoll.jpg">Ragdoll</option>
<option value="../picCats/MaineCoon.jpg">MaineCoon</option>
<option value="../picCats/Persian.jpg">Persian</option>
</select>
</td>
<td><img id="img"></td>
</tr>
</table>
</form>
</body>wrap
선택한 요소를 원하는 태그로 감싼다
형식)$('자식선택자').wrap('부무태그 내용')
=> wrap 부모가 자식을 둘러싼다
예시)
<script>
$('#message').wrap('<h2>요소안에 자료를 넣기</h2>');
</script>
<script>
$( 'p' ).wrap( '<div></div>' )
</script>onfocus, onblur
onfocus: 커서가 들어가는 경우에 발생되는 이벤트종류
input 안에 자동으로 커서가 드러가게 하기위해서는?
<script>
$('input').focus(function(){
$(this).addClass('focused');
}) //커서가 들어갈때 이벤트 발생
</script>
onblur: 현재 input에서 커서가 벗어났을때 발생하는 이벤트종류
<script>
$('input').blur(function(){
$(this).removeClass('focused');
}) //커서가 벗어났을때 이벤트 발생
</script>
submit
전송버튼의 기본적인 기능->데이터를 전송(action="aa.jsp")
폼태그 안에 있는 내용들을 전송시키면 ul부모태그 안에 자식태그로 넣기
<script>
$('#frm').submit(function(e){
var new_line=$('<li>'+$('#data').val()+'</li>');
$('#disp').append(new_line);
//new_line.appendTo($('#disp')) 이렇게 반대로 써도 됨
//추가: input 안에 글자를 지우고 커서가 자동으로 들어가며 이벤트 종료 즉 전송 금지시키기
$('#data').val(''); //지우기 (input안에 글자)
$('#data').focus();//커서 넣기
e.preventDefault(); //이벤트 종요 전송금지를 시키기위해 사용해줘야함
//return false; 이렇게써도 됨
</script>
input예제
간단한 회원가입 예제
간단한 회원가입 폼을 jquery를 사용하여 만들고자한다.
-스크립트는 input.js를 만들어 따로 작성-
input.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<script type="text/javascript" src="http://code.jquery.com/jquery-3.3.1.min.js"></script>
<title>jQuery예제(10.input.html)</title>
<style>
#userid, #age,#pwd1,#pwd2 {width:200px}
.msg {color:red;padding-left:2px}
</style>
<script type="text/javascript" src="input.js?ver=1"></script>
</head>
<body>
<h2>***간단한 회원 가입폼***</h2>
<form id="signup" method="post">
id입력:<input type="text" name="userid" id="userid">
<span class="msg" id="id_error">id값은 필수정보</span><br>
<!-- 나이 -->
나이입력:<input type="text" name="age" id="age">
<span class="msg" id="age_error1">나이는 필수정보</span><br>
<span class="msg" id="age_error2">나이는 숫자로 입력</span><br>
<!-- 비밀번호 -->
비번입력:<input type="password" name="pwd1" id="pwd1">
<span class="msg" id="p_error1">비번은 필수정보</span><br>
<!-- 비밀번호 재입력 -->
비번재입력:<input type="password" name="pwd2" id="pwd2">
<span class="msg" id="p_error2">비번이 불일치</span><br>
<input type="button" id="btnSend" value="전송">
</form>
</body>
</html>
input.js
/**
* 기능: 회원가입 처리용 jQuery
작성자:홍길동
작성날짜:2022.08.03
*/
$(function(){
//에러메세지는 처음에는 안보이게 설정(show()<->hide())
$('#id_error').hide();
$('#age_error1').hide();
$('#age_error2').hide();
$('#p_error1').hide();
$('#p_error2').hide();
//<input type="button" id="btnSend" value="전송">
$('#btnSend').click(function(){
//입력을 했다는 코드
//1.id입력체크
var id=$('#userid').val();
if(id.length < 1){
$('#id_error').show();
return false;
}else{//한글자라도 입력했다면
$('#id_error').hide();
}
// 2.age입력체크
var age=$('#age').val();
if(age.length < 1){
$('#age_error1').show();
return false;
}else{//한글자라도 입력했다면
$('#age_error1').hide();
}
//3.숫자인지 체크 ->2a or aw,23a ,,,,
// 0(48)~9(57)범위를 벗어나면 무조건 문자=>String->charAt(번호) // 아스키코드값
//isNaN함수를 이용하는 방법도있다
for(var i=0;i<age.length;i++){
//charCodeAt(0)=>아스크코드로 변환하는 함수
var data=age.charAt(i).charCodeAt(0);
//alert(data);
if(data < 48 || data > 57){//문자입력한 경우
$('#age_error2').show();
return false;
break;//더이상 진행할 필요 X
}else{//숫자입력
$('#age_error2').hide();
}
}//for
//4.pwd입력
var pwd1=$('#pwd1').val();
if(pwd1.length < 1){
$('#p_error1').show();
//$('#pwd1').next().show();// 이렇게해도 같다
return false;
}else{//한글자라도 입력했다면
$('#p_error1').hide();
}
//5.pwd불일치 체크
var pwd2=$('#pwd2').val();
if(pwd2.length < 1){
$('#p_error2').show();
return false;
}else{//한글자라도 입력했다면
$('#p_error2').hide();
}
//불일치
if(pwd1!=pwd2){
$('#p_error2').show();
}
//다입력했다면 document.form객체명.submit()->action='register.jsp'
$('#signup').attr('action','register.jsp').submit();
return true;//전송이 가능하게 설정
})
})주말에 시간많을때 엑셀로 이벤트 정리해서 만들어서 첨부
2022-08-02
