1. 왜 안되는지 궁금했던 코드

내가 btn을 눌러서 arrr()이 실행되기 전까지 btn2는 없는 애임. 근데 btn2.onclick = clrhi; 얘는 스크립트 불러오는 과정에서 이미 먼저 실행돼버림!

아무 의미 없는 이벤트 핸들러가 만들어진 후에 btn2가 생겨봤자 저절로 연결되는 일은 없었다는 것.

2. 고친 코드

여기선 btn2가 먼저 생긴 후에 이벤트 핸들러가 생성되니 잘 동작해씀. 근데 알고 보니 이것도 엄연히 따지면 잘못된 코드였음.

왜냐면 querySelector로 btn2를 불러오지도 않았는데 사용해버린 것. 원래는 에러가 떠야 정상인데 브라우저에서 오래된 규칙에 의해 도와준 것임!!(지피티랑 프갤러가 알랴줌)

id가 있는 요소는 브라우저가 자동으로 전역변수로 만들어 준다고 함. (즉, window.btn2가 저절로 생긴 것)

결론:  let btn2 = document.querySelector(#btn2)로 먼저 가지고 온 후에 안전하게 사용하도록 하자.

3. addEventListener

쌉고수 프갤러가 이벤트리스너를 사용하면 내가 원하는 코드를 만들 수 있다고 말해줘서 찾아봐씀.

부모인 sf에 클릭 이벤트리스너 달아주면 sf 내부에서 클릭이 발생할 때 감지하는데, 이걸 이벤트 위임이라고 함!

sf.addEventListener("click", function(event) {

if (event.target.id === "btn2") {

clrhi();

}

});

이렇게 하면 클릭된 녀석의 id가 btn2일 때만 clrhi()가 실행되도록 할 수 있음.

그리고 이렇게 하면 sf한테 이벤트를 위임해 줬으므로 btn2가 나중에 생성되어도 이벤트를 감지할 수 있다는 것!!!!!!!!!!!

내가 원했던 게 바로 이거였음 ㅠㅠㅠ 나중에 만들어졌다고 이벤트 감지도 못하는 그런 멍청한 코드 말고(물론 멍청한 건 나였음.)

뒤늦게 생성돼도 이벤트 잘 알아먹는 실용적이고 작고 귀여운 코드.

프린이 질문에 도움 주신 프갤러님들께 압도적 감사드리며...

혹시나 나같은 생각 하는 사람 있을까 싶어서 나도 볼 겸 정리해봤음 ㅎ.ㅎ

모두모두 복 받으시고 즐거운 코딩 하세용!