wrap이라는 클래스를 가진 ul 안의 li에 각각 접근하여 클릭 이벤트를 걸어주고 싶을 때.
예시 : 각 li를 클릭하면 li안의 텍스트가 콘솔에 찍힌다.
<html>
<ul class="wrap">
<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>
</ul>
<js>
1. for문을 이용하여 접근
const li = document.querySelectorAll('.wrap li');
for(let i= 0 ; i<li.length; i++){
li[i].addEventListener('click',(e)=>{
console.log(e.target.innerText);
});
};2. forEach를 활용하여 접근
const li = document.querySelectorAll('.wrap li');
li.forEach((v)=>{
v.addEventListener('click',(e)=>{
console.log(e.target.innerText);
})
});
반응형
'개발공부 > Javascript' 카테고리의 다른 글
| [javascript] Arrow Function 이모저모 (0) | 2019.11.05 |
|---|---|
| [javascript] 개행문자(\n) 줄바꿈 처리 및 특정 단어 바꾸기 (0) | 2019.11.04 |
| [javascript] 자바스크립트 이벤트와 이벤트 헨들러 (0) | 2019.11.01 |
| [javascript] splice, slice, split 비교 (1) | 2019.10.25 |
| [javascript ] 자바스크립트 시간, 날짜 가져오기 (2) | 2019.10.13 |