jQuery - 이벤트 下

모든 이벤트 리스너는 이벤트 객체가 존재한다. 물론 자바스크립트에서의 이벤트 객체와 jQuery에서의 이벤트 객체는 완전히 같지는 않다. 아래는 jQuery에서 자주 사용하는 이벤트 객체의 속성이다.

이벤트 객체 속성	설명
event.pageX	브라우저 화면을 기준으로 한 마우스의 X좌표 위치
event.pageY	브라우저 화면을 기준으로 한 마우스의 Y좌표 위치
event.preventDefault()	기본 이벤트를 제거한다.
even.stopPropagation()	이벤트 전달(버블링, 캡처링)을 제거한다.

event.preventDefault()와 event.stopPropagation()은 이전에 살펴본 내용으로, event.preventDefault()는 <a> 태그 같이 기본적으로 이벤트를 가진 태그의 기본 이벤트를 제거하는 효과를 가지고 있고, event.stopPropagation()은 이벤트 객체의 버블링과 캡처링이 일어나는 이벤트 전달 효과를 제거하는 속성이다.

<!DOCTYPE html>
<html>
<head>
<title>Document</title>
<style>
#canvas {
border: 3px solid black;
}
</style>
<script src="jquery-3.4.1.js"></script>
<script>
$(document).ready(function(){
let canvas = document.getElementById('canvas');
let context = canvas.getContext('2d');

$(canvas).on({
mousedown: function(e){
let position = $(this).offset();
let x = e.pageX - position.left;
let y = e.pageY - position.top;

context.beginPath();
context.moveTo(x, y);
},
mouseup: function(e){
let position = $(this).offset();
let x = e.pageX - position.left;
let y = e.pageY - position.top;

context.lineTo(x, y);
context.stroke();
}
});
});
</script>
</head>
<body>
<canvas id="canvas" width='700' height="400"></canvas>
</body>
</html>

canvas 태그는 jQuery가 정식으로 지원하지 않는다, 따라서 위의 코드처럼 getElementById() 메서드를 이용해야 한다. canvas와 연관된 드로잉 context는 2d와 webgl 등이 있는데 2d는 2차원 렌더링 context를 나타내는 객체를 생성하게 한다. webgl은 3차원 랜더링에 관련된 context인데 여기서는 사용하지 않는다.

또한 context 객체의 beginPath(), moveTo(), lineTo()와 stroke() 메서드를 사용하면 canvas 객체에 선을 그릴 수 있게된다.

jQuery 줄긋기 낙서장.html

0.00MB

이벤트를 강제로 발생 시키는 방법으로는 아래의 메서드를 사용한다.

메서드 이름	설명
trigger()	이벤트를 강제로 발생시킨다.

trigger() 메서드는 두 가지 형태로 사용할 수 있다. 두 번째 형태의 매개변수 data는 배열을 넣어야 한다.

1. $(selector).trigger(eventName)
2. $(selector).trigger(eventName, data)

trigger()를 사용하지 않아도 강제 실행하는 방법은 존재한다.

<!DOCTYPE html>
<html>
<head>
<title>Document</title>
<script src="jquery-3.4.1.js"></script>
<script>
$(document).ready(function(){
$('h1').click(function(){
$(this).html(function(index, html){
return html + '★';
});
})

setInterval(function(){
$('h1').last().click();
}, 1000)
});
</script>
</head>
<body>
<h1>Start : </h1>
<h1>Start : </h1>
</body>
</html>

위와 같이 trigger()를 사용하지 않아도 이벤트를 연결하고 강제로 실행을 할 수 있으나, 간단한 이벤트 연결 방식을 사용할 수 없는 경우도 존재하기 때문에 trigger() 메서드를 알아두어야 한다.

setInterval(function(){
$('h1').last().trigger('click');
}, 1000);
});
</script>
</head>
<body>
<h1>Start : </h1>
<h1>Start : </h1>
</body>
</html>

trigger() 메서드의 두 번째 형태를 사용하면 추가 기능을 수행할 수 있는데, 아래와 같다.

$('h1').eq(1).trigger('click',[273, 52]);
});
</script>
</head>
<body>

</body>
</html>

trigger() 메서드의 두 번째 매개변수에 배열을 입력하면 데이터가 자동으로 이벤트 리스너에 순서대로 추가 전송이 되는 기능이 있다.

on() 메서드의 매개변수에는 넣을 수 있는 매개변수가 꽤 존재한다. on() 메서드는 selector 매개변수로 이벤트 범위를 한정시킬 수 있다.

<!DOCTYPE html>
<html>
<head>
<title>Document</title>
<script src="jquery-3.4.1.js"></script>
<script>
$(document).ready(function(){
$('h1').on('click', function(){
let length = $('h1').length;
let targetHTML = $(this).html();
$('#wrap').append('<h1>'+length+' - '+targetHTML+'</h1>');
});
});
</script>
</head>
<body>
<div id="wrap">
<h1>HEADER</h1>
</div>
</body>
</html>

주의 할 점은 on() 메서드는 현재 존재하는 태그에만 이벤트를 연결하기 때문에 상위 태그에 이벤트를 연결하고 <h1> 태그를 클릭했을 때를 찾아내야 한다는 점이다. 만약에 상위 개념이 애매한 태그라면 아래와 같이 document 객체에 이벤트를 연결하면 된다.

연결된 이벤트는 off() 메서드를 이용해서 삭제할 수 있다.

jQuery 이벤트 下.html

0.00MB

'프로그래밍 공부 > jQuery' 카테고리의 다른 글

jQuery - 캔버스 애니메이션을 위한 틀 (0)	2019.12.30
jQuery - 효과 (0)	2019.12.30
jQuery - 이벤트 上 (0)	2019.12.27
jQuery - 문서 객체 조작 (0)	2019.12.24
jQuery - jQuery 자바스크립트 라이브러리 (0)	2019.12.23

jQuery - 이벤트 下

'프로그래밍 공부 > jQuery' 카테고리의 다른 글

'프로그래밍 공부/jQuery' Related Articles

티스토리툴바