PGR21.com
- PGR21 관련된 질문 및 건의는 [건의 게시판]을 이용바랍니다.
- (2013년 3월 이전) 오래된 질문글은 [이전 질문 게시판]에 있습니다.
통합 규정을 준수해 주십시오. (2015.12.25.)
Date 2023/10/12 17:19:15
Name ArcanumToss
Subject [질문] 자바스크립트 질문 (수정됨)
1.
body에는 다음과 같은 태그를 작성합니다.

<body>
        <img src="1.gif">
        <img src="2.gif">
        ...
        <img src="999999.gif">
</body>


2.
javascript는 대충 다음과 같이 작성합니다.

<script>
window.addEventListener("load", () => {
        imgs = document.getElementsByTagName(`img`);

        for(var i = 0; i < imgs.length; i++){
                imgs[i].addEventListener("click", () => {
                        // 클릭한 element의 this나 index를 알면 되는데...
                        // '1.gif'를 클릭했을 때 실행할 내용.
                        // '2.gif'를 클릭했을 때 실행할 내용.
                        alert("이미지를 클릭함");
                });
        }
});
</script>


이미지를 click하면 "imgs[i].addEventListener("click", ............"이 있으니 click 이벤트를 감지해서 alert("이미지를 클릭함");이 실행됩니다.
여기서 질문입니다.
문제는 '1.gif', '2.gif' 중 어떤 이미지를 눌렀는지 판별할 수 없다는 것입니다.
물론 태그를 다음과 같이 작성하면 되긴 하겠죠?

<img src="1.gif" onclick="img_click(this);">
<img src="2.gif" onclick="img_click(this);">
...
<img src="999999.gif" onclick="img_click(this);">

그리고 이것에 맞춰서 자바스크립트를 다음과 같이 작성하고요.
function img_click(t) {
        alert(t.src);
}

그런데 제가 궁금한 것은 이 방법을 쓰지 않고도 이 방법과 같은 효과를 낼 수 있는 방법입니다.

물론, 편법적으로 imgs[i].outerHTML = imgs[i].outerHTML.replace(`.gif">`, `.gif" onclick="img_click(this);"`)와 같이 하는 방법이 있긴 하겠지만 이렇게 하느니 태그에 onclick="img_click(this);"를 삽입하는 게 훨씬 효율적이겠죠.

idx= [].indexOf.call( imgs, 디스 )와 같은 라인으로 작성하려 해도 디스(this)는 필요한 터라...
방법이 있을까요?
그냥 다음과 같이 작성하는 게 유일한 방법일까요?

<img src="1.gif" onclick="img_click(this);">
<img src="2.gif" onclick="img_click(this);">
...
<img src="999999.gif" onclick="img_click(this);">

통합규정 1.3 이용안내 인용

"Pgr은 '명문화된 삭제규정'이 반드시 필요하지 않은 분을 환영합니다.
법 없이도 사는 사람, 남에게 상처를 주지 않으면서 같이 이야기 나눌 수 있는 분이면 좋겠습니다."
멍충이
23/10/12 17:30
수정 아이콘
imgs[i].addEventListener("click", (e) => {
console.log(e.target.src);
});
ArcanumToss
23/10/12 17:38
수정 아이콘
오!!!!!
e.target
요 방법이 있었군요.
e.src로 안 되길래 모르겠어서 질문을 올렸는데 target를 넣으면 되는 거였다니~~!!!!
하..... 고맙습니다.
긴 씨름이 끝났네요~~~~
23/10/12 17:46
수정 아이콘
본문 내용과는 약간 거리가 있는 내용이긴 하지만 <img> 요소 개수가 많을 경우 각각의 <img> 요소에 일일이 이벤트 리스너를 붙이지 않고, <img> 들을 감싸고 있는 부모 요소 (저기서는 <body>)에만 이벤트 리스너를 붙여도 처리할 수 있습니다.

https://ko.javascript.info/event-delegation

document.body.addEventListener("click", (e) => {
if (e.target.tagName !== "IMG") return;
// event.target으로 원하는 작업 하기
})
ArcanumToss
23/10/12 18:13
수정 아이콘
그렇군요.
if (e.target.tagName !== "IMG") return;
// event.target으로 원하는 작업 하기
})

