47일차. Jquery Event On()과 event.stopPropagation() 메서드

On()메서드와 event.stopPropagation() 메서드

 

Jquery on() 메서드는 선택한 요소(Elements)와 자식 요소에게 하나 이상의 이벤트를 연결한다. 

 

기본 문법으로는

 

on("이벤트명",동작(함수)); /*1개 적용시*/
on({key(여기서 key에 event명):value(동작 수행할 function),{key(여기서 key에 event명):value(동작 수행할 function)}); /*다중 적용시*/

 

1개의 이벤트를 적용할때도 사용이 가능하고, 여러개의 이벤트를 Map 형식의 Key:value 형식으로 지정해서 한번에 나열할수도 있다.

 

 

See the Pen Untitled by codeJo (@yatong) on CodePen.

 

 

 

코드를 보자.

 

우선 Jquery의 기본문법의 표현을 좀더 축약했다. document.ready를 생략 가능하기 때문이다.

 

/* Jquery 기본스타일 */
		$(document).ready(function(){
			$('#exam').text('안녕하세요');
		});
		
/* jquery 축약스타일 */
		$(function(){
			$('#exam2').text('하이');
		});

 

그리고 on() 메서드를 이용하였다. <div>에 text아이디를 부여하고, text아이디를 on 메서드를 이용하여

각각의 동작에 따라 이벤트를 설정해주었다.

 

마우스가 진입할때 BackGround가 색상이 변하고, 클릭을 하게 되면 글자의 색상과, 크기를 변경하고, 마우스가 빠져나갈때는 변경한 글자의 색상과 크기를 다시 원래대로 돌리는 코드이다.

 

이처럼 다양한 이벤트를 On메서드를 통하여 메서드 체이닝(Method Chaining) 없이 좀더 간략한 코드로 구현이 가능하다.

 

이렇게 이벤트를 여러개 발생시키다보면 영역 안의 영역에서 이벤트를 중첩으로 적용하다가

 

이벤트 버블링(Event Bubbling)이 일어난다. 

 

이벤트 버블링이란 쉽게 얘기해보자면 상위 요소 안에 하위요소가 포함되어있고 두 요소에 Click 이벤트가 적용되어있다면, 하위요소를 클릭하면 상위요소의 Click 이벤트가 같이 발동하는 현상이라고 설명할수 있겠다.

 

한마디로 내부 이벤트를 발생시키면 외부 이벤트도 동시에 발동되는거다.

 

코드로 확인해보면 이해가 더 쉬울것이다.

 

 

 

See the Pen Untitled by codeJo (@yatong) on CodePen.

 

 

 

A태그를 클릭하면 DIV와 P 태그의 이벤트가 동시에 호출되고 P태그는 P와 DIV가 호출된다. DIV는 가장 상위 요소이기때문에 DIV 이벤트만 호출 된다.

 

이처럼 이벤트 버블링을 막아주는것이 바로 event.stopPropagation() 메서드 이다.

버블링이 발생하지않게 막아줘야할 곳에 해당 메서드를 입력하면 버블링이 발생하지 않는다.

 

추가로 하나 알아볼 메소드가 바로 event.prevenDefalut()이다. 기본 동작을 차단해주는 메서드이다.

 

위의 코드에 A태그에 이 메서드가 선언되어있는데, 기본 동작을 차단해준다는건 바로 A태그의 기본 동작인 링크 기능을 차단해준다는것이다. 코드상으로 보면 Google에 링크가 걸려있다. 따라서 A 태그의 글자를 누르면 원래는 Google로 이동되야 정상이다. 하지만 event.prevenDefalut()가 선언되어있기때문에 A태그의 기본기능인 href 속성이 차단되어 Google로 이동되지않고 단순 클릭만 가능하게 되는것이다.