동적으로 생성된 태그와 복수의 태그에 이벤트 거는 방법

동적으로 생성된 태그에 이벤트 거는 방법

개발자로 일하면서 혹은 공부하다가

이거 알면 진짜 편했던 건데..  이거 때문에 몇 시간씩 고생한 경우가 종종 있었거든요..

 

저도 처음에 이걸 도대체 어떻게 해야 하나? 무슨 원리로 이렇게 되는 건가?

삽질하면서 찾아봤던걸 정리해봅니다.

 

어떤 경우에 찾아보나요? ( 제가 이러다가 찾아서..)

1. 동적으로 태그를 생성할 때(clone 떠서 만들 때..) 이벤트가 안 걸려요 ㅠㅠ 
2. 규칙이 있는 복수의 태그가 동일한 규칙으로 작동해서 한 번에 이벤트를 걸고 싶어요
3. 같은 태그에 이벤트가 중복으로 걸려요 ㅠㅠ
4. JS를 모듈화 하고 싶습니다.

어떤 경우에 사용하나요?

1. 동적으로 생성된 태그에 이벤트를 걸 때
2. 복수의 태그에 동일한 이벤트를 걸 때
3. 사용자 태그로 정의하여 그 태그로 시작하는 모든 항목에 무언가를 할 때

1번, 2번, 3번 모두 사용하는 방법이며 3번은 약간 심화과정입니다.

 

 

 

왜 이런 문제가 생기나요?

기본적으로 JS, JQuery에서 이벤트는 적용 시점을 기준으로 적용됩니다.

그럼 동적으로 생성되는 태그들은 적용 시점에 태그가 없었기 때문에 이벤트가 안 걸립니다.

 

이벤트 한 번에 주고 싶어요!

그래서 이벤트를 동적으로, 복수로 먹이는 방법이 있습니다. 저도 처음엔 몰라서 이벤트 중복으로 먹이고

태그에 이벤트 따로 사용하고 등등 삽질을 많이 했습니다.

 

복수 이벤트

element[속성~=값]	해당 값이 특정 단어로 시작
element[속성^=값]	특정 값으로 시작하는 객체
element[속성$=값]	특정 값으로 끝나는 객체
element[속성*=값]	특정 값을 포함하는 문서 객체

 

동적 태그 이벤트

$(영역).on("이벤트", 선택 요소, 실행할 함수) 형태로 이벤트를 만들어주시면 동적으로 이벤트가 먹힙니다.

주석을 거신 후 하나씩 실행을 해보셔야 정확합니다.

그냥 실행하시면 지금 1번 버튼엔 이벤트가 4개나 걸려있는 상황이라서 엄청 많이 생겨요 

 

 

 

마무리

3번의 사용자 태그로 정의하여 무언가 하는 건 상당히 유용합니다.

이벤트의 종류를 미리 정의할 수 있으며, 데이터베이스에서 긁어온 값을 뿌려줄 때도 사용할 수 있습니다.

다양하게 활용되죠. 라스트로는 코드 제공~

JS_01_DYNAMIC TAG EVENT.zip

0.03MB