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 이벤트 버블링에 대한 정보를 찾아보세요.
![[웹 프런트엔드] Node.js 빠른 시작](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
