웹3 5일차

[js 함수 인용 vs 함수 생략버전]

// 함수 인용, 재활용 가능성이 높은 함수 인용
$('.popup-open').click(add_popup);

function add_Popup() {
    $(".popup-section").addClass('active');
}


// 함수 생략, 실행 코드 바로 삽입
$('.popup-open').click( function () {
        $(".popup-section").addClass('active');
});

 

 

 

[상위요소들로의 이벤트 전파 방지]

자식요소의 이벤트가 발생하면 상위엘리먼트 모두가 함께 반응한다.

메뉴의 자식요소인 li태그요소에 마우스를 올리는 것이 부모요소인 메뉴바에 마우스를 올리는 것과 동일했던 것처럼,

상위엘리먼트들로의 이벤트가 전파되는 것이다. 

span 클릭

 

 

원하는 요소에 이벤트가 일어났을 때 상위엘리먼트에게 영향이 가지 않도록 하려면,

원하는 요소 이벤트 함수 마지막에 return false를 걸어주면 실행이 멈춘다.

즉, return false이후의 함수나 실행문들은 모두 실행되지 않는다.  

+)  e.stopPropagation(); 도 상위엘리먼트들로의 이벤트 전파를 중단시킨다. 

$('span').click(function(e) {
  console.log("span 클릭됨!");
  
  // 상위엘리먼트들로의 이벤트 막음
  e.stopPropagation();
  return false;
});

return false 삽입 후, span 클릭

 

물론 처음부터 return false를 사용하지 않도록 html, css구조 구현하는게 좋다. 

 

 

 

 

[팝업 여러 개 삽입하기]

1. 팝업 생성 버튼 4개 생성

 

2. 팝업 4개 생성

 

3. 팝업 여는 함수 제작.

js는 모두 j-query로 이루어졌으며, 아래에 3개의 버전을 만들어봤다.

동일한 기능을 가진 요소가 많을 수록 3번째 버전을 사용하는 것이 최적화에 적합하다.

요소를 추가할 때마다 함수를 더 작성할 필요가 없기 때문. 

// 팝업 열기
// ver1
$('.popup-open-1').click( function () {
    $(".popup-section").addClass('active');
    // add_Popup()
});
$('.popup-open-2').click( function () {
    $(".popup-section-2").addClass('active');
});
$('.popup-open-3').click( function () {
    $(".popup-section-3").addClass('active');
});
$('.popup-open-4').click( function () {
    $(".popup-section-4").addClass('active');
});

// ver2
popup_Add(1); popup_Add(2); popup_Add(3); popup_Add(4)
function popup_Add(no) {
    $('.popup-open-'+no).click( function () {
        $('.popup-section-'+no).addClass('active');
    }); 
}

// ver3 
$(document).ready(function () {
    $('.popup-open').click (function () {
        let personal_class = $(this).attr("class").split(' ')[1]
        personal_class = personal_class.substring(personal_class.length-1)

        $('.popup-section-'+personal_class).addClass('active');
    })
})

 

4. 팝업 닫는 함수 제작.

팝업의 외부를 클릭했을 때 닫는 기능은 팝업의 내부를 클릭해도 작동이 되지 않도록,

팝업의 상위엘리먼트들로의 이벤트 전파 방지도 제작해준다. => $(팝업 내부 요소).click(()=>{return false;})

// 팝업 닫기
$('button, .popup-section').click( function () {
    $('.popup-section').removeClass('active');
    console.log('section click');
});


// 상위엘리먼트들로의 이벤트 방지
/* 
popup-content를 클리하면 .popup-content는 클릭되고 
부모인 .popup-section은 클릭되면 안된다.  

e.stopPropagation(); 혹은 return false;를 사용
*/
$('.popup-content').click( function (e) {
    console.log('content click');

    //e.stopPropagation();  
    return false;
});

 

 

+ ) 팝업이 등장할 시 body의 스크롤을 제거하고 싶을 때 

팝업을 열 때 overflow: hidden; 을 적용하고, 팝업을 닫을 때 overflow: auto;로 적용

  => 적용하는 방법은 변경하는 내용이 두 줄 이상이라면 .css대신 .addClass를 사용하도록 하자.

// ver2
popup_Add(1); popup_Add(2); popup_Add(3); popup_Add(4)
function popup_Add(no) {
    $('.popup-open-'+no).click( function () {
        $('.popup-section-'+no).addClass('active');
        $('body').css('overflow', 'hidden');
    }); 
}


// 팝업 닫기
$('button, .popup-section').click( function () {
    $('.popup-section').removeClass('active');
    $('body').css('overflow', 'auto');
});

 

 

++ ) 브라우저에 접속 하자마자 팝업이 열리도록 세팅.

열리는 함수 따로 제작. 반복되는 코드들은 함수로 처리 및 정리.

// ver2
popup_Add(1); popup_Add(2); popup_Add(3); popup_Add(4)
// 브라우저에 접속 하자마자 자바스크립트가 실행되려면 액션 이벤트가 없어야 한다. 
// 액션 이벤트(click, scroll 등등)
function popup_Open(no) {
    // 사이트 입장 시 팝업이 띄워진다.
    $('.popup-section-'+no).addClass('active');
    // 팝업 열리면 스크롤 제거
    $('body').css('overflow', 'hidden');
}
function popup_Add(no) {
    popup_Open(no);
    $('.popup-open-'+no).click( function () {
        popup_Open(no) ;
    }); 
}