[javascript] 특정 class에 클릭 이벤트 발생시 , 함수 실행

 

아래와 같은 html에서 같은 class를 가진 요소들을 선택하고 클릭 이벤트가 발생하면 특정 함수를 실행시키고 싶었다.

선택할 타겟은 'target_by_One' 의 <dd> 태그.

<dl class="targetList" id="centerList01">
    <dd class="center01 call target_by_One">...</dd>
    <dd class="center02 call target_by_One">...</dd>
</dl>

이때 요소에 접근하기 위해 querySelectorAll 을 사용한다. 

필요한 것은 target_by_One 이 붙은 모든 요소이기 때문에 querySelectorAll() 을 사용했다.

만약 첫번째 요소 하나만 필요하다면, 하나의 반환 객체만을 가지는 querySelector() 를 사용하면 된다. 

 

 

클래스로 접근하기 때문에 '.target_by_One' 을 인수로 넣었다. (만약 id 라면 . 을 # 로 변경해주면 된다.)

let targetFirst = document.querySelectorAll('.target_by_One');

---

🔻NodeList(2) [dd.center01.callKeyword.keyword_by_One, dd.center02.callKeyword.keyword_by_One]    ▶0: dd.center01.callKeyword.keyword_by_One    ▶1: dd.center02.callKeyword.keyword_by_One    length: 2    ▶__proto__: NodeList

---

targetFirst 를 console로 찍어보면 결과는 위와 같다.

querySelectorAll은 반환객체로 NodeList 를 가져온다. 일단 원하는 요소는 가지고 오는데 성공했다.

 

---

 

 

이제 클릭 이벤트 실행 시 특정 함수를 실행하도록 한다. 

원하는 요소를 찾았는데 반환한 객체가 NodeList 기 때문에 for 또는 forEach 를 사용해 클릭이벤트를 붙여줘야한다. 

let targetFirst = document.querySelectorAll('.target_by_One');
targetFirst.forEach((target) => target.addEventListener("click", jsSearch));

addEventListener 를 사용하면 깔끔하다. 

 

1번째 인자에는 이벤트명을 입력한다.

2번째 인자에는 첫번째 이벤트가 발생하면 실행할 콜백함수를 입력한다. 

 

이제 targetFisrt 에 들어있는 '.target_by_One' 클래스가 붙은 태그를 클릭하면 jsSearch 함수가 실행된다.

 

---

 

위와같이 사용하면 아주 깔끔하게 붙일 수 있는데 하나더 문제가 있었다. 

click 이벤트 실행시, 실행 될 jsSearch 에 인자를 넘겨주면서 this 를 호출하면서 발생했다.

 

 

일단, 인자를 넘겨주는 방법이다.

아래와 같이 익명의 함수를 사용하여 인자를 넘겨주면 된다.

let targetFirst = document.querySelectorAll('.target_by_One');
targetFirst.forEach((target) => target.addEventListener("click", function(){ jsSearch('test'); }));

 

인자로 텍스트를 넘겨줬는데, jsSearch 안에서 this 를 호출한다. 

이때 호출하고 싶은 this 는 jsSearch 함수의 this 가 아니라 click 이벤트가 발생한 이벤트 핸들러의 this 였다. 

 

아래와 같이 this 를 호출할 경우, 함수의 주인에게 바인딩 되어 윈도우 객체를 가르킨다. 

function jsSearch(str){		
	var grandparent = this.parentNode;
	var targetId = this.querySelector('div.text').id;
	var targetText = this.querySelector('div.text').innerText;
};

 

그렇다면 바뀌어버린 this 를 찾기 위해서 다시 익명의 함수를 변경해준다. 

사실 방법은 간단하다. this 를 변수에 담아버리면 된다.

 

let targetFirst = document.querySelectorAll('.target_by_One');
targetFirst.forEach((target) => target.addEventListener("click", function(){ 
			var parent_this = this;
			jsSearch('test', parent_this); 
		})
	);




function jsSearch(str, parent_this){		
	var grandparent = parent_this.parentNode;
	var targetId = parent_this.querySelector('div.text').id;
	var targetText = parent_this.querySelector('div.text').innerText;
};            

 

parent_this 에 this 를 담고 인자로 넘겨주었다.

이벤트 리스너의 선택한 <dd> 가 잘 넘어오는걸 확인 할 수 있다!

 

 

 

++

 

더 쉽게 this 를 받는 방법 

target 을 바로 인자로 넘겨주면 된당 ㅎㅎㅎ 

let targetFirst = document.querySelectorAll('.target_by_One');
targetFirst.forEach((target) => target.addEventListener("click", function(){ 
			jsSearch('test', target); 
		})
	);




function jsSearch(str, target){		
	var grandparent = target.parentNode;
	var targetId = target.querySelector('div.text').id;
	var targetText = target.querySelector('div.text').innerText;
};            

 

 

 

 

 

---

 

 

 

[참고]

javacpro.tistory.com/36

[JavaScript] querySelector() , querySelectorAll() 자바스크립트 요소접근

chlolisher.tistory.com/10

[ JavaScript ] Event의 종류 : addEventListener, removeEventListener 메서드

nykim.work/71

[JS] 자바스크립트에서의 this

www.zerocho.com/category/JavaScript/post/5b0645cc7e3e36001bf676eb

(JavaScript) 자바스크립트의 this는 무엇인가?