addEventListener( ) & removeEventListener( )
addEventListener()는 EventTarget의 주어진 이벤트 유형에 EventListener를 구현한 함수 또는 객체를 이벤트 처리기 목록에 추가해 작동한다.
"click" >> 반응할 이벤트 유형을 나타내는 대소문자 구분 문자열
removeEventListener() 메서드는 이전에 EventTarget.addEventListener()로 EventTarget에 등록했던 이벤트 리스너를 제거한다.
addEventListener(1,2,3)
1.이벤트 명 : 이벤트 리스너를등록할 이벤트 타입을 문자열로 전달한다.
2.실행할 이벤트 리스너 : 지정된 이벤트가 발생했을때 실행할 이벤트리스너 전달.
3.이벤트 전파 방식 : false면 버블링(bubbling) 방식, true면 캡처링(capturing) 방식으로 이벤트 전파
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Event => addEventListener,removeEventListener</title>
<script>
var color1;
var color2;
var btnExample;
window.onload = function () {
color1 = document.getElementById("green");
color2 = document.getElementById("red");
btnExample = document.getElementById("btnExample");
color1.addEventListener("mouseover", changecolor);
color2.addEventListener("mouseover", changecolor2);
btnExample.addEventListener("click", btnExampleClickHandler);
}
function changecolor() {
s1.style.color = 'green';
}
function changecolor2() {
s1.style.color = 'red';
}
function btnExampleClickHandler() {
alert("메세지입니다. 저는 다시는 보이지 않습니다.");
btnExample.removeEventListener("click", btnExampleClickHandler);
}
</script>
</head>
<body>
<h1 id="s1">change color change color</h1><br>
마우스만 올려도 색깔이 바뀌는 버튼 : <br>
위 id = 's1'의 색깔이 바뀝니다. <br>
<button id="green">green</button>
<button id="red">red</button><br>
<button id="btnExample">한번만 메세지 띄우는 버튼</button>
</body>
</html>change color change color
마우스만 올려도 색깔이 바뀌는 버튼 :
위 id = 's1'의 색깔이 바뀝니다.
Image Loading
[이미지가 출력되는 과정]
1. 이미지 파일로부터 로딩하는 과정
2. 로딩된 이미지가 출력되는 과정
이미지 출력과정은 위의 두가지로 나뉜다. 하지만 어떤 경우든 이미지가 로딩이 완료된 후에야 이미지를 사용 할 수 있다.
<img> 태그와 Image 객체
Image 객체는 <img> 태그에 의해 생성된 DOM 객체로서, 자바스크립트 코드로 이미지를 다룰 수 있게 한다.
Image 객체의 프로퍼티
| scr | 이미지 주소 |
| width | 이미지가 출력될 폭, 이미지가 로딩되면 이미지의 실제 폭으로 초기화 |
| height | 이미지가 출력될 높이, 이미지가 로딩되면 이미지의 실제 높이로 초기화 |
| complete | 이미지의 로딩이 완료되었는지 여부, true / false |
이미지 로딩 완료와 onload
<img id="myImg" src="apple.png" width="..." heoght="...">
1. var myImg = document.getElementById("myImg");
//myImg는 Image 객체 (<Img> 태그를 찾아 Image 객체를 알아낸다)
2.myImg.src = "banana.png"
//<img> 태그에 banana.png 이미지 출력
//(Image 객체의 src 프로퍼티에 banana.png 파일명 지정)
3.var width = myImg.width;
//width는 banana.png 이미지의 폭
//(banana.png 이미지의 폭을 알아내는 한 줄 코드)
이미지 객체 생성
: 캔버스에 이미지를 그리기 위해서는 이미지를 담을 이미지 객체가 필요하다.
var img = new Image();
img.onload = function(){ // 이미지 로딩 완료되면 ㅎ마수코드 실행
// 이곳에 img 객체에 로드된 이미지를 그리는 코드 작성 }
img.src = "test.png"; //img 객체에 test.png 파일로 부터 이미지 로딩 시작이미지 로딩이 완료돠어야 이미지를 그릴수 있으므로, 이미지 로딩을 지시하기 전 img.onload리스너에
이미지가 로딩되었을 때 이미지를 그리는 자바스크립트 코드를 등록해둔다.
이미지 그리기
이미지 로딩이 완료되면 컨텍스트 객체의 drawImage() 메소드를 이용하여 이미지를 그린다.
drawImage()는 다음 몇가지 유형이 있다.
1.원본 크기로 그리기
: 원본 이미지 크기 그대로 그리는 drawImage()는 다음과 같다.
drawImage(img,dx,dy)
img : 이미지 객체 / dx,dy : 이미지가 그려질 캔버스 좌표
img 객체에 든 비트맵 이미지를 원본크기로 캔버스의 (dx,dy)위치에 그린다.
2.크기 조절하여 그리기
: 원본 이미지의 크기를 조절하여 그리는 drawImage()는 다음과 같다.
drawImage(img,dx,dy,dWidth,dHeight)
dWidth, dHeight : 이미지가 그려지는 크기
img 객채의 비트맴 이미지를 캔버스의 (dx,dy)위치에 dWidth * dHeight 크기로 변형하여 그린다.
3.원본의 일부분을 크기 조절하여 그리기
: 원본 이미지의 일부분을 택하고 크기를 조절하여 그리는 drawImage()는 다음과 같다.
drawImage(img,sx,sy,sWidth,sHeight,dx,dy,dWidth,dHeight)
:sx,sy : img이미지 내 비트맵 좌표 (sx,sy)
sWidth,sHeight : 그리기 위해 선택한 img 내의 비트맵 크기, sWidth * sHeightimg 이미지 내부의 (sx,sy) 위치에서 sWidth*sHeight 영역의 비트맵을
캔버스의 (dx,dy)위치에 dWidth*dHeight 크기로 변형하여 그린다.
크기조절해서 이미지 출력
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>이미지 그리기</title>
</head>
<body>
<h3>(20,20) 위치에 100x200 크기로 그리기</h3>
<hr>
<canvas id="myCanvas" style="background-color: #44dd4433;" width="300" height="250"></canvas>
<script>
var canvas = document.getElementById("myCanvas");
var context = canvas.getContext("2d");
var img = new Image();
img.onload = function(){
context.drawImage(img,20,20,100,200);
}
img.src="../images/elsa.png";
</script>
</body>
</html>
캔버스에 꽉차게 이미지 출력
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>캔버스에 꽉차게 그리기</title>
</head>
<body>
<h3>캔버스에 꽉차게 그리기</h3>
<hr>
<canvas id="myCanvas" style="background-color: aliceblue;" width="500" height="300"></canvas>
<script>
var canvas = document.getElementById("myCanvas");
var context = canvas.getContext("2d");
var img = new Image();
img.onload = function () {
context.drawImage(img, 0, 0, canvas.width, canvas.height);
}
img.src = "../images/elsa.png";
</script>
</body>
</html>
마우스 이벤트 처리
마우스가 눌러질때 , function down(e) 실행
: 마우스가 눌러지면 down(e) 함수가 실행되며, 이벤트 객체 e의 e.offsetX 와 e.offsetY를 통해 캔버스 내 마우스가 눌러진 위치를 알 수 있다.
마우스가 눌러진 위치에서 드래깅 하는 동안 그림을 그리기 때문에 마우스가 눌러진 위치를 전역변수 startX 와 startY에 저장한다.
startX = e.offsetX ; // 마우스가 눌러진 x 위치 저장
startY = e.offsetY ; // 마우스가 눌러진 y 위치 저장그리고 이제 드래깅을 통해 그림이 그려질 상태를 뜻하는 dragging 변수를 true로 설정한다.
: dragging = true;
마우스가 놓여질때 , function up(e) 실행
: dragging = false;
마우스가 움직일 때 , function move(e) 실행
: 마우스가 움직이는 동안 mousmove 이벤트가 계속 발생하여 move(e) 함수가 계속 호출 된다.
move(e) 함수는 다음 코드를 이용하여 마우스가 눌러져 있지 않으며 ㄴ그냥 리턴한다.
if(!dragging) return;
dragging이 true라면 curX와 curY에 현재 마우스 위치값 e.offsetX와 e.offsetY를 저장한다.
curX = e.offsetX ;
curY = e.offsetY ;그리고나서 (startX, startY)에서 (curX,curY) 사이의 선을 그리도록 draw(curX, curY)를 호출한다.
draw(curX,curY) : 드래깅하는 동안 계속 변하는 마우스 커서의 현재 위치이다.
startX와 startY를 현재 마우스 위치로 변경하고 함수를 빠져나온다.
startX = curX;
startY = curY ;
마우스가 캔버스를 벗어날때, function out(e) 실행
마우스가 캔버스를 벗어나면 그림그리기를 중단시킨다.
이를 위해 out(e) 함수에서는 다음과 같이 dragging 변수 값을 false로 설정한다.
dragging = false;
그림그리기 , draw(curX,curY)
캔버스는 점 단위로 그래픽을 수행하는 기능은 없고 기본단위가 선이다.
그러므로 한 픽셀의 점도 선으로 표현해야 한다.
이 Test에서 그림을 그리는 함수는 draw()이다. 이함수를 호출하기 전에
선의 시작점은 전역변수인 startX, startY에 저장하고, 끝점 curX,curY를 매개변수로 하여 draw(curX,curY)를 호출하면 된다.
다음은 (startX,startY)에서 (curX,curY)까지 선을 그리는 draw() 함수 코드이다.
| context.beginPath(); | 새로운 경로 시작 |
| context.moveTo(startX,startY); | 새로운 시작점 추가 |
| context.lineTo(curX,curY) | 경로에 (startX,startY)에서 (curX,curY) 사이의 선 추가 |
| context.stroke(); | 경로에 모두 그리기 |
✔마우스로 그림그리기
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>마우스 드래깅으로 캔버스에 그림 그리기</title>
</head>
<body onload="init()">
<h3>마우스를 누른 채 드래깅하여 그림 그려 보세요.</h3>
<hr>
<canvas id="myCanvas" style="background-color: #dd993333"
width="400" height="300"></canvas>
<script>
var canvas, context;
function init(){
canvas = document.getElementById("myCanvas");
context = canvas.getContext("2d");
context.lineWidth = 2; // 선 굻기를 2로 설정
context.strokeStyle = "blue";
// 마우스 리스너 등록. e는 MouseEvent 객체
canvas.addEventListener("mousemove", function(e) {move(e)}, false); // false : 버블방식
canvas.addEventListener("mousedown", function(e) {down(e)}, false);
canvas.addEventListener("mouseup", function(e) {up(e)}, false);
canvas.addEventListener("mouseout", function(e) {out(e)}, false);
}
var startX = 0; startY = 0; // 마우스의 마지막 포인터 좌표
var drawing = false; // false 그림그려지지 않음 false : 마우스가 눌리지 않음 true : 마우스 눌렸을때
function draw(curX, curY){
context.beginPath();
context.moveTo(startX, startY);
context.lineTo(curX, curY);
context.stroke();
}
function down(e){ // 클릭하는 순간
startX = e.offsetX; startY = e.offsetY;
drawing = true; // 마우스가 눌리면 true로 바꿔서 그림을 그리기 시작함
}
function up(e){ // 클릭을 놓았을때
drawing = false; // 드로잉 종료
}
function move(e){
if(!drawing) return; // 마우스가 눌러지지 않았으면 리턴
var curX = e.offsetX, curY = e.offsetY; // 움직일때의 좌표값을 curX,curY에 담아서
draw(curX, curY); // 담은 값으로 draw함수 호출
startX = curX; startY = curY; // 그림그리고 현재 위치를 start로 바꿈 (점을 연결연결 하는 방식으로 그림그려짐)
}
function out(e){
drawing = false;
}
</script>
</body>
</html>마우스를 누른 채 드래깅하여 그림 그려 보세요.
마우스가 움직일때 그림이 그려짐
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>mousemove로 자유롭게 그리기</title>
<script>
//전역 변수
var canvas, context;
function init() {
canvas = document.getElementById("myCanvas");
context = canvas.getContext("2d");
context.lineWidth = document.getElementById("widthInput").value;
context.strokeStyle = document.getElementById("colorInput").value;
canvas.addEventListener("mousemove", move, false);
canvas.addEventListener("mouseenter", over, false);
canvas.addEventListener("mouseleave", function(e){out(e)}, false);
}
var prevX=0, prevY=0; //마우스의 마지막 포인터 좌표
var inbound=false;
function move(e) { //e는 MouseEvent 객체
var curX=e.offsetX;
var curY=e.offsetY;
if(!inbound) {
prevX=curX;
prevY=curY;
inboud=true;
}
context.beginPath();
context.moveTo(prevX, prevY);
context.lineTo(curX, curY);
context.stroke();
prevX=curX;
prevY=curY;
}
function over(e) {
inbound=true;
prevX=e.offsetX;
prevY=e.offsetY;
}
function out(e) {
inbound=false;
}
</script>
</head>
<body onload="init()">
<h3>mousemove로 자유롭게 그리세요.</h3>
<hr size="5" color="green">
선 굵기 : <input type="number" id="widthInput" value="5" min="0" max="20" step="3" onchange="context.lineWidth=this.value">
선 색 : <input type="color" id="colorInput" value="#00ff00" onchange="context.strokeStyle=this.value"> <!--onchange~ 색을 변경할 수 있는 코드-->
<br><br>
<canvas id="myCanvas" style="background-color:aliceblue" width="600" height="450"></canvas>
</body>
</html>
drag and drop API
드래그 앤 드롭 API는 웹 페이지 내의 요소를 사용자가 자유롭게 드래그 할 수 있도록 설정해 준다.
HTML5 이전에 이와 같은 기능을 구현하기 위해서는 엄청나게 많고 복잡한 스크립트를 작성해야 했다.
하지만 HTML 5에서는 드래그 앤 드롭 기능이 표준 권고안에 포함되어 간단하게 사용 할 수 있게 되었다.
현재 주요 웹 브라우저들은 모두 이 기능을 지원하며, 따라서 웹 페이지 내의 모든 요소는 드래그 될 수 있다.
DataTransfer 객체
드래그앤 드롭 이벤트를 위한 모든 이벤트 리스너메소드(event listener method)는 DataTransfer 객체를 반환한다.
이렇게 반환된 DataTransfer 객체는 드래그 앤 드롭 동작에 관한 정보를 가지고 있게 된다.
draggable 속성
: 웹 페이지 내의 모든 요소는 draggable 속성을 사용하여 드래그될 수 있는 객체(draggable object)로 변환 될 수 있다.
ondragstart 속성
: 드래그 될 수 있는 객체로 만든 후에는 ondragstart 속성을 통해 DataTransfer 객체의 setData() 메소드를 호출한다.
setData() 메소드는 드래그 되는 대상 객체의 데이터(Data)와 타입을 설정한다.
ondragover 속성
: ondragover 속성은 드래그 되는 대상 객체가 어느 요소 위에 놓일 수 있는지를 설정한다.
기본적으로 HTML 요소는 다른 요소의 위에 위치 할 수 없다.
따라서 다른 요소 위에 위치 할 수 있도록 만들기 위해서는 놓일 장소에 있는 요소의 기본 동작을 막아야만 한다.
이 작업을 event.preventDefault() 메소드를 호출하는 것 만으로 간단히 설정 할 수 있다.
ondrop 속성
: 드래그하던 객체를 놓으면 drop 이벤트가 발생한다.
ondrop 속성을 이용하여 drop 이벤트에 대한 동작을 설정 할 수 있다.
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>드러그엔 드롭</title>
<style>
#shopping_cart {
width: 610px;
height: 100px;
padding: 10px;
border: 1px dotted red;
}
img {
width: 100px;
height: 100px;
}
</style>
<script>
function allowDrop(ev) {
ev.preventDefault();
//기본적으로 요소나 데이터는 다른요소에 drop 될수 없음
//드롭이 가능하도록 요소의 기본적인 속성을 차단함
}
function drag(ev) {
ev.dataTransfer.setData("text", ev.target.id);
//ev.target.id : 내가 드래그한 이미지의 id 인데 이것을 text타입으로 변환해서 가져오겠다
}
function drop(ev) {
ev.preventDefault();
var data = ev.dataTransfer.getData("text");
//내가 가져온 id를 텍스트 타입으로 data 라는 변수에 담음
ev.target.appendChild(document.getElementById(data));
//ev.target : 내가 드롭한 영역(div)를 의미
// 내가 드롭한 영역의 자식으로서 내가가지고온id의 img를 넣겠다
}
</script>
</head>
<body>
<p>원하는 상품을 카트에 담으세요</p>
<div id="shopping_cart" ondrop="drop(event)" ondragover="allowDrop(event)"></div><br>
<img id="img1" src="../images/back1.jpg" draggable="true" ondragstart="drag(event)">
<img id="img2" src="../images/back2.jpg" draggable="true" ondragstart="drag(event)">
<img id="img3" src="../images/back3.jpg" draggable="true" ondragstart="drag(event)">
<img id="img4" src="../images/back4.jpg" draggable="true" ondragstart="drag(event)">
<img id="img5" src="../images/back5.jpg" draggable="true" ondragstart="drag(event)">
<img id="img6" src="../images/back6.jpg" draggable="true" ondragstart="drag(event)">
<div id="shopping_cart" ondrop="drop(event)" ondragover="allowDrop(event)"></div><br>
</body>
</html>
'KH > JavaScript' 카테고리의 다른 글
| [실습] 테이블과 연동하여 로그인 페이지 및 관리자 페이지 구현 (0) | 2022.10.27 |
|---|---|
| JS_Storage , geolocation (1) | 2022.09.29 |
| CSS_ 선형 그래디언트 (0) | 2022.09.28 |
| HTML5 와 Canvas (0) | 2022.09.28 |
| JS_JSON / location (0) | 2022.09.28 |