1. addEventListener
1-1. 기본동작의 취소
-
웹 브라우저의 구성요소들은 각각의 기본적인 동작 방법을 가지고 있다.
-> 폼에서 submit 버튼을 누르면 데이터가 전송
-> a 태그를 클릭하면 href 속성의 URL로 이동한다. -
이러한 기본적인 동작들을 기본 이벤트라고 하는데 사용자가 만든 이벤트를 이용해서 이러한 기본 동작을 취소할 수 있다.
<body>
<p>
<label>prevent event on
<input type="checkbox" id="prevent"/>
</label>
</p>
<p>
<a id="target1" href="https://www.naver.com">naver</a>
</p>
<p>
<form id="target2" action="https://www.naver.com">
<input type="submit" />
</form>
</p>
<script>
document.getElementById('target1').addEventListener('click',function(event){
if( document.getElementById('prevent').checked ){
event.preventDefault();
}
});
document.getElementById('target2').addEventListener('submit',function(event){
if( document.getElementById('prevent').checked ){
event.preventDefault();
}
});
</script>
</body>2. inline
<body>
<p>
<label>prevent event on
<input type="checkbox" id="prevent"/>
</label>
</p>
<p>
<a href="https://www.naver.com" onclick="if(document.getElementById('prevent').checked) return false;">
naver</a>
</p>
<p>
<form action="https://www.naver.com"
onsubmit="if(document.getElementById('prevent').checked) return false;">
<input type="submit" />
</form>
</p>
</body>3. property
<body>
<p>
<label>prevent event on
<input type="checkbox" id="prevent"/>
</label>
</p>
<p>
<a id="target1" href="https://www.naver.com">naver</a>
</p>
<p>
<form id="target2" action="https://www.naver.com">
<input type="submit" />
</form>
</p>
<script>
document.getElementById('target1').onclick = function(){
if( document.getElementById('prevent').checked ){
return false;
}
}
document.getElementById('target2').onsubmit = function(){
if( document.getElementById('prevent').checked ){
return false;
}
}
</script>
</body>4. event
<body>
<input type="button" id="target1" value="property"/>
<input type="button" id="target2" value="listener"/>
<script>
function onClick(){
alert('click');
}
function onClick2(){
alert('클릭');
}
// property
document.getElementById('target1').onclick
= function(){ onClick() };
document.getElementById('target1').onclick
= function(){ onClick2() };
// litener
document.getElementById('target2').addEventListener('click', onClick);
document.getElementById('target2').addEventListener('click', onClick2);
// 이벤트 하나를 제거
document.getElementById('target2').removeEventListener('click', onClick);
</script>
</body>5. form 태그
5-1. Form 태그
- 웹에서 정말 많이 사용.
- document.form1.reset()
-><input type='reset'/>과 동일한 효과 - 작성된 내용 전송
-> document.form1.submit();
<body>
<form name="form1">
id : <input type="text" name="user_name" id="user_name" />
</form>
<script>
// id로 접근하는 방법
let id = document.getElementById('user_name');
// form태그에 지정되는 name속성을 통하여 접근 가능
let myform = document.form1;
let id2 = myform.user_name;
let id3 = document.form1.user_name;
if( !id.value ){ // 값이 없을 경우 : true. 값이 있을 경우 : false
alert("아이디를 입력해주세요");
}
</script>
</body><body>
<form name="form1">
<select name="sel">
<option>-------선택하세요-------</option>
<option value="item1">항목1</option>
<option value="item2">항목2</option>
</select>
<script>
let myform = document.form1;
let select = myform.sel.selectedIndex;
console.log(select);
console.log( myform.sel );
console.log( myform.sel[myform.sel.selectedIndex].value );
if( myform.sel.selectedIndex < 1 ){
alert('셀렉트 박스 항목을 선택해주세요');
}
</script>
</form>
</body><body>
<form name="form1">
<input type="radio" name="gender" value="M" checked>남자
<input type="radio" name="gender" value="W">여자
</form>
<script>
if( !document.form1.gender[0].checked ){
alert("라디오 버튼을 체크해주세요")
}
// 히나리도 체크 되어있다면 이 값을 true로 변경
let is_check = false;
for( let i=0; i<document.form1.gender.length; i++ ){
if( document.form1.gender[i].checked ){
is_check = true;
break;
}
}
if( !is_check ){
// 하나도 체크가 안되어 있을 경우의 처리
}
</script>
</body>
개발자