이벤트 용어
- 이벤트 속성
window.onload = function()여기서 onload가 속성- 함수는 이렇게 선언했지만 이벤트는 위와 같이 선언하면
let s = function(); s();
- 이벤트 이름, 타입
- load
- 이벤트 리스너/핸들러 : 이벤트 속성에 넣는 함수
window.onload = function()여기서 function()임
- 이벤트 모델
- 문서 객체에 이벤트를 연결하는 방법 : DOM
- DOM level 0 : 고전 이벤트 모델임
- 인라인 이벤트 모델
- 이벤트를 중복해서 연결할 수 없음
- DOM level 2 : 표준 이벤트 모델임
- 마이크로소프트 인터넷 익스플로러 이벤트 모델
- 이벤트를 중복해서 연결 가능
- 웹 브라우저 마다 연결하는 방법이 다름
- DOM level 0 : 고전 이벤트 모델임
- 문서 객체에 이벤트를 연결하는 방법 : DOM
인라인 이벤트 모델
- 방법 1
- html 태그 내부에서 이벤트를 연결click 되면 alert를 실행
<button onclick="alert('click')">버튼</button>
- 방법 2
- 사용자 정의 함수 인라인함수를 구현하고 함수 호출하는 방식
<body> <button onclick="btnClick()">버튼</button> <script> function btnClick(){ alert('click'); } </script> </body>
이벤트 속성
- 마우스 이벤트
- onmouseover() : 마우스가 지정한 요소 영역에 들어왔을 때
- onmouseout() : 마우스가 지정한 요소 영역에 있다가 밖으로 갔을 때 발생
- ondbclick() : 마우스가 지정한 요소를 더블 클릭했을 때
- 키보드 이벤트
- onkeydown() : 지정한 요소에서 키보드가 눌렸을 때
- onkeyup() : 키보드를 눌렀다 뗐을 때
- 기타 이벤트
- onblur() : 지정한 요소에 포커스가 다른 요소로 이동되어 잃었을 때 발생 (포커스 반대인듯)
- onfocus() : 지정한 요소에 포커스가 갔을 때
- onchange() : 지정한 요소에 value속성 값이 바뀌고 포커스가 이동되었을 때 발생
- onload() : 지정한 요소의 하위 요소를 모두 로딩했을 때 발생
- onsubmit() : 폼 요소에 전송 버튼을 눌렀을 때 발생
예제
- 고전 이벤트 모델
<body>
<script>
window.onload = function(){
let btn = document.getElementById('btn1');
btn.onclick = function(){
alert('click');
}
};
</script>
<button id="btn1">버튼</button>
</body>버튼을 클릭하면 alert창에 "click"이 뜸
- 이벤트 this
<body>
<script>
window.onload = function(){
let btn = document.getElementById('btn1');
btn.onclick = function(){
this.innerHTML = this.innerHTML + "★";
}
};
</script>
<button id="btn1">버튼</button>
</body>버튼을 클릭하면 버튼의 “버튼” 뒤에 ★이 추가됨
'🥸 웹앱개발 이모저모 > Java Script' 카테고리의 다른 글
| [JS] 모듈 만들기, 내보내기, 가져오기 (0) | 2024.03.15 |
|---|---|
| [JS] 비동기 처리 (0) | 2024.03.12 |
| [JS] 함수 생성, 함수 호이스팅, 클로저 (0) | 2023.04.16 |
| [JS] 배열 메소드, 반복문 | sort(), forEach(), for in, for of (0) | 2023.04.16 |
| [JS] 입출력, 변수, 자료형, 초기화 (0) | 2023.04.16 |
