본문 바로가기

EVENT에 해당하는 글들

3 Articles matched
목록이 없습니다.
[jQuery] 스크롤 이벤트를 통해 메뉴 따라오게 하기 (menu header fix on scroll event) jQuery 스크롤 이벤트를 통해 메뉴 따라오게 하기 (menu header fix on scroll event)최근들어 스마트폰의 등장과 함께 반응형 웹이 인기다. 작은 화면의 기기에 PC에서 보여주던 내용들을 전부 담아서 보여주려고하니 여간 까다로운게 아니다. 이번에는 쇼핑몰에서 보이는 UI인데 유명한 쇼핑몰들의 UI를 살펴보면 거의다 비슷비슷 하다.그중 내가 구현 하고 싶었던 UI는 상세페이지에서 어떤 메뉴가 있을 때 스크롤 시 그 메뉴가 화면 상단에 따라오는 UI이다. 소스 (Source) $(window).scroll(function() { let wrap_el = $('#ebric_mobile_wrap'); // 전체 wrap 요소 let tab_top = $('.info-type-select..
[jQuery] event.preventDefault(), event.stopPropagation() HTML 사용자 이벤트 전달 원리 우리가 매일 사용하는 인터넷 즉, 웹에서는 사용자들이 가장 많이 발생시키는 이벤트 중 하나는 바로 클릭! 사용자가 클릭을 하는 순간 HTML상의 요소들은 클릭을 당한(?) 요소부터 그 요소의 부모님들(?) 부모 요소까지 모두 같이 반응을 하게 되는데요 ( 참고로 이러한 현상을 버블업[Bubble Up] 이라고 해요 ) 이런 현상을 이벤트가 전파, 확산 된다고 하는건데요 영어로는 propagation이라고 합니다 예를들어 다음과 같은 HTML 코드가 있을 때 12345 Test cs a태그를 클릭하게 되면 그 상위 요소인 li 그리고 ul 까지 그 이벤트가 전파된다는 것입니다~ event.stopPropagation() 그러면 제목에서 언급했던 event.stopPropa..
[jQuery] click() vs trigger('click') jQuery에서 click event를 처리할 때 사용되는 대표적인 문법으로 click()과 trigger('click')이 있는데 이 둘의 차이점을 정리해보려고 한다. 어떨때는 click()을 사용하고 어떤 경우에는 trigger('click')을 사용한다. click()의 경우는 우리가 event처리에 있어서 함수를 사용하는데 이 함수에 전달해야할 매개변수가 있다면 click()을 사용하는 것이 옳다. 왜냐하면 trigger.('click')은 매개변수를 전달하지 못하기 때문에. trigger.('click')은 매개변수를 전달하지 못하는 대신에 속도가 click()에 비해서 빠르다. 그래서 매개변수 없이 event처리를 하는 경우에는 trigger.('click')을 사용하는 것이 훨씬 성능에 좋다..