웹어플리케이션

웹어플리케이션_Chapter05_JQuery3 : 이벤트&애니메이션

강용민 2022. 10. 4. 16:21

이벤트 : 마우스, 키보드, 포커스, 내용의 변화가 발생했을 때 변화한 대상

애니메이션 : 숨기기와 보이기, 애니메이션 생성, 예약 함수

 

0.이벤트

이벤트 바인딩

JQuery는 이벤트 바인딩을 위한 다양한 방법을 제공한다.

다음 예제는 id가 'button'인 요소에 클릭이벤트 핸들러를 바인딩하는 다양한 방법이다.

$('#button').click(function(e){ 
	//수행할 기능	
});

$('#button').on('click',function(e){
	//수행할 기능
});

document.querySelector('#button').addEventListener('click',function(e){
	//수행할 기능
});

 

이벤트 제거와 강제 실행

.off() 메소드는 더 이상 사용하지 않는 이벤트와의 바인딩을 제거한다.

.trigger() 메소드는 원하는 이벤트를 강제 실행한다.

<body>
    <button id="btn1">버튼 1</button>
    <button id="btn2">버튼 2></button>
    
    <script>
    	$(document).ready(function(){
        	$('#btn1').click(function(){
            	console.log("버튼 1 클릭");
            });
            $('#btn2').click(function(){
            	console.log("버튼 2 클릭");
                $('#btn1').trigger('click');
                $('#btn2').off('click');
            });
        });
    </script>
<body>

 

1. 마우스 이벤트

이벤트 타입 설명
다운 mousedown 마우스를 누르고 있을 시 발생
업 mouseup mousedown에서 뗐을 시 발생
클릭 click mousedown + mouseup  : 마우스를 클릭했을 시 발생
더블클릭 dbclick 두번 클릭 시 발생
오버 mouseover 대상 객체에 마우스 집입 시 발생
하위 요소의 영향을 받는다.(아래 그림 참조)
아웃 mouseout 대상 객체에 마우스 진출 시 발생
하위 요소의 영향을 받는다.(아래 그림 참조)
호버 hover mouseover + mouseout
각각의 function을 만들 수 있다.
.on('hover')정의 불가능

.hover(
    function() { 오버 시 실행},
    function() { 아웃 시 실행}
)
엔터 mouseenter 대상 객체의 범위에 마우스 집입 시 발생
하위 요소의 영향을 받지 않는다.(아래 그림 참조)
리브 mouseleave 대상 객체의 범위에 마우스 진출 시 발생
하위 요소의 영향을 받지 않는다.(아래 그림 참조)
무브 mousemove 마우스가 움직일 시 발생
스크롤 scroll 마우스 휠 동작 시 발생
휠 mousewheel 마우스 휠 동작 시 발생
.mousewheel() 정의 불가능
.on('mousewheel',function(e){})만 가능

 

오버/아웃과 엔터/리브의 차이

이벤트 방지

//<a>,<button> 등의 객체의 기본 동작 이벤트를 방지
e.preventDefault()

//자식의 이벤트는 기본적으로 부모에게도 전달된다.
//이를 막고 자식 자체만 이벤트를 실행하는 방법
e.stopPropagation()

 

마우스 위치 알아보기

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <script src="https://code.jquery.com/jquery-3.6.1.min.js" integrity="sha256-o88AwQnZB+VDvE9tvIXrMQaPlFFSUTR+nldQm1LuPXQ=" crossorigin="anonymous"></script>
    <title>Document</title>
</head>
<body>
    <div id="box" style="position: absolute; background-color: red; color: white"></div>
</body>

<script>
    $(document).ready(function(){
        $(document).mousemove(function(e){
            let x = e.pageX;
            let y = e.pageY;
            let result = x + "," +y;

            $('#box').text(result);
            $('#box').css('left',x+'px');
            $('#box').css('top',y+'px');
        });
    });
</script>
</html>

 

2. 키보드 이벤트

키보드 이벤트

이벤트 타입 설명
키다운 keydown 키보드 키를 눌렀을 시 발생
키업 keyup keydown상태에서 키를 뗐을 시 발생
키프레스 keypress 마우스의 click과 동일(다운 + 업)

 

키보드 매개변수

매개변수 설명
e.keyCode 키보드의 아스키코드값을 반환
e.key 키보드의 입력 문자열을 반환
e.altKey 알트키가 눌렸으면 true
e.ctrlKey 컨트롤키가 눌렸으면 true
e.shiftKey 쉬프트키가 눌렸으면 true

 

3. 포커스 이벤트

포커스 이벤트

이벤트 표기법 설명
포커스 $('input').focus( function(){ }) 객체에 커서가 이동할 때
.on('focus')정의 가능
블러 $('input').blur( function() { }) 커서가 다른 곳으로 이동할 때
.on('blur')정의 가능
포커스 인 $('form').focusin( function() { }) 객체의 자손에 커서가 이동할 때
.on('focusin')
포커스 아웃 $('form').focusout( function() {}) 객체의 자손에서 다른 곳으로 이동할 때
.on('focusout')정의 가능
포커스 체인지 $('input').change( function() { }) 선택이 바뀔 때 사용
.on('change')정의 가능

 

4.애니메이션

효과메서드

매게변수