e.target을 쓰는 방법을 알고 나니 이런 방법도 쓸 수 있다는 걸 알게 되네요.
여러 방법들 중에 제가 만드는 컨텐츠에 가장 효율적인 방법을 좀더 생각해 볼 수 있게 됐습니다.
고맙습니다.
ArcanumToss
23/10/12 19:14
수정 아이콘
이 방법을 테스트 해 보니 img를 누르면 해당 img에 해당하는 기능을 실행하고 img 바깥(div)을 클릭하면 div의 display를 none으로 바꾸는 경우에 쓰면 딱이네요.
이 방법을 알기 전에는 다른 방법으로 구현했었는데 이게 훨씬 심플하군요.
덕분에 더 편한 방법을 찾았네요~ : )
당근병아리
23/10/20 10:37
수정 아이콘
목록 삭게로! 맨위로
번호 제목 이름 날짜 조회
173204 [질문] 아이폰 애플케어 액정 갈기 한번만 되는건가요? [2] 희원토끼7870 23/10/23 7870
173203 [질문] 법인 업무용 폰 개통하려면 어떻게 해야할까요? [6] APONO7936 23/10/23 7936
173202 [질문] 뮤지컬 골라주세요 [8] 어센틱7192 23/10/23 7192
173201 [질문] 여성 패딩 고급 브랜드에는 어떤게 있나요? [7] 기술적트레이더7794 23/10/23 7794
173200 [질문] 요리할 때 간 안맞는 경우 [16] Alfine8230 23/10/23 8230
173199 [질문] 자동차 보험공업소 수리비를 받았는데, 비교할 방법이 있나요? [3] Fangga6832 23/10/23 6832
173198 [질문] 친구의 부친상 안내를 맡았어요. 연락을 어디까지해야할까요. [4] 계란후라이8357 23/10/23 8357
173197 [질문] 헬스장 환불받았는데 제가 진상이었을까요 [16] 탄야8903 23/10/23 8903
173196 [질문] 맥북은 어떻게 사는게 가장 싼가요? [8] 늘새로워7158 23/10/23 7158
173194 [질문] 갤럭시s23 vs s24 [26] AsuRa13089 23/10/22 13089
173193 [질문]  다들 스트리밍 뭐 쓰시나요? [19] 그때가언제라도9871 23/10/22 9871
173192 [질문] 단기간(두달) 생존 영어회화 빠르게 늘리는 방법이 있을까요? [7] 마로니에10040 23/10/22 10040
173191 [질문] 전문적인 미술 평론가분들은 거장의 작품을 알아보나요? [5] 칭찬합시다.8404 23/10/22 8404
173190 [질문] 코로나 팬대믹과 다음 레뽀7798 23/10/22 7798
173189 [질문] 알리에서 파는 알루미늄 키보드, 이런 것들 쓸만한가요? [13] 교대가즈아9766 23/10/22 9766
173188 [질문] 손흥민의 epl 위치를 전 레전드들과 비교하면, [22] 강릉신12397 23/10/22 12397
173186 [질문] 체중계의 수명에 몸무게가 관련이 없을까요? [22] 제드10102 23/10/22 10102
173185 [질문] 무선충전기 작동 원리 잘 아시는 이과인 계신가요? [2] 니체10955 23/10/22 10955
173183 [질문] 삼국지 읽어보고싶은데 전략 삼국지 괜찮나요? [17] 라리10414 23/10/22 10414
173181 [질문] 그래픽카드 드라이버 업데이트 후 영상의 색이 이상해졌습니다. [2] kafka10165 23/10/22 10165
173180 [질문] 3대 가족, 1월 동남아 여행지 좀 [7] Meister7955 23/10/22 7955
173179 [질문] 윈도우PC에서 아이폰을 작동 시킬 수 있는 프로그램이 있나요? 시라노 번스타인7435 23/10/21 7435
173178 [질문] 클래식 판타지 웹소설 추천 [6] 크음7818 23/10/21 7818
목록 이전 다음
댓글

+ : 최근 1시간내에 달린 댓글
+ : 최근 2시간내에 달린 댓글
회원정보 보기
닫기
회원정보 보기
닫기
회원정보 보기
닫기
회원정보 보기
닫기
회원정보 보기
닫기
회원정보 보기
닫기
회원정보 보기
닫기
회원정보 보기
닫기
회원정보 보기
닫기
회원정보 보기
닫기
회원정보 보기
닫기
회원정보 보기
닫기
회원정보 보기
닫기
회원정보 보기
닫기
회원정보 보기
닫기
회원정보 보기
닫기
회원정보 보기
닫기
회원정보 보기
닫기
회원정보 보기
닫기
회원정보 보기
닫기
회원정보 보기
닫기
회원정보 보기
닫기
회원정보 보기
닫기
회원정보 보기
닫기
회원정보 보기
닫기
회원정보 보기
닫기
회원정보 보기
닫기
회원정보 보기
닫기
회원정보 보기
닫기
회원정보 보기
닫기