JS(Vanilla)
이벤트 다루기
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<input type = "text" id="texter">
<button id = "clicker">버튼 클릭</button>
<div id='result'></div>
<br>
<script type="text/javascript">
const clicker = function() {
const name = document.getElementById('texter').value;
document.getElementById("result").innerText = name;
}
var aa = document.querySelector('#clicker');
aa.addEventListener('click', clicker);
</script>
</body>
</html>
const clicker = function() {
const name = document.getElementById('texter').value;
document.getElementById("result").innerText = name;
}
var aa = document.querySelector('#clicker');
aa.addEventListener('click', clicker);
onload, onclick, onmouseover 속성을 이용하여 이벤트를 발생시키고, 이를 핸들링할 수 있도록 코드를 짤 수 있다.
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>JavaScript Event Concept</title>
</head>
<body>
<h1>이벤트 타입</h1>
<p onclick="changeText(this)">이 문자열을 클릭해 보세요!</p>
<script>
function changeText(element) {
element.innerHTML = "문자열의 내용이 바뀌었습니다!";
}
</script>
</body>
</html>
onclick 속성에는 함수가 위치하고, 위 코드에서 changeText() 함수는 onclick이 수행된 위치 this를 입력받아 해당 내용(innerHTML)을 변경한다.
이벤트 발생 시 그 처리를 담당하는 함수를 가리킨다.(이벤트 핸들러와 같다)
객체나 요소에 프로퍼티로 전달하거나 이벤트 리스너를 메서드에 전달하는 방법으로 리스너를 전달할 수 있다.