자바스크립트 이벤트버블

자바스크립트 이벤트버블

가장 안쪽의 4번 div를 눌렀는데 부모 div까지 모두 이벤트가 발생하였다.

-> 자식을 누르면 부모에게까지 모두 전달

e.stopPropagation();

e.stopPropagation();

-> 자식을 누르면 부모에게까지 이벤트가 전달되는 걸 막음

e.preventDefault();

//alert창이나 팝업 막을때 사용

-> 주로 하이퍼링크와 같이씀, 사이트로 이동 여기서 그 사이트로 이동을 막기 위해서 사용

자바스크립트 이벤트 전달 .div-test{ border: 1px solid black; padding: 20px; } .div1 { background-color: red; } .div2 { background-color: orange; } .div3 { background-color: yellow; } .div4 { background-color: green; } 이벤트 전달 이벤트 버블링 자식 노드에서 부모 노드로 이벤트가 전달된다. function eventBubble(message){ console.log(message); } function eventBlock(e, msg){ //consol.log(e) -> e는 이벤트 객체 console.log(msg); e.stopPropagation(); //이벤트 전달을 막음 // e.preventDefault(); //alert창이나 팝업 막을때 사용 -> 주로 하이퍼링크와 같이씀, 사이트로 이동 여기서 그 사이트로 이동을 막기 위해서 사용 }

from http://roqkfgksmsdbstn.tistory.com/99 by ccl(A) rewrite - 2021-09-02 01:26:38