모든 리벤트 리스너는 이벤트 객체가 있다
기존 자바스크립트의 이벤트 객체는 웹 브라우저마다 사용 방법과 이벤트 객체의 속성도 달랐다
하지만 jQuery가 스스로 이벤트 객체를 정형화하므로 jQuery의 이벤트 객체는 모든 웹 브라우저에서 같은 방법으로 사용할 수 있으며, 같은 속성을 갖는다
<body>
<canvas id="canvas" width="700" height="400" style="border: 3px solid #000"></canvas>
</body>
HTML5부터 지원하는 canvas 태그
jQuery가 canvas 태그를 정식으로 지원하지 않는다
그래서 id 속성을 부여하고 getElementById( )를 사용한다
$(function () {
var canvas = document.getElementById('canvas');
var context = canvas.getContext('2d');
$(canvas).on({
mousedown: function (event) {
var position = $(this).offset();
var x = event.pageX - position.left;
var y = event.pageY - position.top;
context.beginPath();
context.moveTo(x, y);
},
mouseup: function (event) {
var position = $(this).offset();
var x = event.pageX - position.left;
var y = event.pageY - position.top;
context.lineTo(x, y);
context.stroke();
}
})
});
canvas 객체에서 context를 추출하고 이벤트를 연결
마우스 커서의 상대 위치를 구하는 방법
var position = $(this).offset();
var x = event.pageX - position.left;
var y = event.pageY - position.top;
'Frontend > jQuery' 카테고리의 다른 글
| JS jQuery (part. 26) - 기본 이벤트와 이벤트 전달 (0) | 2020.08.10 |
|---|---|
| JS jQuery (part. 25) - 이벤트 강제 발생 (0) | 2020.08.10 |
| JS jQuery (part. 23) - 매개변수 context (0) | 2020.08.10 |
| JS jQuery (part. 22) - 이벤트 연결 제거 (0) | 2020.08.07 |
| JS jQuery (part. 21) - 간단한 이벤트 연결 (0) | 2020.08.07 |
