JSFiddle - React, Tailwind, and code Playground

by SUNGMIN SHIN

HTML

<div id="header">
  <div id="gnb">
    <ul>
      <li><a class="btn_nav1" data-nav="menu1" href="#section1">메뉴1</a></li>
      <li><a class="btn_nav2" href="#section2">메뉴2</a></li>
      <li><a class="btn_nav3" href="#section3">메뉴3</a></li>
      <li><a class="btn_nav4" href="#section4">메뉴4</a></li>
    </ul>
  </div>
</div>
<!-- // #header -->

CSS

#gnb a{border:1px solid red}
#gnb .btn_nav1{border-color:blue;}
#gnb .btn_nav2{border-color:green;}
#gnb .btn_nav2{border-color:red;}

JavaScript

/***** [ 이벤트 다루기 ] *****/

function hello(event) {
	console.log(event.target, this);
  alert('hello~!');
}

// 일반 이벤트 등록
$('.btn_nav1').on('click', hello);
// 단축 이벤트 등록
$('.btn_nav2').click(hello);
// 등록한 이벤트 제거
$('.btn_nav1, .btn_nav2').off('click', hello);
$('.btn_nav1, .btn_nav2').off('click');
$('.btn_nav1, .btn_nav2').off();
// 이벤트를 한 번만 실행
$('.btn_nav1').one('click', hello);
// 기본행동 취소
$('.btn_nav2').on('click', function(event){
	hello(event);
  event.preventDefault();
});
// 버블링 멈추기
$('.btn_nav3').on('click', function(event){
	hello(event);
  event.stopParopagation();
});
// 버블링 활용(동적 생성 엘리먼트 이벤트등록에 사용)
$('#header').on('click', '.btn_nav4', hello);