자바스크립트 자주 쓰이는 간단한 이벤트 모음

자바스크립트 자주 쓰이는 간단한 이벤트 모음

change

input 안의 값에 변화에 따라서 자유롭게 핸들링하자

input 태그에 쓰여진 값을 다른 태그 안에 넣어줄수도 있으며 직접 뽑을수도있다

var t = document.getElementById('target'); t.addEventListener('change', function(event){ document.getElementById('result').innerHTML=event.target.value; //input에 넣어지는 값 태그안에 넣기 alert(event.target.value); });

SelectBox 에서 선택된 option의 text 값 또는 value값을 가져오자

//선택한 selectBox의 value 또는 text 값 가져와보기 선택하세요. 옵션 1 옵션 2 옵션 3 var t = document.getElementById('target'); t.addEventListener('change', function(event){ alert("알람: "+event.target.value); // 1, 2, 3 alert(t.options[t.selectedIndex].innerText); //옵션1,옵션2,옵션3 });

click

checkBox가 클릭상태면 1, 아니면 0 이라는 값을 갖도록 하자

//체크박스 클릭에 따라서 value 값 지정하기 체크박스 var t = document.getElementById('target'); t.addEventListener('click', function(event){ if(event.target.checked==true){ event.target.value=1; }else{ event.target.value=0; } });

submit

form 이용하여 데이터 전송시 전송을 잠시 중단 후 유효성 검사를 진행하자

//폼으로 전달할때의 유효성 검증 name var t = document.getElementById('target'); t.addEventListener('submit', function(event){ if(document.getElementById('name').value.length ===0){ alert("필드 값이 누락되었습니다."); event.preventDefault(); } });

from http://pulpul8282.tistory.com/196 by ccl(A) rewrite - 2021-09-16 04:01:48