jQuery 이벤트 [bind/unbind][one][부트스트랩]

bind()메소드 : jQuery의 이벤트 적용 메소드

[광고 누르면 오늘의 행운 상승!!]

.bind(eventType, eventData(생략가능), handler(eventObject))

첫 번째 전달인자(eventType) : 이벤트 타입(예: click, mouseover)
두 번째 전달인자(eventData) : 핸들러 함수에서 사용할 data 프로퍼티 값
														 -> 대부분 생략
세 번째 전달인자(handler(eventObject)) : 이벤트 발생 시, 호출함수

※전달 인자가 두 개면 두 번째 전달인자가 생략된 것.


$(".illust").bind("click", function(event){ $("#console").html
("<p>" + event.target.getAttribute("title") + "클릭했습니다.<p>")});

class가 illust인 요소를 선택하여 click event 바인딩

 

event handler 함수

$(".illust").bind("click", function(event){ $("#console").html
("<p>" + event.target.getAttribute("title") + "클릭했습니다.<p>")});

event.target은 jQuery 선택 요소 객체가 아니다
DOM 스크립트 방식을 사용해야한다.

 

체인연결

$(".illust").bind(",mouseover", function(event){ $("#console").html
("<p>" + event.target.getAttribute("alt") +"<p>")}).bind("click", function(event){ $("#console").html
("<p>" + event.target.getAttribute("title") + "클릭했습니다.<p>")});

-police station ilustrate - 마우스를 올려놓으면
-police station 을 클릭하셨습니다. - 마우스 클릭

 

unbind() : 이벤트 핸들러 제거

$(".illust").unbind();

class가 illust인 요소에 적용된 모든 이벤트 핸들러 제거

$(".illust").unbind("click");

class가 illust인 요소에 적용된 click 이벤트 핸들러만 제거unbind() : 이벤트 핸들러 제거

 

단 한번 사용되고 unbind될 이벤트 경우 one() 메소드 사용

$(".illust").one("click", handler);

 

부트스트랩 사이트 http://bootstrapk.com/

• 반응형 모바일 우선 HTML,CSS,JS 프레임워크
• 다양한 아이콘, 기능 등을 사용할 수 있게 해줌
• 부트스트랩 다운로드 → 링크복사 → <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css">

→ <span class="glyphicon glyphicon-chevron-up" aria-hidden="true"></span> //아이콘 사용