Event는 무언가 일어나는 행위나 액션을 말합니다.
Event는 DOM에서 마우스 클릭, 키보드를 누르는 것처럼 사용자의 액션의 의해서 발생하거나,
API들이 비동기적 작업을 진행하기 위해 생성할 수 있습니다.
[사용자가 발생시키는 이벤트]
: click, mouseover, mousemove, mousewheel, scroll ...
[시스템이 발생시키는 이벤트]
: load, error
다음은 Event 연결 방법에 대해 알아보겠습니다.
1. onclick
onclick의 경우 이전에 작성된 구문이 덮어씌워집니다.
때문에 onclick보다 addEventListener를 사용하여 이벤트를 연결시킵니다.
<body>
<a href="#">링크</a>
</body><script>
// onclick
// DOM.onclick = ()=>{}
const a = document.querySelector("a");
console.log(a);
a.onclick = ()=>{
console.log("You clicked!!"); // 출력되지 않음
}
a.onclick = ()=>{
console.log("You clicked again!!"); // You clicked again!!
}
</script>
2. addEventListener
기존에 작성된 구문을 유지하고, 추가로 이벤트를 연결합니다.
<body>
<a href="#">링크</a>
</body><script>
// addEventListener
// DOM.addEventListener("이벤트명", ()=>{})
a.addEventListener("click", ()=>{
console.log("You clicked!!"); // You clicked!!
})
a.addEventListener("click", ()=>{
console.log("You clicked again!!"); // You clicked again!!
})
</script>'Front-End > javascript' 카테고리의 다른 글
| [Javascript 기초] DOM 스타일링 (0) | 2023.08.09 |
|---|---|
| [Javascript 기초] Event가 발생한 대상 알아내기 (0) | 2023.07.25 |
| [Javascript 기초] DOM의 이해 및 DOM 선택 (0) | 2023.07.17 |
| [Javascript 기초] 전개 연산자 (0) | 2023.06.03 |
| [Javascript 기초] 비구조화 할당(구조 분해 할당) (0) | 2023.06.03 |
댓글