이벤트(event)는 어떤 사건을 의미한다. 브라우저에서의 사건이란 사용자가 클릭을 했을 때, 스크롤을 움직였을 때, 필드의 내용을 바꾸었을 때와 같은 것을 의미한다.
<html>
<body>
<input type="button" onclick="alert(window.location)" value="alert(window.href)"/>
<input type="button" onclick="window.open(demo.html)" value="alert(window.open)"/>
<input type="text" onchange="alert(this.value)"/>
</body>
</html>
event target - 이벤트가 일어날 객체를 의미한다. 아래 코드에서 타깃은 버튼 태그에 대한 객체가 된다.
event type - 이벤트의 종류를 의미한다. 위의 예제에서는 click과 change이 이벤트 타입이다. 그 외에도 스크롤은 사용자가 스크롤을 움직였다는 이벤트이고 mousemove는 마우스가 움직였을 때 발생하는 이벤트이다.
event hadler - 이벤트가 발생했을 때 동작하는 코드를 의미한다. 위의 예제에서는 alert(window.location)이 해당한다.
- inline
인라인 방식은 이벤트를 이벤트 대상의 태그 속성으로 지정하는 것이다. 다음은 버튼을 클릭했을 때 Hello World를 경고창으로 출력한다.
<input type = "button" onclick = "alert('Hello World');" value = "button"/>
<!-- 자기 자신을 참조하는 방법 -->
<input type ="button" onclick="alret('Hello world,' + this.value);" value = "button"/>
장점 - 태그에 직접 기술되어 있어 쉽게 찾을 수 있다.
단점 - 태그에 직접 기술되어 정보에 해당하는 HTML 코드에 영향을 끼칠 수 있다.
- 프로퍼티 리스너
프로퍼티 리스너 방식은 이벤트 대상에 해당하는 객체의 프로퍼티로 이벤트를 등록하는 방식이다. 인라인 방식에 비해서 HTML과 Javsscript를 분리할 수 있다는 점에서 선호되는 방식이지만 addEventListener 방식을 추천한다.
<input type="button" id="target" value="button"/>
<script>
let t = document.getElementById('target');
t.onclick = (event) =>{
alert('Hello World');
}ie8 이하 버전에서는 이벤트 객체를 핸들러의 인자가 아니라 전역 객체의 event 프로퍼티로 제공한다. 또한 target 프로퍼티도 지원하지 않는다. ie8 이하에서는 인자로 이벤트를 받지 않기 때문에 윈도 객체의 프로퍼티 이벤트를 사용해서 이벤트 객체를 알아내야 한다. 이런 것이 크로스 브라우징이다.
- addEventListener()
addEventListenter는 이벤트를 등록하는 가장 권장되는 방식이다. 이 방식을 이용하면 여러 개의 이벤트 핸들러를 등록할 수 있다.
<input type="button" id="target" value="button">
<script>
let t = document.getElementById('target');
t.addEventListener('click', ()=>{
alert('Hello World ' + event.target.value);
})이벤트 객체를 이용하면 복수의 엘리먼트에 하나의 리스너를 등록해서 재사용할 수 있다.
- 이벤트 전파 - 버블링,캡처링
HTML 태그는 중첩되어 있다. 따라서 특정한 태그에서 발생하는 이벤트는 중첩되어 있는 태그들 모두가 대상이 될 수 있다. 이런 경우 중첩된 태그들에 이벤트가 등록되어 있는 경우에 사용한다.
캡처링, capturing - 부모에서부터 나아가는 이벤트 핸들러 , 과거 브라우저에서 지원하지 않는 경우가 많음.
버블링, bubbling - 자식에서부터 부모까지 나아가는 이벤트 핸들러 , 모든 브라우저에서 지원.
stopPropagation - 이벤트 전파를 멈추게 하는 함수.
'개발' 카테고리의 다른 글
| [Javascript] Ajax (0) | 2020.12.31 |
|---|---|
| [Javascript] 이벤트 - 2 (0) | 2020.12.31 |
| [Javascript] 문서의 기하학적 특성 (0) | 2020.12.23 |
| [Javascript] Node 객체 (0) | 2020.12.22 |
| [Javascript] Element (0) | 2020.12.21 |