JavaScript_Event

이벤트

이벤트설정 방법

고전 이벤트 모델

: 여러 이벤트 동시에 연결할 수 있다. (클릭해서 실행하는 것과 마우스만 올려놓아도 실행되는 두가지를 동시가능)

onclick : 클릭해서 실행.

onmouseover : 마우스만 올려놔도 실행.

<button id="test1">test1실행확인</button>
<button id="test2">test2실행확인</button>
<button id="test2_1">test2_1실행확인</button>
	<script>
		var test1 = document.getElementById('test1');
		var test2 = document.getElementById('test2');
		
		test1.onclick = function(){
			console.log('test1이 실행되었습니다.');//속성자체에 온클릭을 넣어서 사용s
		}
		
		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("여러 이벤트 동시 연결 가능");
		}
	
	</script>

 

이벤트 발생 객체

 

 

 

인라인 모델

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

 

표준 이벤트 모델

<이벤트 추가 제거>

addEventListener()

removeEventListener()

<button id="test5">test5 실행확인</button>
<button id="test6">test6 실행확인</button>
	<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);//들어가는건 되지만 클릭은 안됨.제거했기때문에.
		});
		//onclick과 onsubmit에 앞에 reutrn을 적어주면 test함수의 반환값submit쪽으로 간다

클릭이벤트를 제거한 후에는 클릭해도 실행되지않는다.