Jade_o.o
[javascript] JavaScript 공부 정리14 - 이벤트 addEventListener 본문
요소.addEventListener(이벤트, 명령)
• 선택 요소에 지정한 이벤트가 발생하면, 약속 된 명령어를 실행시키는 메소드
let boxEl = document.querySelector(".box");
console.log(boxEl);
boxEl.addEventListener("click", function() {
alert("click!");
})document.querySelector(".box").addEventListener("click", function() {
alert("click");
})
addEventListener 이벤트의 종류
• Click : 클릭
• Mouse 계열
1) Mouseover : 요소에 커서를 올렸을 때
2) Mouseout : 마우스가 요소를 벗어날 때
3) Mousedown : 마우스 버튼을 누르고 있는 상태
4) Mouseup : 마우스 버튼을 떼는 순간
• Focus : 포커스가 갔을 때
• Blur : 포커스가 벗어나는 순간
addEventListener 이벤트의 종류
• Key 계열
1) Keypress : 키를 누르는 순간 + 누르고 있는 동안 계속 발생
2) Keydown : 키를 누르는 순간에만 발생
3) Keyup : 키를 눌렀다가 떼는 순간
• Load : 웹페이지에 필요한 모든 파일(html, css, js 등)의 다운로드가 완료 되었을 때
• Resize : 브라우저 창의 크기가 변경 될 때
• Scroll : 스크롤이 발생할 때
• Unload : 링크를 타고 이동하거나, 브라우저를 닫을 때
• Change : 폼 필드의 상태가 변경 되었을 때
onclick
• 각각의 HTML 요소에 속성 값으로 JS 함수를 연결
<body>
<div class= "box"
onclick="test();">click</div>
</body>function test() {
alert("TEST");
}
'JavaScript' 카테고리의 다른 글
| [javascript] JavaScript DOM - 클래스 관련 메소드, 속성 변경 메소드 (0) | 2024.01.17 |
|---|---|
| [javascript] JavaScript DOM - 요소 다루기, 요소 선택, 요소 추가 (0) | 2024.01.17 |
| [javascript] JavaScript 공부 정리13 - 요소 선택, 요소 다루기, 요소 추가, 요소 삭제 (0) | 2024.01.16 |
| [javascript] JavaScript 공부 정리12 - DOM(Document Object Model) (1) | 2024.01.16 |
| [javascript] JavaScript 공부 정리11 - 내장 객체(표준 객체) Date 객채, Math 객채 (0) | 2024.01.16 |
'JavaScript' Related Articles
more
