PGR21.com
PGR21.com

✕

24시간 동안 보지 않기
질문 게시판
- PGR21 관련된 질문 및 건의는 [건의 게시판]을 이용바랍니다.
- (2013년 3월 이전) 오래된 질문글은 [이전 질문 게시판]에 있습니다.
통합 규정을 준수해 주십시오. (2015.12.25.)
전체 질문 삭제예정
Date 2023/10/12 17:19:15
Name ArcanumToss
Subject [질문] 자바스크립트 질문 (수정됨)
https://ppt21.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
목록 삭게로! 맨위로
번호 제목 이름 날짜 조회
173124 [질문] ‘크’ 갯수 이게 세대?마다 어감이 다른가요? [16] No.99 AaronJudge8155 23/10/18 8155
173123 [질문] LOL 솔랭 매칭 시스템 질문입니다. [1] 잉차잉차7836 23/10/18 7836
173122 [질문] 차단한 회원이 닉넴을 변경하시면 저도 수동으로 바꿔야하나요? [4] 콩돌이7539 23/10/18 7539
173121 [질문] 지인의 롤드컵 스위스 스테이지 취켓팅 질문 [3] SAS Tony Parker 8018 23/10/18 8018
173120 [질문] 그래픽카드 업그레이드 관련 질문 드립니다. [3] 황신강림8171 23/10/18 8171
173119 [질문] 홋카이도 2박3일 여행 질문드립니다. [22] Aiurr10146 23/10/18 10146
173118 [질문] (보증금) 지연이자를 청구하는게 맞을까요? 의견구합니다. [14] 양스독9374 23/10/18 9374
173117 [질문] 미니멀 리스트에게 선물 구매 질문 [6] 따식이8375 23/10/18 8375
173116 [질문] 카메라 영상 촬영용 짐벌 및 렌즈 추가 구입 문의드립니다. [6] 하얀사신7936 23/10/18 7936
173115 [질문] 해외 가족여행지 추천부탁드립니다. [12] 호기심남8988 23/10/18 8988
173114 [질문] 구매한지 한 8년된 컴터가 갑자기 부팅이 안 되거나 윈도 들어가면 화면이 멈추네요. [13] 바카스8590 23/10/17 8590
173113 [질문] 코비 vs 이치로 누가 더 독한 선수였을까요? [7] 한이연9961 23/10/17 9961
173112 [삭제예정] 감사합니다. [7] 삭제됨8223 23/10/17 8223
173111 [질문] 오늘 서울에 뭐 발사 소식 있나요? [9] 니체9425 23/10/17 9425
173110 [질문] 현 KBO 감독 중에 욕 안먹는 감독이 있나요? [21] 피터파커8437 23/10/17 8437
173109 [삭제예정] 체불임금에 대한 연체이자를 어떻게 산정해야 할까요? [6] 삭제됨6767 23/10/17 6767
173108 [질문] 도쿄 3박 4일 여행인데 많이 빡셀가요? [9] Alfine10037 23/10/17 10037
173107 [질문] 도쿄 긴자쪽 식당 추천부탁드립니다. [8] 민서9524 23/10/17 9524
173106 [질문] 혹시 콘서트 좌석 측면4열 VS 정중앙 15열 어떤게 좋을까요 [3] 제드8749 23/10/17 8749
173105 [질문] 네비별로 도착시간 차이가 꽤 큰데 뭐가 정확한가요 [13] 데비루쥐11060 23/10/17 11060
173104 [질문] 베란다에 김치냉장고 설치해도 될까요? [13] 슬론11208 23/10/17 11208
173103 [질문] 마케팅 책 추천 부탁 드려요. [8] realwealth8627 23/10/17 8627
173102 [질문] 주말에 세탁기 사러 가려고 하는데요 [9] Jiny8564 23/10/17 8564
목록 이전 다음
댓글

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