HTML요소(on속성)이벤트_js

- 모든 태그에는 접두사 on이 붙은 속성이 있다.

- 접두사 on 속성은 자바스크립트와 연계된다.

- 접두사 on 속성은 사용자의 행위에 관련된 속성이다.

자주 쓰이는 이벤트

- 사용자가 클릭 했을 때

<button type="button" onclick="alert('클릭!')">버튼 </button>

<div onclick="alert('클릭')";
style="display:inline;
border:3px solid #f00;
padding:10px; 
cursor:pointer;">
난 버튼이 아닌데
</div>

<button type="button" onclick="myClick(222);">버튼</button>
<script type="text/javascript">
	function myClick(obj){
		console.log(obj);
	}
</script>

<button type="button" onclick="myClick(this);">버튼</button>
<script type="text/javascript">
	function myClick(obj){
		console.log(obj);
	}
</script>

<script type="text/javascript">
	function myClick(obj){
		console.log([obj]);
	}
</script>

<button type="button" onclick="myClick(this);" value="홍길동">버튼</button>
<script type="text/javascript">
	function myClick(obj){
		console.log([obj]);
		console.log(obj.value);
		console.log(obj.type);
		console.log(obj.onclick);
		
	}
</script>

 

change

- 사용자의 행위에 의해 값이 변경되었을 시

<select onchange="myChange(this)">
	<option value="">::값 선택::</option>
	<option value="1">1</option>
	<option value="2">2</option>
	<option value="3">3</option>
</select>
<script type="text/javascript">
	function myChange(obj){
		console.log(obj);
		console.log(obj.value)
	}
</script>

 

onblur

- 커서 활성화가 없어졌을 때

<input type="text" onBlur="myBlur(this);">
<script type="text/javascript">
	function myBlur(obj){
		console.log(obj.value);
	}
</script>

 

onkeyup, onkeydown, onkeypress

- onkeyup : 키를 눌렀다가 뗐을 경우

- onkeydown : 키를 눌렀을 경우

- onkeypress : 키를 누르고 있을 경우

<input type="text" onkeyup="myBlur(this);">
<script type="text/javascript">
	function myBlur(obj){
		console.log(obj.value);
	}
</script>