카테고리 없음

이벤트 버블링,캡처링에 대한 Jquery 함수 정리

Sm_Developer 2021. 7. 28. 15:07

이벤트 캡처링과 버블링에대한 지식이부족하다면??

https://develop-world.tistory.com/8

 

 

1.event.preventDefault();

event.preventDefault();

메소드의 이름 그대로 브라우저가 지원하는 이벤트를 막는것이다.

예제)

<html>

<a href="www.naver.com" id="ex"></a>

<js>

$("#ex").click(function(){
	event.preventDefault();
	alert(2);
});

원래라면 a태그의 특성때문에 naver로 이동을 해야하지만 저함수로 인해서 alert창만 뜬다.

 

 

2.event.stopPropagation();

이벤트가 발생하는 요소를 타겟이라고한다.

타겟을 제외하곤 부모 자식간의 이벤트 전파를 막는것을 말한다.

부모 자식간의 연을 끊는다고 생각하면 쉽다.!!

<html>

<div onclick="location.href='www.naver.com'">
	<span id="target">
		span태그	
	</span>
</div>

<js>

$("#target").click(function(){
	event.stopPropagation();
	alert(2);
});

원래라면 alert(2)인 경고창이 뜨고나서 naver로 이동을 해야하지만

stopPropagation()에 의해 경고창2만뜨고 이벤트가 발생하지않는다.