[이벤트란?]
- 어떤사건을 의미한다.
- 브라우저는 이벤트를 감지하고, 이벤트 발생 시 알려준다 -> 사용자 & 웹페이지 상호작용 가능
- ex) 버튼 클릭했을 '때', 입력했을 '때', 스크롤 했을 '때'.. 등등
[event target]
- 이벤트가 일어날 객체
- ex) 버튼 눌렀을 때, 새창이 열리는 이벤트면 event target은 버튼
[event handler, event listener]
- 이벤트 발생했을 때, 동작하는 코드
[event handler(listener) 등록 방법]
1. 인라인 방식
a.
<button onclick="alert('Hello world');">Test</button>b.
<button onclick="testHandler()">Test</button>
<script>
function testHandler() {
alert('Hello world');
}
</script>- HTML코드와 스크립트가 섞여 사용 돼서 유지보수에 좋지는 않다
2. 프로퍼티(property) 방식
- HTML 코드와 자바스크립트가 섞여 사용되지 않는다
- 하나의 이벤트 핸들러 프로퍼티엔 하나의 이벤트 핸들러만 등록 가능
<body>
<button id="testBtn">Test</button>
</body>
<script>
let testBtn = document.querySelector('#testBtn');
testBtn.onclick = function () {
alert('Hello world1');
};
// 두번째 바인딩된 이벤트 핸들러
//하나의 이벤트 핸들러만 바인딩 가능하기때문에 "Hello world2"가 노출됨
testBtn.onclick = function () {
alert('Hello world2');
};
}
</script>
[addEventListener()]
- 이벤트를 등록하는 가장 권장되는 방식
- 이 방식을 이용하면 여러 개의 이벤트 핸들러를 등록할 수 있다
<body>
<button id="testBtn2">Test</button>
</body>
<script>
let testBtn2 = document.querySelector('#testBtn2');
function testFunc(){
alert('Hello world1');
}
testBtn2.addEventListener('click', testFunc);
testBtn2.addEventListener('click', function () {
alert('Hello world2');
});
}
</script>
[removeEventListener()]
- 등록된 eventListener를 삭제할때 사용
testBtn2.removeEventListener('click', testFunc);
개발자