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
수정 아이콘
목록 삭게로! 맨위로
번호 제목 이름 날짜 조회
173193 [질문]  다들 스트리밍 뭐 쓰시나요? [19] 그때가언제라도10067 23/10/22 10067
173192 [질문] 단기간(두달) 생존 영어회화 빠르게 늘리는 방법이 있을까요? [7] 마로니에10314 23/10/22 10314
173191 [질문] 전문적인 미술 평론가분들은 거장의 작품을 알아보나요? [5] 칭찬합시다.8600 23/10/22 8600
173190 [질문] 코로나 팬대믹과 다음 레뽀8018 23/10/22 8018
173189 [질문] 알리에서 파는 알루미늄 키보드, 이런 것들 쓸만한가요? [13] 교대가즈아10137 23/10/22 10137
173188 [질문] 손흥민의 epl 위치를 전 레전드들과 비교하면, [22] 강릉신12695 23/10/22 12695
173186 [질문] 체중계의 수명에 몸무게가 관련이 없을까요? [22] 제드10402 23/10/22 10402
173185 [질문] 무선충전기 작동 원리 잘 아시는 이과인 계신가요? [2] 니체11327 23/10/22 11327
173183 [질문] 삼국지 읽어보고싶은데 전략 삼국지 괜찮나요? [17] 라리10692 23/10/22 10692
173181 [질문] 그래픽카드 드라이버 업데이트 후 영상의 색이 이상해졌습니다. [2] kafka10471 23/10/22 10471
173180 [질문] 3대 가족, 1월 동남아 여행지 좀 [7] Meister8171 23/10/22 8171
173179 [질문] 윈도우PC에서 아이폰을 작동 시킬 수 있는 프로그램이 있나요? 시라노 번스타인7694 23/10/21 7694
173178 [질문] 클래식 판타지 웹소설 추천 [6] 크음8096 23/10/21 8096
173177 [질문] 랑그릿사모바일_복귀 유저 진로 조언 좀 부탁 드립니다. [6] 원스8339 23/10/21 8339
173176 [질문] 화장실 배기구 여는법 아시는분 계신가요? [2] 크음7505 23/10/21 7505
173175 [질문] 디아4 플스5 2인 플레이 가능한 조건이 궁금합니다. [1] 덴드로븀7714 23/10/21 7714
173174 [질문] 현재 월즈 현역중에 페이커 데프트급 화석 누가 살아남았나요? [11] backtoback8742 23/10/21 8742
173172 [질문] 지금 아이폰 사전예약 어디가 제일 좋나요? [3] 사이시옷7129 23/10/21 7129
173171 [질문] 중고차 구매 절차를 잘 모르겠습니다. [3] 아밀다8746 23/10/21 8746
173170 [질문] 제주도 1박2일 맛집 추천 부탁드립니다(3인가족) [4] EY8222 23/10/21 8222
173169 [질문] 파이썬 머신러닝(텐서플로우)용 리눅스 설치 [17] 엔지니어10102 23/10/21 10102
173168 [질문] 과속단속 카메라 설치 기준에 대해 아시는분이 계실지요 [5] 앙몬드8940 23/10/21 8940
173167 [질문] 자바스크립트 질문입니다. [4] ArcanumToss9243 23/10/21 9243
목록 이전 다음
댓글

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