1. <!DOCTYPE html>
2. <html>
3. <head>
4. <meta charset="UTF-8">
5. <title>브라우저 히스토리 이해하기 예제</title>
6. <link rel="stylesheet" href="style.css">
7. </head>
8. <body>
9. <ul class="user-list">
10. <li data-name="jay">jay</li>
11. <li data-name="bbo">bbo</li>
12. <li data-name="harin">harin</li>
</ul>
<script>
15. const userList = document.querySelector('.user-list');
16. userList.addEventListener('click', e => {
17. const liEl = e.target;
18. if (liEl.tagName === 'LI') {
19. const name = liEl.dataset.name;
20. select(userList, liEl);
21. history.pushState(name, null, name);
22. }
23. })
18에서 liEl은 17 e.target으로 userList에서 선택된 객체이다.
liEl의 테그명이 LI일 경우
name은 위에서 선택된 liEl안의 name을 가리키는 liEl.dataset.name
이다.
20 select(userList, liEl); 은
뒤에 만든
function select(ulEl, liEl) {
30. Array.from(ulEl.children)
31. .forEach(v => v.classList.remove('selected'));
32. if (liEl) liEl.classList.add('selected');
}
을 사용해서
userList의 자식을 하나씩 이전에 붙어있던 selected클래스를 제거하고
위에서 타겟으로 선택된 리스트를 가리키는 liEl
을 가져와서 classList에 selected를 추가시켜준다.
21에서 history는 브라우저의 내용을 바꿔준다.
history.pushState(name, null, name);
첫번째 인자name이 두번째 인자인null이 되고 세번째인자가 name이 들어간다.
24. window.addEventListener('popstate', function (e) {
25. const selectedUser = document
26. .querySelector(`.user-list [data-name="${e.state}"]`);
27. select(userList, selectedUser);
28. });
24의 window.addEventListener('popstate',function(e){
}
동작으로 뒤로가기 앞으로가기 할때마다
브라우저 히스토리가 되고 popstate이벤트가 발생한다.
selectedUser를 정의해주고
userList 요소들을 돌며 selected를 제거해주고
selectedUser에 selected를 넣어준다.
29. function select(ulEl, liEl) {
30. Array.from(ulEl.children)
31. .forEach(v => v.classList.remove('selected'));
32. if (liEl) liEl.classList.add('selected');
33. }
전체목록중 하나의 아이템 요소를 선택하는 select정의
Array.from으로 ulEl의 자식들을 얕게 복사해서 배열을 만들고
그것들을 forEach하여
첫번째 인자는 목록요소를 순회하며 selected를 제거
선택된 liEl이 있다면
두번째 인자인 선택된 아이템 요소에 selected 추가.
사용자 목록을 클릭할 때와 popstate 이벤트 시 호출
34. </script>
35. </body>
</html>