[jQuery] 특정 영역 외 클릭 이벤트 e.target / e.currentTarget

특정 영역 외 클릭 이벤트 event.target / event.currentTarget

 

개발을 진행하면서, 커스텀 selectbox를 구현하거나, toggle 메뉴 위에 올라오는 서브 메뉴를 구현할 때, 외부 영역을 클릭하게 되면 닫히도록 구현을 해야했다. body를 사용해서 하면되지 않을까라고 생각했지만, 그럼 그에 해당하는 div 영역을 클릭했을 때에도 닫힐 것이다. 그래서 찾아보게 되었고, 정리해보자

 

 

event.target 

이벤트가 발생한 요소를 반환

현재 이벤트가 발생한 요소의 속성들을 얻을 수 있으며, 만약 이벤트가 발생한 대상 id도 가져올 수 있다.

$('.divBox').click(function(event){
	console.log(event.taget);
    console.log(event.target.id);
});

 

event.target말고도 this라는 객체를 이용해 현재 이벤트가 발생한 대상을 가져올 수 있다. 하지만, 주의해야하는 부분이 있다. event.target과 this는 DOM 객체이고, jQuery 객체가 아니기 때문에 jQuery 메소드를 사용할 수 없다.

 

var myTarget = event.target; 이라는 변수가 있을 때, myTarget은 현재 이벤트가 발생한 요소를 가리킨다. 만약 이 요소의 색상을 변경하고 싶다면 myTarget.style.color = "red"; 와 같은 DOM 메소드를 사용해야 한다.

 

그렇다면 jQuery 객체로 요소를 받기 위해서는 어떻게 해야 할까? $(event.target) 또는 $(this)아 같이 사용하면 된다.

var myTarget = $(event.target); 라고 선언했다면, myTarget.css("color", "red"); 와 같이 jQuery 메소드를 사용할 수 있다.

 

이벤트 발생 과정

① 지정된 event target(html 요소에) ② 지정된 event type(클릭이나 스크롤 등)이 발생하면 ③ 지정된 event handler(함수)가 실행된다.

 

event target에서 얻을 수 있는 속성 값

- 다른 프로퍼티와 조합하여 현재 이벤트가 발생한 요소의 속성 값을 얻을 수 있다.

<div id = "Hello">안녕</div>

// 마우스를 클랙했을 때 이벤트 발생
let text = document.getElementById("Hello");
text.addEventListener("click", function(e){
	alert("안녕 안녕");
});

 

tagName / id / textContent

console.log(e.target.tagName); // div
console.log(e.target.id); // Hello
console.log(e.target.textContent); // 안녕

 

---

이벤트 위임

- 캡처링과 버블링을 활용해서 이벤트 위임 구현 가능

- 요소마다 핸들러를 할당하지 않고, 요소의 공통 조상에 이벤트 핸들러를 하나만 할당해도 여러 요소를 한꺼번에 다루기 가능

<table>
	<tr>
    	<th colspan= "3"><em>Bagua</em> Chart: Direction, Element, Color, Meaning</th>
    </tr>
    <tr>
    	<td class= "nw"><strong>Northwest</strong><br>Metal<br>Silver<br>Elders</td>
        <td class= "n">SKY</td>
        <td class= "ne">RAINBOW</td>
    </tr>
    <tr>...1 more lines of this kind...</tr>
    <tr>...2 nire lines of this kind...</tr>
</table>

table element.onclick = function(e) {
	// td에서 발생한 것이 아니라면 아무 작업도 실행하지 않음
    if (e.target.tagName != 'td') return;
    console.log(e.target.textContent); // event target의 텍스트 가져옴
};

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

참고

[특정 영역 외 클릭] event.target & event.currentTarget

 

[jquery] 열려있는 팝업 사이드바 외부 영역 클릭시 닫히게 하기

 

나 자신이외에 클릭 하면 .. ! (feat. 셀렉트 박스 커스텀 연장선)

 

자바스크립트 특정 영역 외 클릭하면 닫기

 

[TIL / JavaScript] event.target, 이벤트 위임

https://joshua1988.github.io/web-development/javascript/event-propagation-delegation/

이벤트 버블링, 이벤트 캡처 그리고 이벤트 위임까지