qor****
58
2022-06-24 23:41:25
2
141

자바스크립트 이벤트 버블링 관련 질문들입니다.



<form class="d-flex position-relative" role="search" action="/semi/searchList.jsp?sort=sell" onsubmit="savedKeyword();" >
  <div class="input-group">
    <input class="form-control border-warning" id="search" type="text" name="keyword" placeholder="제품검색 ex)소주" onclick="openKeywordList();" onblur="closeKeywordList();" />
    <button class="btn btn-outline-warning" type="submit"><i class="fa-solid fa-magnifying-glass"></i></button>				
  </div>
    <ul class="list-group list-group-flush position-absolute d-none border" id="keyword-list" style="z-index: 2000; left: 0; top: 40px; width: 80%;">							
   </ul>
</form>	
<script src="https://kit.fontawesome.com/2628157b3b.js"></script>
<script type="text/javascript">

	function logout() {
		alert("로그아웃되었습니다.")
		return;
	}
	
	//function searchKeyword() {
	//	location.href="/semi/searchList.jsp?sort=sell&keyword=" + document.querySelector("input[name=keyword]").value	
	//}
	let keywordList = document.getElementById('keyword-list');
	
	let array = new Array();
	
	//let keywords = document.querySelector("input[name=keyword]").value;
	//let text = localStorage.getItem("keyword") || '[]';
	
	function savedKeyword() {
		let keywords = document.querySelector("input[name=keyword]").value;
		let text = localStorage.getItem("keyword") || '[]';
		array = JSON.parse(text);
		
		if (keywords === "") {
			return;
		} else {
		array.unshift(keywords);
		}
		
		text = JSON.stringify(array);
		localStorage.setItem("keyword", text);
	}
	
	function openKeywordList() {
		let text = localStorage.getItem("keyword") || '[]';			
		array = JSON.parse(text);	
		event.stopPropagation()
		let li = document.createElement("li");
		let span = document.createElement("span");
		let button = document.createElement("button");
		
		for (let i=0; i < array.length; i++) {
			
			li = document.createElement("li");
			span = document.createElement("span");
			button = document.createElement("button");
			
			li.classList.add('list');
			li.classList.add('border-top');
			span.innerText = array[i];
			button.innerText = '삭제';
			li.append(span, button);
			keywordList.append(li);
			button.addEventListener('click', deleteKeyword(i) );
		}
		
		document.getElementById('keyword-list').classList.remove('d-none');
	}
	
	function closeKeywordList() {
		document.getElementById('keyword-list').classList.add('d-none');
	}
	
	function deleteKeyword(i) {	
		array.splice(i, 1);
		text = JSON.stringify(array);
		localStorage.setItem("keyword", text);
	}
	
	function deleteAll() {
		localStorage.clear(array);
	    keywordList.innerText = '최근검색어 내역이 없습니다.';
	}
</script>		  			  

최근 검색어 기능을 구현 중입니다.

해당 사진처럼 검색 창 클릭 시 아래로 최근 검색어 리스트가 노출이 되고,그 외 다른 곳을 클릭 시 리스트가 비활성화 되게 구현하고 싶습니다.

1. onclick="openKeywordList();" 실행 시 해당 function안에 있는 button이벤트 핸들러가 같이 작동하면서 locationStorage에 있는 값이 삭제 됩니다. 아무래도 이벤트버블링이 발생한듯한데 stopPropagation을 deleteKeyword(i) 펑션안에 넣어도 해결이 안됩니다.. 어떻게 활용해야 할까요?


2. onclick="openKeywordList();" 실행 시 검색 창 아래로 리스트가 노출되게 했는데 검색 창 클릭할 때마다 같은 리스트가 이어 붙여지는데 어떻게 해야할까요? { once : true }를 활용하면 반복적인 동작이 안돼서 활용이 힘듭니다. 


3. onblur 이벤트를 활용해 onfocus 된 곳외에 클릭 시 검색어 리스트가 비활성화 되게 설정했습니다.

문제는 삭제 버튼을 눌렀을 때 삭제가 작동되기 전에 onblur가 먼저 실행돼서 리스트가 비활성화 됩니다. 어떤 방법을 사용해야 할까요?


개발을 배우기 시작한 지 얼마 안돼서 모르는 게 너무나 많습니다. 질문이 다소 엉성했더라도 양해 부탁드립니다. 감사합니다.



0
  • 답변 2

  • rezigrene
    2k
    2022-06-25 01:35:04

    이것이 문제 입니다. 클릭에 함수를 연결해 주는게 하니라 함수를 실행하고 있네요..

    button.addEventListener('click', deleteKeyword(i) );


    함수를 반환해주는 함수를 만들어서 쓰시면 됩니다.

    button.addEventListener('click', deleteKeywordFunctionMaker(i) );


    function deleteKeywordFunctionMaker(i) {	
      return function() {
        deleteKeyword(i);
      };                    
    }







  • qor****
    58
    2022-06-25 15:19:54

    rezigrene


    감사합니다 해당문제 해결됐습니다!!

  • 로그인을 하시면 답변을 등록할 수 있습니다.