이벤트 위임
<html>
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
<li>6</li>
<li>7</li>
<li>8</li>
<li>9</li>
<li>10</li>
</ul>
</html>위와 같은 코드가 있다고 해보자 ul 안에 모든 li에게 공통적으로 처리해야 할 작업이 있다고 가정을 해보자
좋지않은 방법
<script>
const lis = document.querySelectorAll('li');
lis.forEach(li => {
li.addEventListener('click', () => {
li.classList.add('selected');
});
});
</script>querySelectorAll을 이용하여 모든 li를 가져와 forEach를 사용해서 각각의 li에 class를 추가한다.
좋은방법
<script>
const ul = document.querySelector('ul');
ul.addEventListener('click', event => {
if (event.target.tagName == 'LI') {
event.target.classList.add('selected');
}
});
</script>부모요소인 ul을 가져오고 가져온 ul에 이벤트를 등록해 event.target의 tagName이 LI와 같다면 class를 추가하겠다.
또한 여기서 주의해야 할 점은 tagName은 항상 대문자로 값을 반환하기 때문에 태그 이름은 대문자로 작성해야 한다.
동적요소 이벤트 처리
<html>
<div class = "home">
</div>
</html>
<script>
const home = document.queryselector(".home");
function addItem(className, num, imgPath) {
const item = document.createElement("img");
home.apeendChild(item);
}
addItem("carrot", "5", "img/carrot.png");
</script><script>
home.addEventListener("click", (e) => {
if (e.target.className === "carrot") {
e.target.style.visibility = "hidden";
}
</script>위와같이 동적요소(createElement)를 이벤트 처리할 때 동적요소를 담고 있는
요소에 이벤트를 걸어서 e.target 을 이용한다.
Dreams don't run away It is always myself who runs away.