JS/JS (자바스크립트) ES5
JS (자바스크립트) 이벤트 핸들러
0304호
2022. 12. 29. 11:12
이벤트 핸들러 ( Event Handler)
이벤트는 사용자의 동작이고 핸들러는 함수이다
화면에서 클릭이나, 동작시 발생하는 동적인 기능이다
자바스크립트의 첫번째 강력한 기능이다.
태그와 스크립트의 이벤트를 연결하는 방식에는
인라인 이벤트 모델,
기본 이벤트 모델,
표준 이벤트 모델이 있으며 이벤트 앞에 on을 붙인다.
※ : 자주쓰임
| 이벤트 종류 | 이벤트 종류 |
| ※ click | 마우스를 클릭했을 때 이벤트 발생 |
| dbclick | 마우스를 더블클릭했을 때 이벤트 발생 |
| mouseover | 마우스를 오버했을 때 이벤트 발생 |
| mouseout | 마우스를 아웃했을 때 이벤트 발생 |
| mousedown | 마우스를 눌렀을 때 이벤트 발생 |
| mouseup | 마우스를 떼었을 때 이벤트 발생 |
| mousemove | 마우스를 움직였을 때 이벤트 발생 |
| keydown | 키를 눌렀을 때 이벤트 발생 |
| ※ keyup | 키를 떼었을 때 이벤트 발생 |
| keypress | 키를 누른 상태에서 이벤트 발생 |
| focus | 포커스가 이동되었을 때 이벤트 발생 |
| blur | 포커스가 벗어났을 때 이벤트 발생 |
| ※ change | 값이 변경되었을 때 이벤트 발생 |
| submit | submit 버튼을 눌렀을 때 이벤트 발생 |
| reset | reset 버튼을 눌렀을 때 이벤트 발생 |
| select | input, textarea 요소 텍스트를 드래그해서 선택했을 때 이벤트 발생 |
| ※ load | 로딩이 완료되었을 때 이벤트 발생 |
| abort | 이미지의 로딩이 중단되었을 때 이벤트 발생 |
| resize | 사이즈가 변경되었을 때 이벤트 발생 |
| scroll | 스크롤바를 움직였을 때 이벤트가 발생 |
인라인 이벤트 모델
인라인 이벤트 모델은 html요소에 직접 이벤트를 연결하는 방식이다
태그 안에 이벤트 종류가 들어가며 on이 붙는다
onclick같은 이벤트 안에는 모든 스크립트 코드가 들어갈 수 있다.
예시1
<button onclick=“console.log(‘출력’)">예시2
<button onclick="check()">인라인이벤트</button>
<script>
function check(){
alert("인라인이벤트");
}
</script>Onclick이벤트는 일반적으로 가장 많이 사용된다.
동일한 함수에 여러개를 걸어줄 수 있으며 어떤 이벤트에 대한 동작인지 확인하는 키워드는 This이다.
This를 사용하면 객체를 받아와서 버튼의 내용을 바꿀수 있다.
<button onclick="aaa();">인라인 이벤트</button>
<button onclick="bbb(this);">1</button>
<button onclick="bbb(this);">2</button>
<button onclick="bbb(this);">3</button>
<script>
//인라인 이벤트 - 함수의 선언은 Script에서 하고, 태그에서 연결
function aaa() {
alert(1);
}
function bbb(a){
console.log(a); //a는 태그 자신
a.innerHTML = 'hello'
}
</script>
기본 이벤트 모델
기본 이벤트 모델은 HTML요소를 취득 후 이벤트를 익명함수로 연결하는 방식이다.
HTML요소를 취득할 때는 순서상 “취득할 요소”가 “요소 취득 명령어” 이전에 있어야 한다.
익명함수로 연결하는 방식
<button id="bt">기본 이벤트</button>
<script>
var a = document.getElementById("bt");
a.onclick = function(){
alert('출력');
}
</script>HTML요소를 취득할 때는 순서상 “취득할 요소”가 “요소 취득 명령어(getElementById)” 이후에 오면 반드시 load이벤트를 적용해야 한다.
화면 로딩이 완료된 이후에 실행 - onload는 화면별로 1개만 사용할 수 있다.
<script>
window.onload = function(){
var a = document.getElementById("bt");
a.onclick = function(){
alert('출력');
}
}
</script>
<button id="bt">기본 이벤트</button>
표준 이벤트 모델
표준 이벤트 모델은 객체.addEventListener(이벤트, 함수) 방식으로 연결한다.
두가지 방법이 있다.
기본적인 방법
<button id="btn">표준 이벤트</button>
<script>
//표준 이벤트는 동일한 이벤트를 체이닝이 가능하다
var btn = document.getElementById("btn");
btn.addEventListener('click',aaa)
//1st방법
function aaa(){
console.log('표준 이벤트');
}
</script>익명함수를 사용한 방법
<button id="btn">표준 이벤트</button>
<script>
//표준 이벤트는 동일한 이벤트를 체이닝이 가능하다
var btn = document.getElementById("btn");
//익명함수를 사용하는방법
btn.addEventListener('click',function view(){
console.log('표준 이벤트');
})
//1st방법
// function aaa(){
// console.log('표준 이벤트');
// }
</script>
표준 이벤트는 동일한 이벤트를 체이닝할 수 있는 이벤트 모델이다
<button id="btn">표준 이벤트</button>
<script>
//표준 이벤트는 동일한 이벤트를 체이닝이 가능하다
var btn = document.getElementById("btn");
//익명함수를 사용하는방법
btn.addEventListener('click',function view(){
console.log('표준 이벤트');
})
btn.addEventListener('click',function view(){
console.log('표준 이벤트');
})
btn.addEventListener('click',function view(){
console.log('표준 이벤트');
})
</script>