PGR21.com
PGR21.com

✕

24시간 동안 보지 않기
질문 게시판
- PGR21 관련된 질문 및 건의는 [건의 게시판]을 이용바랍니다.
- (2013년 3월 이전) 오래된 질문글은 [이전 질문 게시판]에 있습니다.
통합 규정을 준수해 주십시오. (2015.12.25.)
전체 질문 삭제예정
Date 2023/10/12 17:19:15
Name ArcanumToss
Subject [질문] 자바스크립트 질문 (수정됨)
https://pgr21.com/qna/173046 삭게로!
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를 넣으면 되는 거였다니~~!!!!
하..... 고맙습니다.
긴 씨름이 끝났네요~~~~
getout
해시 아이콘
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
수정 아이콘
참고사이트입니다.
https://developer.mozilla.org/ko/docs/Web/API/Element/click_event#%EC%98%88%EC%A0%9C
목록 삭게로! 맨위로
번호 제목 이름 날짜 조회
173149 [삭제예정] 경력직 이직자가 3개월 수습 탈락하는 케이스 [26] 삭제됨8554 23/10/19 8554
173148 [질문] 이사 견적 적당한지 봐주실 분? [4] Pika488367 23/10/19 8367
173147 [질문] 미루는 습관이 병인가요? [24] beloved9022 23/10/19 9022
173146 [질문] 사시교정(눈) 해보신 분 계실까요?? [4] 머대리7867 23/10/19 7867
173145 [질문] 노트북 사용에 불편함이 적은 시계줄? [10] 크로플8159 23/10/19 8159
173144 [질문] 축구 지금 기준 최고의 크랙은 누구일까 [17] 니체8135 23/10/19 8135
173142 [질문] 안동여행 당일치기 데이트코스 도와주세요 [17] 콩탕망탕7812 23/10/19 7812
173141 [질문] 서울에서 칼로 썰어먹는 버거집 추천해주세요! [7] 오렌지망고7868 23/10/19 7868
173140 [질문] 미니pc로 디아4 돌릴 스펙이 될까요? [6] 알로라나옹8519 23/10/19 8519
173139 [질문] 인터넷 상품제안 받았는데 어떤가요? [6] DogSound-_-*7569 23/10/19 7569
173138 [질문] HDD 중고판매하려는데 데이터 완전삭제 방법이 있을까요? [2] 보리밥8185 23/10/19 8185
173137 [질문] 디아4 플스5 로 할만한가요? [25] 덴드로븀8202 23/10/19 8202
173135 [질문] 와우 클래식 타겟 버프 표시 질문 [1] 메피스토8357 23/10/19 8357
173134 [질문] 수원역에서 열차로 출퇴근하시는분 계실까요? [14] 정체성없이정체된정체10135 23/10/18 10135
173133 [질문] 나이들면 매운거 못먹나요? [25] beloved9445 23/10/18 9445
173132 [질문] 제멋대로 휴면계정이 해제되었는데 해킹일까요? [4] VictoryFood9403 23/10/18 9403
173131 [질문] 신차가 아닌데 임시번호판 달수있나요? [4] Fake10040 23/10/18 10040
173129 [질문] 디아2 룬워드 조합법은 어떻게 알려진걸까요? [16] goldfish11401 23/10/18 11401
173128 [질문] 완제품(?) 데스크탑은 보통 어느 브랜드가 저렴한가요? (추가 PC 견적 문의) [22] 라인하르트9500 23/10/18 9500
173127 [질문] 혹시 주방 세제 개발 일화 들어보신분 계실까요 [7] 시무룩9231 23/10/18 9231
173126 [질문] 묵시적 갱신이고 집주인 연락 두절 상태에서 보증보험에 가입 가능할까요? [4] 베르톨트8436 23/10/18 8436
173125 [질문] 러닝 훈련(존2) 방법 질문드립니다! [5] 꽃보단노인10169 23/10/18 10169
173124 [질문] ‘크’ 갯수 이게 세대?마다 어감이 다른가요? [16] No.99 AaronJudge8190 23/10/18 8190
목록 이전 다음
댓글

+ : 최근 1시간내에 달린 댓글
+ : 최근 2시간내에 달린 댓글
맨 위로