JavaScript 및 JQuery 이벤트에는 이벤트 버블 및 이벤트 캡처 문제가 있습니다. 다음은 두 가지 문제와 해당 솔루션에 대한 자세한 요약입니다.
이벤트 거품은 어린이에서 조상 노드로의 거품 과정입니다.
이벤트 캡처는 반대이며 조상 노드에서 어린이 노드까지 프로세스입니다.
jQuery 클릭 이벤트의 예를 제시하십시오.
코드는 다음과 같습니다.
코드 사본은 다음과 같습니다.
<! doctype html>
<meta charset = "utf-8">
<title> 테스트 </title>
<헤드>
<script src = "http://code.jquery.com/jquery-latest.js"> </script>
<script type = "text/javaScript">
$ (function () {
$ ( '#clickme'). 클릭 (function () {
경고 ( 'Hello');
});
$ ( 'body'). 클릭 (function () {
경고 ( 'baby');
});
});
</스크립트>
</head>
<body>
<div>
<버튼 유형 = "버튼"id = "button2"> me </button>을 클릭하십시오
<button id = "clickme"> 클릭 </button>
</div>
</body>
</html>
이벤트 버블 현상 : "id = clickme"의 버튼을 클릭하고 "hello"와 "baby"가 서로 나타납니다.
분석 : "id = clickme"버튼을 클릭하면 버튼 및 버튼 부모 요소 및 신체에 바인딩 된 클릭 이벤트가 트리거되므로 두 개의 상자가 차례로 나타나고 소위 버블 현상이 발생합니다.
이벤트 캡처 현상 : 클릭 이벤트를 바인딩하지 않는 DIV 및 버튼을 클릭하면 "Baby"대화 상자가 나타납니다.
실제 프로젝트에서는 이벤트 버블과 이벤트 캡처를 방지하려고합니다.
이벤트가 거품을 방지하는 방법 :
방법 1 : 현재 클릭 이벤트에서 False를 반환합니다.
코드 사본은 다음과 같습니다.
$ ( '#clickme'). 클릭 (function () {
경고 ( 'Hello');
거짓을 반환합니다.
});
방법 2 : 방법 2.
코드 사본은 다음과 같습니다.
$ ( '#clickme'). 클릭 (함수 (이벤트) {
경고 ( 'Hello');
var e = Window.event || 이벤트;
if (e.StopPropagation) {// 이벤트 객체가 제공되는 경우 이것은 Nonie 브라우저입니다.
E.StopPropagation ();
}또 다른{
// 이벤트 버블을 취소하는 IE 호환 방법
Window.event.cancelBubble = true;
}
});
캡처 이벤트를 차단할 수없는 것 같습니다