자바스크립트6 - 이벤트
이번 포스팅에서는 자바스크립트에서의 이벤트에 대해 공부해보려고 한다.
브라우저에서의 이벤트란 사용자가 클릭, 입력 등의 상호작용에 인해 일어나는 사건을 의미한다. 어떠한 상호작용이 발생했을 때 그에 맞는 처리를 해주기 위해서 일반적으로 함수를 작성해 연결하며, 이 함수를 이벤트 핸들러(Event Handler) 라고 한다.
이러한 이벤트 핸들러를 연결하는 방법은 여러 가지가 있으며, 간단한 예제를 살펴보며 공부해보려고 한다. → 인라인 방식, 프로퍼티 방식, addEventListener 방식
1. 인라인 방식
태그의 속성으로 이벤트를 작성하는 방식이다.
this를 통해 자기 자신을 참조할수도 있으며, script태그에서 함수를 선언하고 해당 함수를 속성에서 사용하는 방법도 쓰인다.
<!-- 바로 태그에 코드를 쓰는 방식 -->
<input type="button" onclick="alert('Hello world');" value="button" />
<!-- 실행>> Hello world -->
<!-- this를 통해 자기 자신을 참조하는 방식 -->
<input type="button" onclick="alert('Hello world ' + this.value);" value="샘플" />
<!-- 실행>> Hello world 샘플 -->
<!-- Script 태그에서 함수를 선언하고, 태그에 지정하는 방식 -->
<button onclick="myHandler1(); myHandler2();">Click me</button>
<script>
function myHandler1() {
alert('myHandler1');
}
function myHandler2() {
alert('myHandler2');
}
</script>
2. 프로퍼티 방식(property 방식)
이벤트 대상에 해당하는 객체에 이벤트를 등록하는 방식이다.
이 프로퍼티 방식은 이벤트에 오직 하나의 이벤트 핸들러만을 바인딩할 수 있다.
<input type="button" id="target" value="button" />
<script>
var targetBtn = document.getElementById('target');
targetBtn.onclick = function(){
alert('Hello world');
// 실행 >> Hello world
}
</script>
3. addEventListener 방식
가장 권장되는 방식으로, 프로퍼티 방식과 달리 여러 개의 이벤트 핸들러를 등록할 수 있다.
요소.addEventListener(이벤트, 명령);
선택 요소에 지정한 이벤트가 발생하면, 약속된 명령어를 실행시킨다.
<body>
<div class="container">
<div class="div1">div1</div>
<div class="div2">div2</div>
</div>
<input type="text">
<script>
let div1 = document.querySelector(".div1");
div1.addEventListener('click', function(){
console.log('div1에 click 이벤트 발생!');
})
div1.addEventListener('click', function(event){
console.log('event.target',event.target); // 이벤트가 일어나는 요소를 반환
console.log('div1에 click 이벤트 발생!');
})
</script>
</body>
</html>
이제, 이벤트의 종류에 대해 공부해보려고 한다.
굉장히 많은 이벤트가 있으므로, 자주 사용되는/ 기초적인 이벤트만 살짝 다뤄보고 여기서 다루지 않은 것들은 MDN문서를 참고해보도록 하자.
| UI Event |
| load - 웹페이지나 스크립트의 로드가 완료되었을 때 |
| unload - 웹페이지나 스크립트가 언로드될 때 |
| error - 오류 or 요청한 자원이 존재하지 않는 경우 |
| scroll - 사용자가 웹페이지를 스크롤할 때 |
| abort - 이미지 로딩이 중단되었을 때 |
| resize - 브라우저 창의 크기가 변경될 때 |
| keyboard Event |
| keydown - 키를 누르고 있을 때 |
| keyup - 누르고 있던 키를 뗄 때 |
| keypress - 키를 누르고 뗏을 때 |
| keyCode - 키 코드 |
// keycode
let text = document.querySelector('input');
text.addEventListener('keydown', function(e){
kc = e.keyCode;
console.log("?",kc);
if(kc==13){ // 엔터쳤을 때 경고창 띄우기
alert('경고');
}
})
| Mouse Event |
| click - 마우스 버튼을 클릭했을 때 |
| dbclick - 마우스 버튼을 더블 클릭했을 때 |
| mousedown - 마우스 버튼을 누르고 있을 때 |
| mouseup - 누르고 있던 마우스 버튼을 뗄 때 |
| mousemove - 마우스를 움직일 때 |
| mouseover - 마우스를 요소 위로 움직였을 때(해당 요소의 자식 요소에게도 영향O / 자식요소에서 이벤트 발생 -> 부모 요소도 영향O) |
| mouseout - 마우스를 요소 밖으로 움직였을 때 |
| mouseenter - 마우스가 특정 요소에 올라갔을 때(해당 요소의 자식에게는 영향을 미치지x) |
| mouseleave - 마우스가 특정 요소를 벗어났을 떄 |
| hover - mouseenter + mouseleave 마우스가 특정 요소에 올라갔다가 벗어났을 때 |
onclick
각각의 html 요소에 속성 값으로 js함수를 연결
<body>
<div class="box"onclick="test();">click</div>
</body>
<script>
function test() {
alert("TEST");
</script>
| Focus Event |
| focus/focusin - 요소가 포커스를 얻었을 때 |
| blur/focusout - 요소가 포커스를 잃었을 때 |
| Form Event |
| input - input 또는 textarea요소의 값이 변경되었을 때 / contenteditable 속성을 가진 요소의 값이 변경되었을 때 |
| change - select box, checkbox, radio button의 상태가 변경되었을 때 |
| submit- form을 submit할 때 |
| reset - reset버튼을 클릭할 때(최근 사용x) |
| select - input이나 textarea 요소 안의 텍스트를 드래그하여 선택했을 때 |
참고
https://developer.mozilla.org/ko/docs/Learn/JavaScript/Building_blocks/Events
이벤트 입문 - Web 개발 학습하기 | MDN
이벤트(event)란 여러분이 프로그래밍하고 있는 시스템에서 일어나는 사건(action) 혹은 발생(occurrence)인데, 이는 여러분이 원한다면 그것들에 어떠한 방식으로 응답할 수 있도록 시스템이 말해주
developer.mozilla.org
출처
이벤트 연결 방식에 대한 종류와 예제들을 참고했는데 많은 도움이 되었다.
https://jhyonhyon.tistory.com/23#recentComments
[JavaScript] 이벤트(Event)란?
이벤트(Event)란? 이벤트(Event)는 어떤 사건을 의미합니다. 브라우저에서의 사건이란 사용자가 "클릭을 했을 때", "스크롤을 했을 때", "무언가 입력했을 때" 등의 상호작용으로 인해 일어나는 사건
jhyonhyon.tistory.com
🌐 브라우저 이벤트 종류 & 사용법 총정리
브라우저 이벤트 란? 이벤트(event)는 어떤 사건을 의미한다. 브라우저에서의 이벤트란 예를 들어 사용자가 버튼을 클릭했을 때, 웹페이지가 로드되었을 때와 같은 것인데 이것은 DOM 요소와 관련
inpa.tistory.com