[JavaScript] 이벤트 버블링, 이벤트리스너 관련 함수

모든 브라우저는 이벤트 버블링이 일어남 (이벤트가 상위 html로 퍼지는 현상)

 

 

ex)

<div class="black-bg">
	<div class="white-bg">
		<h4>로그인하세요</h4>

 

위의 코드에서 white-bg를 클릭하면 클릭을 총 두번한 것 → white-bg + black-bg

위의 코드에서 h4를 클릭하면 클릭을 총 세번한 것 → h4 + white-bg + black-bg

 

 

 

 

★유용한 이벤트관련 함수들(이벤트이상하게 동작하는 것을 고칠수있음 ex)이벤트 버블링)

이벤트리스너의 콜백함수에 e 넣어주기

document.querySelector('.black-bg').addEventListener('click',function(e){

                 e.target;//유저가 실제로 누른것

                 e.currentTarget;//이벤트리스너 달린곳
                 this; //위와 같은뜻, this는 콜백함수에 e 안넣어도 됨

                 e.preventDefault();//이벤트 기본동작 막아줌

                 e.stopPropagation();//내 상위요소로 이벤트 버블링 막아줌

 

**this 쓸때는 콜백함수에 e 안넣어도 됨

$('.form-select').eq(0).on('input',function(){ //input : <input>값 변경될때 이벤트 작동
    if(this.value =='셔츠'){