[js]주요 이벤트(drag and drop)

이벤트	설명
onfocus	gotfocus 포커스를 받고 있는 상태
onblur	lostfocus 포커스를 받지 않고 있는 상태
✨onchange	최종적으로 값에 변화가 발생하되게되면.
onclick	click될 때
ondblclick	double click 클릭과 동시 사용 금지
ondrag	드래그하는 도중
ondrop	드래그한것이 드랍될때
onkeydown	키보드를 누르고 있는 동안
onkeyup	키보드를 누르고 있다가 손을 땔때, keyrelease
onkeypress	키보드를 한번 누르면, ex)space, enter, esc
onmousedown	마우스버튼을 누르고 있는 동안
onmouseup	마우스버튼을 누르고 있다가 손을 땔때, keyrelease
onmousemove	마우스버튼을 누른 상태로 움직이는 동안
onmousewheel	마우스휠이 움직이는 동안
onmouseenter	마우스 커서가 특정영역(div) 안으로 진입하는 순간
onmouseleave	마우스 커서가 특정영역(div) 밖으로 나가는  순간
onmouseover	마우스 커서가 특정영역(div) 안으로 존재할때
onmouseout	마우스 커서가 특정영역(div) 밖에 있을때
onscroll	스크롤 되는 동안
onselect	셀렉트 되있는 동안ex)radio버튼 체크
onsubmit	form tag 에 submit event 가 발생할때

 

---

 

예시1(onclick)

 

See the Pen Untitled by 유레이나 (@zdixexqp-the-reactor) on CodePen.

 

1. window.onload

window.onload = function() {
    // 코드 내용
}

페이지가 완전히 로드되었을 때 실행되는 함수를 정의한다. 이 안에서 DOM 요소를 안전하게 접근할 수 있다. 페이지가 로드되기 전에 스크립트가 실행되면 DOM 요소를 찾지 못할 수 있기 때문에, onload 이벤트를 사용하여 페이지가 모두 준비된 후에 코드를 실행한다.

2. DOM 요소 선택

const btnAddEl = document.getElementById('btnAdd');
const btnSubEl = document.getElementById('btnSub');
const btnMulEl = document.getElementById('btnMul');
const btnDivEl = document.getElementById('btnDiv');
const v1El = document.getElementById('v1');
const v2El = document.querySelector('#v2');
const div1El = document.getElementById('div1');

getElementById와 querySelector를 사용하여 HTML 요소를 선택한다. 각각의 버튼과 입력 필드, 결과를 표시할 div를 선택한다.( querySelector는  jquery에서도 querySelector가 쓰임. css와 같이 id를 호출할때 #을 붙이며 디브가 여러개일 겅우 첫번째 디브를 선택하게된다.)
querySelector('#v2')는 ID가 v2인 요소를 선택하는 방법으로, CSS 선택자와 유사한 방식으로 요소를 선택할 수 있다.

3. 버튼 클릭 이벤트 핸들러

btnAddEl.onclick = function() {
    let v1 = parseInt(v1El.value);
    let v2 = parseInt(v2El.value);
    let v = v1 + v2;
    div1El.innerHTML = v;
    alert(v);
}

btnAddEl 버튼이 클릭될 때 실행되는 함수를 정의한다.
parseInt를 사용하여 입력된 값을 정수로 변환하고 두 값을 더한 결과를 div1El에 표시하고, 알림창으로 결과를 출력한다.

parseInt참고:[java] String 함수 총정리

[java] String 함수 총정리

 

btnSubEl.addEventListener('click', function() {
    let v1 = parseInt(v1El.value);
    let v2 = parseInt(v2El.value);
    let v = v1 - v2; 
    div1El.innerHTML = v;
});

btnSubEl 버튼에 클릭 이벤트 리스너를 추가한다(onclick과 역할 동일). addEventListener를 사용하여 여러 이벤트를 처리할 수 있다.
클릭 시 두 값을 뺀 결과를 div1El에 표시한다.

btn1El.addEventListener('click',function(){ }, {once:true});

한 번만 클릭되는 이벤트이다.

btnMulEl.onclick = () => {
    let v1 = parseInt(v1El.value);
    let v2 = parseInt(v2El.value);
    let v = v1 * v2;
    div1El.innerHTML = v;
};

function(){)을 람다식으로 표현하여 btnMulEl 버튼의 클릭 이벤트를 처리한다.
입력된 두 값을 곱한 결과를 div1El에 표시한다.

btnDivEl.onclick = function() {
    let v1 = parseInt(v1El.value);
    let v2 = parseInt(v2El.value);
    let v = v1 / v2;
    div1El.innerHTML = v;
}

 

 btnDivEl 버튼의 클릭 이벤트를 처리하고 두 값을 나눈 결과를 div1El에 표시한다.

 

---

 

예시2(drag and drop)

 

See the Pen Untitled by 유레이나 (@zdixexqp-the-reactor) on CodePen.

<div id="draggable" draggable="true" ondragstart="dragstartHandler(event)">

draggable="true": 이 요소가 드래그 가능함을 지정하고, 
ondragstart: 드래그가 시작될 때 호출되는 JavaScript 함수(dragstartHandler)를 지정한다.

function dragstartHandler(ev) {
        ev.dataTransfer.setData("text/plain", ev.target.id);
        ev.dataTransfer.effectAllowed = "move";
    }

dragstartHandler(ev): 드래그가 시작될 때 호출되는 함수

ev.dataTransfer.setData("text/plain", ev.target.id): 드래그된 요소의 ID를 Data에 저장하고 이 데이터는 드롭 이벤트에서 사용된다.
ev.dataTransfer.effectAllowed = "move": drag 효과를 "move"로 설정하여 사용자가 요소를 이동할 것임을 나타낸다.

 document.addEventListener("dragover", function(event) {
        event.preventDefault();
        event.dataTransfer.dropEffect = "move";
    });

document.addEventListener("dragover", function(event) {}): 드래그된 요소가 드롭 대상 위에 있게 한다.
event.preventDefault(): 드래그 오버 이벤트에서 기본 동작을 방지하여 드롭이 가능해진다.

document.addEventListener("drop", function(event) {
    event.preventDefault();
    const data = event.dataTransfer.getData("text/plain");
    const draggedElement = document.getElementById(data);

드롭 이벤트를 처리하고,

const data = event.dataTransfer.getData("text/plain"): 드래그된 요소의 ID를 가져온다.

 

---

 

예시2(onsubmit)

See the Pen Untitled by 유레이나 (@zdixexqp-the-reactor) on CodePen.

 

참고: [java]정규식 (Regular Expression)

[java]정규식 (Regular Expression)