[jQuery] jQuery 특정요소만 선택하기

 

<div class="black-bg">
    <div class="white-bg">
        <p>로그인하세요</p>
        <form id="myform" action="login.php">
            <div class="form-group">
              <input type="email" class="form-control" placeholder="Email" id="email">
              <p id="email-alert">이메일을 입력해주세요</p>
            </div>
            <div class="form-group">
              <input type="password" class="form-control" placeholder="Password" id="pw">
              <p id="pw-alert">패스워드를 입력해주세요</p>
            </div>
            <button type="submit" class="btn btn-primary">전송</button>
            <button type="button" class="close-btn">닫기</button> 
            <!-- 타입지정을 하지 않을 경우 submit (모든 val 값을 전송함)으로 기본 지정됨. -->
        </form>
    </div>
</div>

---

 

1. 검은색 배경을 선택했을때에만 모달창이 닫히게 하기

 

먼저 black-bg를 클릭했을 때 hide처리를 해주면 다음과 같다.

$('.black-bg').click(function(){
    $('.black-bg').hide();
})

하지만 검은색 배경이외에 다른 부분을 클릭했을 때에도 모달창은 닫히게 되는데 이것은 이벤트 버블링 현상때문이라고 한다. 🤷‍♂️

그럼 이벤트 버블링은 무엇인가?

---

한 요소에 이벤트가 발생하면, 이 요소에 할당된 핸들러가 동작하고, 이어서 부모 요소의 핸들러가 동작합니다. 가장 최상단의 조상 요소를 만날 때까지 이 과정이 반복되면서 요소 각각에 할당된 핸들러가 동작합니다.

 

이벤트버블링 자세한 내용 보러가기

 

 

이벤트를 발생시키기 위해서는 function( ) <- 괄호 안에 파라미터(인자)를 넣어주어야 한다.

보통 e, event 라고 넣으며, 그 상황에 맞는 인자값을 넣어주면 된다.

 

[예시]

//function () 안의 파라미터가 e라면 e.target이 된다.

$('.black-bg').click(function(e){
    if (e.target == e.currentTarget) {
        $('.black-bg').hide();
    }
});

//e.currentTarget 은 this 로 변경해도 작동된다.

$('.black-bg').click(function(e){
    if (e.target == this) {
        $('.black-bg').hide();
    }
});

//function () 안의 파라미터가 something라면 something.target이 된다.

$('.black-bg').click(function(something){
    if (something.target == something.currentTarget) {
        $('.black-bg').hide();
    }
});

//click할때에만 내부 구문이 실행되는 것이므로 인자값은 보통 e나 event로 쓴다.

 

 

이벤트 리스너의 종류는 굉장히 많은데 

함수명.target(); -> 실제 이벤트가 발생하는 위치, 내가 클릭하는 요소

함수명.currentTarget(); -> 이벤트리스너가 걸려있는 위치를 반환(즉, this라고 해도 동일)

함수명.preventDefault(); ->기본 동작 막기위해 사용

함수명.stopPropagation(); -> 상위요소의 이벤트 버블링 막음

 

중요한건 조건식에서 js를 비교하면 js와 , jQuery는 jQuery와 비교해야 한다.

 

 

if(e.target == $('.black-bg'))로 비교하면 js와 jQuery를 비교하기 때문에 조건에 부합하지 않게 된다.(같지 않다!!)

 

e.target 과 $('.black-bg')를 콘솔에 넣어보면 아래와 같이 나온다.