bubbles / cancelable / dispatchEvent (Uncaught TypeError: Cannot read properties of null)

이런 경우에 조건문 하나 달아주면 편한데..

일단 이건 NULL인 경우였다. 나같은 경우에는 null이 아닌 경우만 필요했기 때문에,

if문을 걸어서 null이 아닌 경우만 해당 이벤트가 발생되도록 하여 완료😶‍🌫️했는데

null이 아니라 값이 있는 경우에는 if문을 js든 jsp든 어디에 걸어줘야 할 것이다.

​

---

나는 팝업창 오픈 후, 페이지 이동하고 재 오픈했을 때 내가 마지막으로 눌렀던 페이지가 포커스되서 나오는 게 문제였는데- 왜 문제였냐면 해당 팝업창 뿐만 아니라 다른 팝업창을 오픈했을 때 1페이지로 포커싱이 안되었기 때문이다. 강제로 클릭이벤트를 발생시켰다. beforedestory 등등 해보았는데 클릭이벤트가 발생하지 않으면 메소드가 캐치를 못했기 때문에 해부려따... 

---

 

해당 이슈를 해결하면서 Chat-GPT랑 대화를 많이 했는데 사실 queryselect 등등 쓰기 귀찮아서.........

해당 아이디의 3번째 li의 a를 클릭하고 싶어! 하면 짜잔 하고 만들어주는데 편-안

​

무튼 그러면서 챗 gpt가 몇 가지 알려줬는데 잘 모르는 거라 한 번 적어본다.

​

bubbles: true // 이벤트가 버블링되도록 설정

cancelable: true // 이벤트가 취소 가능하도록 설정

dispatchEvent

​

bubbles와 cancelable은 Event 객체를 생성할 때 선택적으로 설정할 수 있는 옵션이고,

이러한 옵션은 이벤트의 동작을 제어하는 데 사용된다.

​

다음은 이 두 옵션에 대한 설명

bubbles (선택 사항): 이벤트가 버블링(bubbling)되도록 지정하는 boolean값

버블링은 이벤트가 DOM 트리를 따라 상위 요소로 전파되는 동작을 말하는데

예를 들어, 클릭 이벤트가 발생한 요소에서 상위 요소로 클릭 이벤트가 전파되는 것

기본값은 false입니다. true로 설정하면 이벤트가 버블링됩니다.

​

cancelable (선택 사항): 이벤트가 취소 가능하도록 지정하는 boolean값

취소 가능한 이벤트인 경우 이벤트 핸들러 내에서 event.preventDefault()를 호출하여 이벤트의 기본 동작을 취소할 수 있다. 예를 들어, 클릭 이벤트를 취소 가능하게 설정하면 링크의 클릭 동작을 취소할 수 있음. 기본값은 false이며, true로 설정하면 이벤트가 취소 가능하다.

​

음 생각해보니, 위 옵션 두 개는 굳이 필요해서 안 썼는데 null값 떴을 때 아래 옵션을 선택해서 취소 할 수도 있을 것 같다.