[JavaScript] #09_ Event

이벤트 설정 방법

고전 이벤트 모델
요소에 먼저 접근해서 속성 추가
이벤트 객체를 제거하려면 속성 값에 null을 넣어주기(속성 = null )

클릭 시 이벤트 설정
var h = document.getElementById(‘id명‘);
h.onclick = function(){
           수행 기능 설정;
           h(this).onclick = null;    // 한 번만 실행
};

	<button id='test1'>test1 실행확인</button>
	<button id='test2'>test2 실행확인</button>
	<script>
		var test1 = document.getElementById('test1');
		var test2 = document.getElementById('test2');
		
		test1.onclick = function(){
			console.log('test1이 실행되었습니다.');
		}
		
		test2.onclick = function(){
			console.log('test2가 실행되면서 test1이벤트를 삭제하였습니다.');
			test1.onclick = null;
		}

함수 이름으로 연결

		var test2_1 = document.getElementById('test2_1');
		function test21(){
			alert('이름으로 이벤트 연결');
		}
		test2_1.onclick = test21;

여러 이벤트 동시 연결

		test2_1.onmouseover = function(){
			console.log('여러 이벤트 동시 연결 가능')
		}

이벤트 발생 객체는 핸들러 내부에서 this로 표현한다. (스타일 변경이 가능)

 

 

 

 

 

 

 

인라인 모델

: 요소 내부안에 이벤트 작성

클릭 시 이벤트 설정할 때

<h1 onclick=‘처리로직’></h1>               또는             <h1 onclick=‘스크립트 내 함수 호출‘></h1>

	<button onclick='test4();'>test4 실행확인</button>
	<button onclick='alert("test4가 실행되었습니다.")'>test4 실행확인</button>
	<script>
		function test4(){
			alert('test4가 실행되었습니다.')
		}

 

표준 이벤트 모델

addEventListener(연결할 이벤트, 연결할 함수)       :이벤트 확장
removeEventListener(이벤트이름, 함수)                :이벤트 제거

	<script>
		var test5 = document.getElementById('test5');
		var test6 = document.getElementById('test6');
		
		function fn_test5_1(){
			console.log('test5가 클릭됐습니다.');
		}
		
		function fn_test5_2(){
			console.log('test5에 들어왔습니다.');
		}
		
		test5.addEventListener('click', fn_test5_1);
		test5.addEventListener('mouseover', fn_test5_2);
		
		test6.addEventListener('mouseover', function(){
			console.log('test6에 들어오면서 test5의 클릭이벤트를 제거했습니다.');
			test5.removeEventListener('click', fn_test5_1);
		});
	</script>

 

****기본 이벤트 제거*****

1)  onclick

	<form>
		<label>이름: </label><input type='text' name='name' id='name'><br>
		<label>아이디: </label><input type='text' name='userId' id='userId'><br>
		<label>비밀번호: </label><input type='password' name='password' id='password'><br>
		<label>비밀번호 확인: </label><input type='password' name='passwordConfirm' id='passwordConfirm'>
		<br>
		<input type='submit' value='제출' onclick='return test7();'>
	</form>				<!-- 2) 반환값을 받아와서 true면 넘기고 false면 submit하지 않게 함.-->
	<script>
		function test7(){
			//비밀번호가 서로 같지 않으면 제출이 되지 않게 막기
			var password = document.getElementById('password').value;
			var password2 = document.getElementById('passwordConfirm').value;
			
			if(password == password2){
				alert('비밀번호가 일치합니다.');
				return true;		// 1)
			} else {
				alert('비밀번호가 일치하지 않습니다.');
				return false;		// 1)
			}
		}
	</script>

 

2) onsubmit
: form자체에서 onsubmit으로 리턴값 받아오기

	<form onsubmit='return test8();'>	<!-- form자체에서 onsubmit으로 리턴값 받아오기 -->
		<label>이름: </label><input type='text' name='name' id='name2'><br>
		<label>아이디: </label><input type='text' name='userId' id='userId2'><br>
		<label>비밀번호: </label><input type='password' name='password' id='password2'><br>
		<label>비밀번호 확인: </label><input type='password' name='passwordConfirm' id='passwordConfirm2'>
		<br>
		<input type='submit' value='제출'>
	</form>							
	<script>
		function test8(){
			//비밀번호가 서로 같지 않으면 제출이 되지 않게 막기
			var password = document.getElementById('password2').value;
			var password2 = document.getElementById('passwordConfirm2').value;
			
			if(password == password2){
				alert('비밀번호가 일치합니다.');
				return true;
			} else {
				alert('비밀번호가 일치하지 않습니다.');
				return false;
			}
		}
	</script>