-
[JavaScript] eventLanguage/JavaScript 2024. 5. 3. 10:06
이벤트
: 사용 중이거나 프로그래밍 중인 시스템 내에서 일어나는 사건을 뜻함
ex) 웹페이지 사용자가 버튼을 클릭했다 -> 클릭이벤트
웹페이지 사용자가 입력 폼의 내용을 제출했다 -> 제출이벤트
각각의 이벤트들은 이벤트핸들러(handler)를 가질 수 있다.
이벤트 핸들러
: 이벤트가 발생되면 실행될 코드블록을 뜻하며, 주로 함수가 이 역할을 담당한다.
이벤트 핸들러 역할을 수행할 함수를 정의하는 것을 이벤트 핸들러 등록이라고 한다.
=> event hadler register : 이벤트가 발생하면, 이 함수를 호출해라
타겟.on이벤트명 = 이벤트 핸들러함수 // hadleClick함수를 대입한다.(이벤트핸들러 등록) button.onclick = hadleClick // hadleClick 호출 후 반환값을 대입한다. button.onclick = hadleClick()예시)
html
<!DOCTYPE html> <html> <head> <title>자바스크립트 test</title> </head> <body> <input type="text" id="typing" /> <input type="button" id="push" value="PUSH" /> <script src="srcipt.js"></script> <body> </html>js1
const inputType = document.querySelector("#typing") const inputClick = document.querySelector("#push") const handleTyping = function(){ console.log("타이핑 되고 있어요") } const handleClick = function(){ console.log("클릭 되고 있어요") } inputType.onkeydown = handleTyping inputClick.onclick = handleClick // 이벤트핸들러등록에 함수호출문을 사용하면 반환값이 있을 경우 반환값으로 대체되기때문에 오작동될 수 있음 //inputType.onkeydown = handleTyping() //inputClick.onclick = handleClick()js2
const inputType = document.querySelector("#typing") const inputClick = document.querySelector("#push") // 이벤트 핸들러 함수로 익명의 함수도 사용가능 inputType.onkeydown = function(){ console.log("타이핑 되고 있어요") } inputClick.onclick = function(){ console.log("클릭 되고 있어요") }-> 위의 자바스크립트와 같은코드인데 익명함수도 사용가능하다는 것을 보여주기 위한 예시
'Language > JavaScript' 카테고리의 다른 글
[JavaScript] 함수와 매개변수 (1) 2024.05.03 [JavaScript] 함수와 return (0) 2024.05.02 [JavaScript] 함수 (0) 2024.05.02 [JavaScript] 반복문 (0) 2024.05.02 [JavaScript] 조건문 (0) 2024.05.02