자잘한 자바스크립트

event.target

백엔드 애플리케이션 기능을 테스트하기 위해선 최소한의 HTML, CSS(부트스트랩), 자바스크립트의 지식을 이전 글에도 필요성을 말하였고, 지금까지 최소한의 자바스크립트의 지식을 이해하였고 오늘은 일부 이해하지 못한 것을 작성하고자 한다.

우리는 HTML의 이벤트 발생(클릭, 폼(form),스크롤)를 위해 자바스크립트 함수를 만들고, 그 함수에 이벤트가 일어날 객체를 target으로 설정한다.

그리고 target으로 얻을 수 있는 속성은 여러 태그나 클래스,id 등 지정하여 이벤트가 발생한 요소의 속성 값을 얻을 수 있다. 예를 들어 클래스 이름 “test”라는 값을 가진 태그를 마우스 클릭하였을 때 지정된 이벤트 함수가 실행이 된다.

• 예시 코드

<span class="text"> click </span> 

.......

document.querySelector('.text').addEventListener('click', function(e){
     console.log("success")
})

ClickSpan.addEventListener('click', function(e){
     // SPAN 태그에서 발생한 게 아니라면 아무 작업도 하지 않는다.
	if(e.tagName != 'SPAN') return;
	console.log("success");

})

오늘 짧게 작성한 이유는 이런식으로 자잘한 문법이 기억이 나지 않을 때 한번씩 기억나기 위해서 작성했으니 기억나지 않을 때마다 오늘 작성한 경험으로 복기하기 쉬울 것이다.

---