자바스크립트에서 이벤트의 객체를 사용하면 '누가, 언제, 어디서, 무엇을, 어떻게, 왜'를 정의 할 수 있다. 이벤트 리스너 안에 this 키워드를 사용하면 이벤트가 발생한 객체 즉 '누가'를 찾을 수 있다. this 키워드를 사용하면 특정한 이벤트(click 같은)가 실행되었을 때 style을 바꾸는 것도 가능하다.
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
|
<!DOCTYPE html>
<html>
<head>
<title>Document</title>
<script>
window.onload=function(){
document.getElementById('header1').onclick=function(){
this.style.color='red';
this.style.fontSize='50px';
};
};
</script>
</head>
<body>
<h1 id="header1">CLICK-1</h1>
<h1 id="header2">CLICK-2</h1>
<script>
document.getElementById('header2').onclick=function(){
this.innerHTML="클릭-2";
this.style.backgroundColor='blue';
this.style.fontSize='50px';
};
</script>
<h1 id="header3">LOCATION</h1>
<script>
document.getElementById('header3').onclick=function(e){
let event=e||window.event;
document.body.innerHTML='';
for(let key in event){
document.body.innerHTML+='<p>'+key+' : '+event[key]+'</p>';
};
};
</script>
</body>
</html>
|
cs |
this 키워드로 이벤트가 발생한 객체를 찾을 수 있다, 그리고 그 이외의 정보는 이벤트 객체 안에 들어가 있는데, 이것을 알아보기 위에서는 e||window.event이란 코드가 있는데, e가 존재하면 e를 변수 event에 넣고, e가 undefined라면 window.event 속성을 변수 event에 넣는 조건문이다. 코드를 실행하고 LOCATION 텍스트 노드가 들어간 h1태그를 클릭하면 타입부터 시작해서 이벤트에 관련된 모든 정보가 출력이 된다.
이벤트를 강제로 실행 시키는 방법은 간단한데, 이벤트 속성도 속성이고 함수 자료형을 넣기 때문에 메서드와 같다. 메서드를 호출하는 것처럼 이벤트 속성을 호출하면 이벤트를 강제로 실행 시킬수 있다.
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
|
<!DOCTYPE html>
<html>
<head>
<title>Document</title>
<script>
window.onload=function(){
let button1=document.querySelector('.buttonA');
let button2=document.querySelector('.buttonB');
let counter1=document.querySelector('.counterA');
let counter2=document.querySelector('.counterB');
button1.onclick=function(){
counter1.innerHTML=Number(counter2.innerHTML)+1;
};
button2.onclick=function(){
counter2.innerHTML=Number(counter1.innerHTML)+1;
// BUTTON - A의 click 이벤트를 강제 실행
button1.onclick();
};
};
</script>
</head>
<body>
<button class="buttonA">BUTTON - A</button>
<button class="buttonB">BUTTON - B</button>
<h1>Button A - <span class="counterA">0</span></h1>
<h1>Button B - <span class="counterB">0</span></h1>
</body>
</html>
|
cs |
코드에서 보이는 것 처럼 button1.onclick();을 이용해 BUTTON - B를 누를 때 BUTTON - A도 강제로 실행시키는 방법이다. 이 방법 외에도 아래와 같은 방법으로 BUTTON - B를 누를 때 CounterA의 횟수도 증가시키게 만들 수 있다.
|
1
2
3
4
|
button2.onclick=function(){
counter2.innerHTML=Number(counter2.innerHTML)+1;
counter1.innerHTML=Number(counter1.innerHTML)+1;
};
|
cs |
물론 이 코드보다 위에 있는 button1.onclick();을 사용하는 방법이 좀 더 간단하다.
'프로그래밍 공부 > JavaScript' 카테고리의 다른 글
| JavaScript - DOM Level 2 이벤트 모델 (0) | 2019.12.20 |
|---|---|
| JavaScript - 인라인 이벤트 모델, 디폴트 이벤트 제거, 이벤트 전달 (0) | 2019.12.20 |
| JavaScript - 고전 이벤트 모델(기본 이벤트 모델) (0) | 2019.12.19 |
| JavaScript - 이벤트 종류 (0) | 2019.12.19 |
| JavaScript - 이벤트 개요 (0) | 2019.12.18 |
