JS의 이벤트는 기본적으로 버블링되어 레이어별로 위쪽으로 전파됩니다. stopPropagation() 함수를 통해 DOM 계층 구조에서 이벤트 전파를 중지할 수 있습니다. 다음 예와 같습니다:
HTML 코드:
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>stopPropagation()使用 - 琼台博客</title> </head> <body> <button>button</button> </body> </html> [/code] 没有加stopPropagation() [code] var button = document.getElementsByTagName('button')[0]; button.onclick=function(event){ alert('button click'); }; document.body.onclick=function(event){ alert('body click'); }
DOM은 레이어별로 위쪽으로 전파되므로 버튼 버튼을 클릭하면 본문 레이어에도 전파되므로 본문 레이어를 클릭해도 반응합니다. 결과적으로 버튼과 바디라는 두 개의 경고 상자가 나타납니다.
stopPropagation()을 추가했습니다
var button = document.getElementsByTagName('button')[0]; button.onclick=function(event){ alert('button click'); // 停止DOM事件层次传播 event.stopPropagation(); }; document.body.onclick=function(event){ alert('body click'); }
버튼의 클릭 이벤트 처리 함수에서 stopPropagation()을 사용하여 이벤트 전파 기능을 중지하므로 버튼 클릭 이벤트에서 경고 상자가 나타난 후에는 본문으로 전파될 수 없으며, 본문 경고 상자가 나타납니다. 다시 팝업되지 않습니다. 결과적으로 경고 상자는 한 번만 논의됩니다.
많은 아이들이 JS를 작성할 때 DOM 이벤트가 레이어별로 상위로 전파되는 기능을 무시하여 프로그램 이상이 발생하는 경우가 많습니다. 좀 더 심층적인 지식이 필요하다면 JS 이벤트 버블링에 대한 정보를 찾아보세요.