자바스크립트 event(이벤트)

자바스크립트 event

(예제 : Vanilla Javascript = 순수 자바스크립트 방식)

1. 이벤트의 정의 : 이벤트란 웹브라우저에서 사용자에 의해 일어나는 일련의 행위들을 인해 발생되어 지는것들을 뜻합니다.

2. 이벤트의 종류 : 키 이벤트, 마우스 이벤트, 포커스 이벤트, 폼 이벤트, 클립 보드 이벤트, UI 이벤트 들이 있습니다.

자세한건 이벤트 참조 | MDN (mozilla.org) 

3. 이벤트 등록(실행 = 이벤트 핸들러) 방식

1) inline : 이벤트할 대상의 태그의 속성으로 지정하여 실행

 <input type="button" onclick="alert('이벤트실행1')">클릭</div>
 <button onclick="showEvent()">클릭</div>
 <input type="button" value="안녕하세요" onclick="hello(this.value)">클릭</div>
    
  <script>
    function showEvent() {
      alert("이벤트 실행2");
    }
    
    function hello(str) {
      alert(str);
    }
  </script>
  결과
  "이벤트실행1"
  "이벤트실행2"
  "안녕하세요" // 이벤트 발생하는 태그의 속성(this.value)를 참조하여 실행

2) properties : 이벤트할 대상의 객체의 properties(속성)으로 실행 하며, 하나의 이벤트 핸들러만 처리 가능

<button class="button">클릭<button>

<script>
const button = document.querySelector('.button');

// 첫번째 이벤트 핸들러
button.onclick = function() {
	alert('버튼 이벤트 실행1');
};
    
// 두번째 이벤트 핸들러
button.onclick = function() {
	alert('버튼 이벤트 실행2');
};
</script>
결과 :
버튼 이벤트 실행2
// 첫번째 이벤트 핸들러 무시되고 두번째 이벤트 핸들러만 실행됨

3) addEventListener :   하나의 이벤트 대상에 여러개의 이벤트를 추가 할수 있으며,  화면에 동적인 기능을 구현하기 위해 사용합니다.

기본문법 : 이벤트할 대상.addEventListener("이벤트 종류", 함수명);

<button>클릭</button>

<script>
let button = document.querySelector('button');

// button 이라는 selector 태그를 click 시 appendData 함수를 실행하도록 한다
button.addEventListener('click', appendData);

function appendData(event) {
	console.log(event.target.innerHTML);
}
</script>
결과 :
"클릭"

4. 이벤트 전달 방식

1) 이벤트 버블링 : 이벤트가 발생했을 때 클릭을 시도한 요소 뿐만 아니라  상위의 요소들에게 전달되는 방식을 의미합니다. (html의 요소는 기본적으로 dom 트리 구조로 되어 있기 때문에 상위 dom 트리로 접근 가능함)

<div class="item1"> item1
	<div class="item2"> item2
		<div class="item3"> item3
		</div>
	</div>
</div>

<script>
let divs = document.querySelectorAll('div');
divs.forEach(function(div) {
	div.addEventListener('click', logs);
});

function logs(event) {
	console.log(event.currentTarget.className);
}
</script>

결과 :
1) class명이 item3을 클릭하면  (해당 요소와 바로 상위 요소 2개가 역순으로 실행)
item3
item2
item1

2) class명이 item2을 클릭하면  (해당 요소와 바로 상위 요소 1개가 역순으로 실행)
item2
item1

2) class명이 item1을 클릭하면  (해당 요소만 실행)
item1

2) 이벤트 캡쳐 : 이벤트가 발생했을때 클릭한 상위 요소에서 하위 요소로 진행되는것으로 이벤트 버블링에 반대되는 방식 입니다.

<div class="item1"> item1
	<div class="item2"> item2
		<div class="item3"> item3
		</div>
	</div>
</div>

<script>
let divs = document.querySelectorAll('div');
divs.forEach(function(div) {
	div.addEventListener('click', logEvent, {
		capture: true // 기본은 false
	});
});

function logs(event) {
	console.log(event.currentTarget.className);
}
</script>

결과 :
1) class명이 item3을 클릭하면  (해당 요소와 바로 하위 요소 2개순으로 실행)
item1
item2
item3

2) class명이 item2을 클릭하면  (해당 요소와 바로 하위 요소 1개순으로 실행)
item1
item2

2) class명이 item1을 클릭하면  (해당 요소만 실행)
item1

3) 이벤트 전파 중지(Event.stopPropagation) : 이벤트 버블링, 캡쳐가 전파되는것을 막는것으로 클릭한 요소의 이벤트만 실행합니다.

<script>
// 이벤트 버블링
let divs1 = document.querySelectorAll('div');
divs1.forEach(function(div) {
	div.addEventListener('click', logs1);
});


// 이벤트 캡쳐
let divs2 = document.querySelectorAll('div');
divs2.forEach(function(div) {
	div.addEventListener('click', log2, {
		capture: true // 기본은 false
	});
});

function logs1(event) {
    event.stopPropagation();
	console.log('버블링', event.currentTarget.className); 
}

function logs2(event) {
    event.stopPropagation();
	console.log('캡쳐', event.currentTarget.className); 
}

</script>

결과 :
버블링 item3 // 클릭한 요소에 해당되는 값만 가져온다(item3클릭시)
버블링 item2 // 클릭한 요소에 해당되는 값만 가져온다(item2클릭시)
버블링 item1 // 클릭한 요소에 해당되는 값만 가져온다(item1클릭시)

// 클릭한 요소와 상관없이 상위 첫번째 요소에 해당되는 값만 가져온다
캡쳐 item1 
캡쳐 item1
캡쳐 item1

4) 이벤트 위임 : 이벤트 버블링과 이벤트 캡쳐를 이용을 적절히 이용하여 처리하는 방식으로, 이벤트 마다 EventListener 등을 작성할 필요 없이 하나의 EventListener로 상위 요소에서 하위 요소들의 이벤트를 제어하는 방식입니다.

* 하위 요소 이벤트 관리 예제
<ul id="parent">
	<li id="post-1">Item 1</li>
	<li id="post-2">Item 2</li>
	<li id="post-3">Item 3</li>
	<li id="post-4">Item 4</li>
	<li id="post-5">Item 5</li>
	<li id="post-6">Item 6</li>
</ul>

<script>
// id가 parent인 상위 요소에 클릭 이벤트를 걸어주고 하위 요소 "LI" 클릭시 해당 속성값을 표시
document.getElementById("parent").addEventListener("click", function(e) {
	if(e.target && e.target.nodeName == "LI") {
		// List item found!  Output the ID!
		console.log("List item ", e.target.id.replace("post-", ""), " was clicked!");
	}
});
</script>

결과 : 
List item  1  was clicked!
List item  2  was clicked!