DevOps

(꿀팁)구글태크를 위한 [자바스크립트] 버튼 이벤트 수집 스니펫

IT오이시이 2022. 5. 12. 07:16
728x90

(꿀팁)구글태크를 위한 [자바스크립트] 버튼 이벤트 수집 스니펫


* 스니펫(snippet)은 무엇인까 ?

스니펫은 재사용 가능한 소스 코드, 기계어, 텍스트의 작은 부분을 일컫는 프로그래밍 용어입니다.

이왕 나온 스니펫이 무엇인지는 간단히 정리해 봅니다.
스니펫을 단순이 작은 소스코드라기 보다  정보를 표현하고 관리하는  단위에서 시작되는 부분으로 이해를 해야 할 것 같습니다.  프로그래밍 적으로는 반복되는 소스를 하나의 작은 소스 형태로 만들어 진 것을 말하고 있습니다.   약간 혼동되는 부분은 HTML 표현상에 작은 조각으로 존재하는 독립적인 소스 , 컨텐츠의 표현 단위로 인식을 하면 혼란이 덜 할 듯 합니다.

검색에서에서는 스니펫을 다음과 같이 표현을 합니다.
1) 일반적인(regular) 스니펫은   URL, 제목, 세부 설명으로 구성된 검색 결과의 단위라고도 합니다.
2) 리치(rich) 스니펫 은 일반 스니펫에 평점이나, 사진, 추가정보를 표현한 내용입니다.
3) 추천(featured) 스니펫은  추천 검색의 적합한 정보를 요약하여 제공하는 것으로 글과 그림등을 문단(Paragraph) 로 구성한 것입니다.

[자바스크립트] 버튼 이벤트 수집 스니펫

일단 스니펫은 여기 까지 설명을 하고 자바스크립트로 HTML의 요소를 다이나믹하게 변경하거나 이벤트 처리를 연결하는 방법들을 소개 드립니다.

* 스니펫을 HTML 페이지의 <body> 태그에 추가하여 버튼을 표시합니다.
<button id="addToCart">장바구니에 추가</button>

자바스크립트에 다음 스니펫을 추가하여 사용자가 버튼을 클릭하면 함수 내에서 이벤트를 전송하도록 합니다.

document.getElementById("addToCart").addEventListener("click", 함수 () {
   // 여기에 이벤트 추가
});

이 코드는 ID로 버튼을 식별한 다음 사용자가 버튼을 클릭할 때 함수를 트리거합니다. 함수에 이벤트를 배치하면, 버튼이 클릭될 때만 이벤트가 트리거됩니다.
버튼과 getElementById() 메서드에 동일한 ID를 사용하는 한 사이트의 모든 버튼에 이 단계를 사용할 수 있습니다

728x90
반응형