반응형

마우스 이벤트 3

[JQUERY] 이벤트 버블링 막기

이벤트 버블링 막기 클릭 이벤트 발생 시 이벤트 버블링 막기 이벤트 버블링의 경우 아래 샘플예제에서 구성을 보면 DIV안에 P안에 SPAN이 위치한 상태에서 개발자는 해당 태그만 클릭하는 경우 클릭한 태그의 클릭 이벤트가 실행되어 원하는 결과를 얻을 수 있도록 하겠지만 실제로 테스트를 해보면 SPAN 태그를 선택하는 경우SPAN - P - DIV 순으로 클릭 이벤트가 실행하기 됨으로써 원치 않는 경우가 발생하게 됩니다.1. 샘플예제 Div Element Area P Element Area Span Element Area - 결과 화면 2. 소스코드 Div Element Area P Element Area Span Element Area 3. 설명 이벤트 버블링 막기 ex 01) - 버블링 현상이 발생하는..

[JQUERY]마우스 이벤트 처리하기

마우스의 이벤트를 처리한다. 특정 마우스의 이벤트를 처리한다.1. 샘플예제 Bold button Italic button - 결과 화면 [특정 버튼위에 마우스가 위치한 경우] [버튼을 마우스 오른쪽 버튼으로 클릭한 경우] [버튼을 마우스 왼쪽 버튼으로 클릭한 경우] 2. 소스코드 Bold button Italic button 3. 설명 해당 버튼에 마우스 관련된 이벤트를 설정하여 bind() 한다. 마우스 버튼이 클릭되었을 때 event.button 이 0 인 경우 마우스 좌측, 2 인 경우 마우스 우측 으로 설정한다. 마우스가 해당 버튼 위에 위치하게 되면 이벤트를 처리한다. - bind(eventType, data, handler) : eventType는 이벤트의 타입을 지정하는 문자열로써 click..

[JQUERY] 어느 버튼을 클릭하였는지 확인하기

어느 버튼을 클릭하였는지 확인하기특정 버튼 중에서 클릭한 버튼을 확인할 수 있습니다.1. 샘플예제 Bold button Italic button 실행결과 2. 소스코드 Bold buttonItalic button 3. 설명 1) 버튼에 click(dblclick)이벤트를 bind 및 직접 이벤트를 설정합니다.2) 이벤트가 제대로 적용이 되면 해당 버튼을 클릭하게 되면 설정한 이벤트가 실행합니다. JQUERY 참조 : http://api.jquery.com/bind/ http://api.jquery.com/click/ http://api.jquery.com/dblclick/ - bind(eventType, data, handler) : 특정 이벤트를 정의하여 설정한다. : eventType는 이벤트의 타입..

반응형