$('div').[method]( t, easing, function() {})
  • t : 시간(ms)
  • easing : 가속(옵션) swing : 서서히 가감속, linear : 일정한 감속
메서드 표기법 설명
보이기 $('div').show()  
숨기기 $('div').hide()  
서서히 보이기 $('div').fadeIn()  
서서히 숨기기 $('div').fadeOut()  
밀면서 보이기 $('div').slideDown() 반대 방향을 원한다면 css에서 position : absolute로 위치 고정
밀면서 숨기기 $('div').slideUp()  
토글 $('div').toggle();
$('div').fadeToggle();
$('div').slideToggle();		  

 

애니메이션 메서드

 

딜레이

$('div').delay(t)

 

5. 예약 함수

메서드 표기법 설명
setTimeout setTimeout(function() { } ,delay) 일정 시간 뒤에 일어날 함수
setInterval setInterval(function() {}, delay) 자연 후 반복
clearTimeout clearTimeout(function() {}, delay) 예약 함수의 해제

 

문제.

이벤트 바인딩은 어떻게 하나?

$('요소').event(function() { })

$('요소').on('event',function(){ })

document.querySelector('요소').addEventListener('event',function(){ })

 

이벤트 제거를 하려면 어떤 메소드를 사용해야하는가?

$('요소').off('event')

 

이벤트 강제실행을 하려면 어떤 메소드를 사용해야하는가?

$('요소').trigger('event')

 

마우스 이벤트

이벤트 표기법 설명
다운 $('요소').on('mousedown',function(){ })
$('요소').mousedown(function() {})		  
업 $('요소').on('mouseup',function() { })
$('요소').mouseup(function() { })		  
클릭 $('요소').on('click',function() {})
$('요소').click(function() {})		  
더블클릭 $('요소').on('dblclick',function() {})
$('요소').dblclick(function() {})		  
오버 $('요소').on('mouseover',function() { })
$('요소').mouseover(function() { })		 하위 요소에 영향을 받음
아웃 $('요소').on('mouseout',function() { })
$('요소').mouseout(function() { })		 하위 요소에 영향을 받음
호버 $('요소').hover(function() {오버},function() {아웃}) 하위 요소에 영향을 받음
$('요소').on('hover',function() {}) 정의 불가능
$('요소').hover() 불가능
엔터 $('요소').on('mouseenter
$('요소').mouseenter(function() { })		 하위 요소에 영향 안받음
리브 $('요소').on('mouseleave',fucntion() { })
$('요소').mouseleave(function() { })		 하위 요소에 영향 안받음
무브 $('요소').on('mousemove',function(e) { })
$('요소').mouseover(function(e) { })		  
스크롤 $('요소').on('scroll',function() { })
$('요소').scroll(function() {})		  
휠 $('요소').on('mousewheel', function(e) { }) $('요소').mousewheel(function(e) { }) 정의 불가능

 

마우스 이벤트에서 기본 이벤트방지를 위해서는 어떤 메소드를 사용해야 하는가?

e.preventDefault()

 

마우스 이벤트에서 이벤트 전달 방지를 위해서 어떤 메소드를 사용하는가?

e.stopPropagation()

 

키보드 이벤트

이벤트 표기법 설명
눌렀을때 $('요소').on('keydown',function() {})
$('요소').keydown(function() { })		  
뗏을 때 $('요소').on('keyup',function() { })
$('요소').keyup(function() { })		  
클릭했을 때 $('요소').on('keypress',function() { })
$('요소').keypress( function() { })		  

 

키보드 매개변수

매개변수 설명
e.keyCode 키보드의 아스키코드값을 반환
e.key 키보드의 입력 문자열을 반환
e.altKey 알트키가 눌렸으면 true
e.ctrlKey 컨트롤키가 눌렸으면 true
e.shiftKey 쉬프트키가 눌렸으면 true

 

에니메이션

이벤트 표기법 설명
보이기 $('요소').show(100, swing, function() {})  
숨기기 $('요소').hide(100, linear, function() { })  
서서히 보이기 $('요소').fadeIn(200)  
서서히 숨기기 $('요소').fadeOut(200)  
밀면서 보이기 $('요소').slideDown() 반대 방향으로 펼침을 원하면 position: absolute로 위치 고정
밀면서 숨기기 $('요소').slideUp()  
토글 $('요소").toggle()
$('요소').fadeToggle()
$('요소').slideToggle()		  
에니메이트 $('요소').animate({ },t,easing,function() { }) css속성이 들어간다.
딜레이 $('div').delay(t)  

 

예약 함수

이벤트 표기법 설명
일정 시간 뒤에 일어남 setTimeout(function() { }, delay)  
일전 간격으로 실행 setInterval(function() { }, delay)  
예약 함수 해제 clearTimeout(예약함수)  

'웹어플리케이션' 카테고리의 다른 글

웹어플리케이션_Chapter06_날씨 어플리케이션 제작  (0) 2022.10.11
웹어플이케이션_Chapter04_JQuery 2  (0) 2022.09.28
웹어플리케이션_Chapter01_개요  (0) 2022.09.06

'웹어플리케이션'의 다른글

  • 현재글웹어플리케이션_Chapter05_JQuery3 : 이벤트&애니메이션

관련글

댓글

티스토리툴바