.on()

by Kim Ara

HTML

<div class="cu_m_sec_b_guide">
  <h2>GUIDE</h2>
  <ul>
    <li><a href="#">자주 묻는 질문</a></li>
    <li><a href="#"><span>대량 구매 문의</span></a></li>
    <li><a href="#"><strong>비회원 주문조회</strong></a></li>
    <li><a href="#">1:1 문의</a></li>
    <li><a href="#">A/S 센터 찾기</a></li>
    <li><a href="#">제품 메뉴얼</a></li>
  </ul>
</div>

<div class="btn_naver"><a href="http://www.naver.com" target="_blank">네이버 바로가기</a></div>

CSS

.cu_m_sec_b_guide ul {width:700px}
.cu_m_sec_b_guide ul li {float:left; width:100px; height:77px; text-align:center;list-style-type:none; background:url(http://www.cuchen.com/images/main/cu_m_sec_guide1.gif) center 0 no-repeat;}
.cu_m_sec_b_guide ul li:nth-child(1) {}
.cu_m_sec_b_guide ul li:nth-child(2) {background:url(http://www.cuchen.com/images/main/cu_m_sec_guide2.gif) center 0 no-repeat;}
.cu_m_sec_b_guide ul li:nth-child(3) {background:url(http://www.cuchen.com/images/main/cu_m_sec_guide3.gif) center 0 no-repeat;}
.cu_m_sec_b_guide ul li:nth-child(4) {background:url(http://www.cuchen.com/images/main/cu_m_sec_guide4.gif) center 0 no-repeat;}
.cu_m_sec_b_guide ul li:nth-child(5) {background:url(http://www.cuchen.com/images/main/cu_m_sec_guide5.gif) center 0 no-repeat;}
.cu_m_sec_b_guide ul li:nth-child(6) {background:url(http://www.cuchen.com/images/main/cu_m_sec_guide6.gif) center 0 no-repeat;}
.cu_m_sec_b_guide ul li a {display:block; width:126px; height:28px; padding-top:49px; font-size:12px; color:#000;text-decoration:none}

div{float:left;margin:10px 0}

JavaScript

$("li").on("click", function(){ 
	alert( $(this).text() ); 
});

$(".btn_naver > a").on('click', function(e){
   e.preventDefault(); //브라우저에서 기본적으로 제공되는 이벤트들을 강제로 막는다.
   alert('링크 방지!');
});

$("span").on('click', function(e){
	e.stopPropagation(); //span영역 클릭시, 다른 이벤트 무시하고 span만 실행된다.
  alert( 'span 클릭' ); 
});


//$("li").off("click");


$("strong").one('click', function(){	
  alert('strong 클릭');
});