js(JavaScript) addEventLister() 기본 개념, 약간 심화?

이벤트 핸들러(ft.addEventListener)

 

html요소에 이벤트 함수 연결하기

<button id="btn" onclick="fn()">버튼</button> //html에 직접 작성
document.querySelector('#btn').click = fn; // 요소.이벤트 = 함수
document.querySelector('#btn').addEventListener('click',fn); // 이벤트 리스너 사용 

 

여기서 JS에서 선언할 때는 '()'를 제외해야 한다
만일 작성하게 되면"= fn()" 함수에 return값을 할당한다는 의미로 받아드릴 수 있고, fu()이 실행되게 된다. 즉, 이벤트 핸들러에 기능을 잃게 된다.

function fn(event){
	console.dir(event);
}

위에서 사용한 fn함수를 정의할 때 인수로 event를 받을 수 있다.(event는 관례?적으로 사용하는 단어라 하더라…) 여기서 event는 이벤트가 일어난 요소를 가져 올 수 있다.
dir를 사용하면 많은 프로퍼티?가 나올 것이다.

잠깐 내 얘기를 해보자면, 텍스트와 삭제or수정 버튼을 연결하기 위해 db에 있는 id값을 인수로 받는 이벤트 함수를 만들고 해당 텍스트에 id값으로 db.id값을 넣어 연결했다.

<p id="123123>hello world</p>
<button onclick="fn(123123)">삭제</button>

이제는 그럴 필요가 없다
이벤트 함수에서 받는 event를 이용해 특정 요소로 잡을 수 있는 방법이 생겼기 때문이다.
이 부분이 너무 기뻣다 ㅠ

글로 설명하기엔 너무 많은 부분이니 console.dir()를 해보자. 특히 나는 .path에서 감동 받았다.

 

이벤트 핸들러 버블링

addEvent..에는 버블링이라는 개념이 있다. 딱히 불편한 개념은 아니라는데, 나는 쫌 불편 후 있을 것 같다.

어쨋든 개념을 보면

<ul  id="ul">
	<li  id="li">
		<a  href="" id="a">hello world</a>
	</li>
</ul>

//script
document.getElementById('ul').addEventListener('click', ()=>{console.log('hi')})
document.getElementById('li').addEventListener('click', ()=>{console.log('hi')})
document.getElementById('a').addEventListener('click', ()=>{console.log('hi')})

이런 코드가 있을 때 위 a태그 위치를 브라우저에서 누르면 'hi’는 몇 번 출력 될까?
정답은 3번이다.

html를 그림으로 생각해보자면(그리진 않을 것이다)
ul태그 칸 위에 li태그 칸이 있고 그 위에 a태그 칸이 존재 할 것이다. 그랬을 때 우리는 a태그를 눌렀지만 겹쳐있으니 ul,li태그 칸도 같이 누르게 된 것이다.

이걸 이벤트 버블링 이라 한다.

참고
focus, blur, mouseenter, mouseleave는 이벤트 버블링이 발생하지 않는다. 이용하기 위해서는 focusin, focusout, mouseover, mouseout으로 사용하면 된다.

 

다시 이벤트 버블링을 막아야 하는 경우가 있다. 그럴때는 event.stopPropagation()를 추가해주면 된다. (이벤트를 일으키는 핵심 함수에만)
위 예시 코드를 보자면 실제로 눌러지는 a태그에 연결된 함수에만 추가하면 된다.

 

html요소를 제어할 때 유용한 tip?

여러 텍스트를 같은 함수로 이벤트 처리하려 한다면, 노드 리스트에서 forEach()를 사용하는 방법도 있지만 부모요소에 이벤트를 연결하고 event.path|event.target등을 이용해서 해당 요소로 접근 하는 방법도 있다.

그리고 이때 빈 공간을 클릭하거나 안에 다른 내용을 클릭 할 경우 이벤트를 받을 요소가 달라지는데 이때는 if문 조건을 통해 조절하거나 불필요한 공간을 클릭하는 경우라면 return으로 무시 할 수 있다.