-
Javascript - 이벤트(event)프로그래밍/Javascript 2021. 12. 22. 09:00
이벤트
웹 브라우저에서 마우스 클릭을 했을 때나 어떤 요소에 포커스가 주어지거나 변경될 때 입력해놓은 event를 발생시키는 것이다.
예시1) "안녕하세요"라는 글자가 담긴 버튼을 클릭할 때, alert창에 "반가워요!"라는 메시지 띄우기<!DOCTYPE html> <html lang="ko" dir="ltr"> <head> <meta charset="uft-8"> <title>Javascript 강의</title> </head> <body> <!-- onclick 이벤트 --> <button onclick="alert('반가워요!')">안녕하세요</button> </body> </html>
예시2) 입력창에 내용을 입력했을 때(비어있던 칸 -> 채워진 칸), alert창에 "변경했어요!" 메시지 띄우기<!DOCTYPE html> <html lang="ko" dir="ltr"> <head> <meta charset="uft-8"> <title>Javascript 강의</title> </head> <body> <!-- onchange 이벤트 --> <input type="text" onchange="alert('변경했어요!')"> </body> </html>
예시 1, 2에서 사용한 onclick="", onchange=""가 자바스크립트의 이벤트이다.
예시에서는 alert이라는 간단한 기능을 사용했지만, 더 복잡한 기능을 사용해서 코드가 길어질 때도있다. 이럴 때는 아래와 같은 인라인 방식으로 이벤트를 입력시켜주면 코드가 간결해진다.<!DOCTYPE html> <html lang="ko" dir="ltr"> <head> <meta charset="uft-8"> <title>Javascript 강의</title> </head> <body> <!-- alert 기능 함수 생성 --> <script> function change() { alert('변경했어요!!!') } </script> <!-- onchange 이벤트 --> <input type="text" onchange="change()"> </body> </html>자주 사용하는 이벤트
onclick - 마우스를 클릭했을 때 이벤트 발생
ondbclick - 마우스를 더블클릭했을 때 이벤트 발생
onmouseover - 마우스를 갖다놨을 때 이벤트 발생
onmouseout - 마우스를 아웃했을 때 이벤트 발생
onkeydown - 키를 눌렀을 때 이벤트 발생
onkeyup - 키를 떼었을 때 이벤트 발생
onkeypress - 키를 누른 상태에서 이벤트 발생
onload - 페이지 로딩이 됐을 때 이벤트 발생
onunload - 다른 페이지로 이동 될 때 이벤트 발생
onresize - 사이즈가 변경되었을 때 이벤트 발생
onscroll - 스크롤 바를 움직일 때 이벤트 발생
onchange - 값이 변경될 때 이벤트 발생
onselect - input, textarea 요소의 텍스트를 선택했을 때 이벤트 발생
onfocus - 포커스가 될 때 이벤트 발생
onblur - 포커스가 벗어날 때 이벤트 발생
위의 이벤트 외에 다른 이벤트도 많이 있으니 아래 링크를 참조하면 좋을 것 같다.이벤트 참조 | MDN
DOM 이벤트는 발생한 흥미로운 것을 코드에 알리기 위해 전달됩니다. 각 이벤트는 Event 인터페이스를 기반으로한 객체에 의해 표현되며 발생한 것에 대한 부가적인 정보를 얻는데 사용되는 추가
developer.mozilla.org
'프로그래밍 > Javascript' 카테고리의 다른 글
Javascript (0) 2021.12.22 자바스크립트란? (0) 2021.12.21