주의!!!!
이 글은 공부하면서 쓴 글이기 때문에 잘못된 정보가 있을 수 있습니다. 레퍼런스 보는게 제일 맘 편합니다!
EventTarget.addEventListener()에서 addEventListener는EventTarget에서 지정된 이벤트가 발생될 때 호출할 함수를 설정하는 메서드이다. 자세한 내용은 https://developer.mozilla.org/ko/docs/Web/API/EventTarget/addEventListener
EventTarget.addEventListener() - Web API | MDN
EventTarget의 addEventListener() 메서드는 지정한 이벤트가 대상에 전달될 때마다 호출할 함수를 설정합니다.
developer.mozilla.org
에서 확인하고 다양한 타입의 이벤트를 listen할 수 있지만 나는 그 중에서 submit이라는 이벤트를 listen하려고 한다.
html
<!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>
<form id="input-form">
<input id="mijeong" type="text" placeholder="hello~!">
</form>
<script src="./test.js"></script>
</body>
</html>javascript
const inputForm = document.querySelector("#input-form")
const input = document.querySelector("#input")
let num = 0
function testHandler(event) {
event.preventDefault()
num++
console.log(num)
}
inputForm.addEventListener("submit", testHandler)
여기서 주의해야할 점은 submit이벤트는 form태그에서만 잡을 수 있다.
나는 그걸 몰라서 input태그에서 잡으려고 했는데 아무 에러도 안뜨고 잡는 데에 한참 걸렸다...
'개발 공부 > javascript' 카테고리의 다른 글
| prettier 설정하기. (0) | 2021.07.26 |
|---|---|
| JavaScript 공부 사이트 (0) | 2021.07.13 |
댓글