yj o
42
2021-06-11 00:56:04 작성 2021-06-11 00:56:33 수정됨
4
106

자바스크립트 클릭이벤트 질문입니다




document.addEventListener('click',function(){
    const buttons = document.querySelectorAll('.btn');
    buttons.forEach(btn => {
        btn.addEventListener('click', function (e) {
            e.preventDefault();
            let x = e.clientX - e.target.offsetLeft;
            let y = e.clientY - e.target.offsetTop - 70;

            let ripples = document.createElement('span');
            ripples.style.left = x + "px";
            ripples.style.top = y + "px";
            this.appendChild(ripples);

            setTimeout(() => {
                ripples.remove()
            }, 1000);
        })
    })   
})

html 에서 스크립트 안에 작성한걸 js파일에 그대로 옮겼더니 작동을 안해서

document.addEventListener('click',function(){}
안에 작성했더니 작동은 하는데 두번 클릭해야 작동이 되더라구요..
두번 클릭해야 되는건 도큐멘트이벤트때문에 그러는거 같은데.. 저걸 안쓰면 작동을 안해서 
어떻게 해야 한번클릭하면 작동이 되나요?
0
  • 답변 4

  • 상저씨
    170
    2021-06-11 09:21:18

    질문자님이 작성하신코드는 document 영역을 클릭했을 때 버튼에 클릭이벤트를 설정하기 때문에 

    한번클릭 -> 버튼에 이벤트리스너부착

    두번클릭 -> 버튼에 부착된 이벤트리스너 동작입니다.


    document.addEventListener('click',~~) 말고


    window.addEventListener('DOMContentLoaded',~~) 를 사용하셔야겠네요




  • 퀘이사123
    614
    2021-06-11 09:27:13

    일단 document에다가 이벤트리스너를 다는것도 생소하고

    작성하신거 보면 document.addEventListener에 클릭이벤트를 달고 그 안에 버튼등의 변수들과 함수들을

    선언해놓으셨으니 두번클릭해야 동작하는거 같네요.


    문서 어딘가를 클릭해야지만 그때서야 버튼들이 정의가 되고 foreach문이 실행되서 각각의 버튼들에

    이벤트리스너들이 달리고, 그때 다시 눌러야 동작하는거죠.



    document.addEventListener 안에 내용 그냥 밖으로 꺼내면 될 거같은데요.

    document.addEventListener 안에 안넣으면 동작을 안하는건 뭐 전체적인걸 못봐서 추측하자면

    js를 임포트 하는 위치문제일 가능성이 젤 커보이네요.


    html파일 </body> 태그 바로  위에다가 js 임포트 시켜보세요 그럼 될 듯

  • yj o
    42
    2021-06-11 09:47:17

    아 window.addEventListener('DOMContentLoaded',~~) 로 작성하니까 한번클릭해도 작동이 되네요

    이제 막 공부시작해서 막 따라하는중인데 보면 다 html문서안에 작성을 해서 ㅜㅜ

    저는 js파일에 작성하고 싶은데 그냥 코드만 옮기면 작동을 안하더라구요


  • hime
    95
    2021-06-11 12:18:00 작성 2021-06-11 12:18:30 수정됨

    window.addEventListener('DOMContentLoaded',~~)  해당 이벤트는 document가 load가 된 후 ~~ 동작입니다

    js파일을 임포트해서 사용하고 싶고,window load 이벤트도 주지 않을건데 내가 dom의 element들을 select해와서 이벤트를 발생시킬거면  body하단에 넣으시면 되시구요.

    document에도 click이벤트를 걸으셨고 버튼들에도 click을 거셨으니 두번 click해야 이벤트가 발생하는게 맞아요.

    보여주신 코드는 document를 클릭해야만 자식인 버튼들의 이벤트가 활성화 되는거니까요


    html문서를 작성하고 js를 따라하면서 먼저 이해하셔야할점은 돔트리를 기본적으로 아셔야 할 것 같고 내가 작성한 코드가 어떻게, 어떤순서로 동작하는지 정도는 알고 계시면 좋을 것 같아요

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