JavaScript의 이벤트


Javascript의 이벤트는 웹 사이트에서 버튼, 입력 상자, 양식, 페이지로드 또는 이벤트 마우스 호버와 같은 동적 요소와 사용자의 상호 작용입니다. 이 튜토리얼에서 관련된 모든 이벤트를 다룰 것입니다. HTML에 대한 기본적인 이해가 있기를 바랍니다.

<!DOCTYPE html>
<html>
<head>
<script>
function some_function(){
	statement1;
	statement2;
}
</script>
</head>
<body>
<p id="para">This is a paragraph.</p>
<input id="input" />
<button type="button">Click Me!!</button>
</body>
</html>

이것은이 튜토리얼 시리즈에서 사용할 기본 HTML 템플릿입니다. 일부 이벤트에는 입력 상자가 필요하고 다른 이벤트에는 버튼이 필요하며 경우에 따라 둘 다 사용합니다. 함수 만 수정하겠습니다.

onclick 이벤트

버튼을 클릭하면 이벤트가 트리거됩니다. 버튼 코드와 기능을이 새 코드로 바꿉니다.

function some_function(){
	alert("Button is clicked");
}
<button type="button" onclick="some_function">Click Me!!</button>

onfocus 및 onblur 이벤트

입력 필드에 초점을 맞추면 이벤트가 트리거됩니다. 입력 필드와 함수를이 새 코드로 바꿉니다.

function some_function(){
	document.getElementById('input').style.background = 'red';
}
function some_other_function(){
	document.getElementById('input').style.background = 'yellow';
}
<input id="input" onblur="some_other_function();" onfocus="some_function();"/>

키 누르기 이벤트

입력 필드에 초점을 맞추고 키를 누르면 이벤트가 트리거됩니다. 입력 필드와 함수를이 새 코드로 바꿉니다.

function some_function(data){
	 	
}
<input id="input" onkeypress="some_function(this);"/>

마우스 이벤트

단락에 마우스 포인터를 놓으면 이벤트가 트리거됩니다. para 및 function을이 새 코드로 바꿉니다.

function some_function(para){
	 	para.style.color='red'
}
function some_other_function(para){
		para.style.color='black'	
}
<p id="para" onmouseover="some_function(this)" onmouseout="some_other_function(this);">This is a paragraph.</p>

Onload 이벤트

이 이벤트는 HTML의 body 태그에 첨부됩니다. 본문이로드되면 이벤트 리스너가 실행을 수행합니다.

<body onload="alert('Loaded')">