dom 이벤트

  dom 이벤트 발생

addEventListener 메소드를 이용하여 이벤트를 발생시킬 수 있다. 

▶ 클릭 이벤트

<button type="button" id="myBtn">클릭이벤트</button>
<script type="text/javascript">
	var myBtn = document.getElementById('myBtn');
	myBtn.addEventListener('click',function(){
		console.log('클릭 이벤트 발동');
	});
</script>

 

 

 

id="myBtn"를 가진 버튼을 생성한다. 객체 검색 메서드로 myBtn이라는 아이디를 가진 객체를 찾아,

myBtn 의 주소값을 myBtn이라는 변수에 대입한다.

myBtn변수의 메서드중 클릭시 다음과 같은 함수를 발생시키도록 하자.

 

 

버튼 클릭시 콘솔창(f12)에 클릭 이벤트 발동 이라는 문구를 띄게 하였다.

 

 

▶ 키보드 이벤트

<input type="text" name="memberName" onkeypress="myKeypress(this)">
<script type="text/javascript">
	var myKeypress = function(obj){
		console.log('키보드 이벤트 발동',obj.value);
	}
</script>

 

 

text박스를 하나 생성하고, onkeypress라는 속성을 걸어준다. 

myKeypress 라는 변수에 함수를 할당한다. 입력박스에 키보드로 입력시 바로 콘솔창(f12)에 출력한다.

 

▶ 체인지 이벤트 (select)

<select id="mySelect">
 	<option value=""> :: 선택 :: </option>
 	<option value="옵션1">옵션1</option>
	<option value="옵션2">옵션2</option>
</select>
<script type="text/javascript">
	var myBtn = document.getElementById('mySelect');
	myBtn.addEventListener('change',function(){
		console.log('체인지 이벤트 발동',this.value);
	});
</script>

 

 

 

select 박스를 만들고 선택 옵션을 만들었다.

myBtn 이라는 변수를 선언하고, mySelect라는 아이디를 가진 객체를 할당하였다.

myBtn변수에 이벤트를 추가하여 값이 change될 때 함수를 발동시켯다. 선택값이 f12 콘솔창에 출력되는것을 볼 수 있다.

 

▶ 키다운 이벤트

<input type="text" name="memberAge" id="myKeydown">
<script type="text/javascript">
	var myKeydown = document.getElementById('myKeydown');
	var keyEv = function(){
		console.log('키다운 이벤트 발동', this.value);
		if(this.value.length>10){
			alert('10글자 이하로 입력해 주세요.');
			return
		}
	}
	myKeydown.addEventListener('keydown',keyEv);
</script>

 

 

10글자가 넘을시 더이상 입력할수없게 제한을 걸어준다. 경고창 등장!