JS 버블 메커니즘은 이벤트가 트리거 된 후 버블 이벤트가 차단되지 않으면 요소가 이벤트 A를 정의하는 경우를 나타냅니다.
다음 예에서 볼 수 있듯이 :
코드 사본은 다음과 같습니다.
<html>
<script type = "text/javaScript"src = "jQuery-1.7.1.js"> </script>
<cript>
함수 IALERTDOUBLE (e) {
경고 ( 'InnerDouble');
STOPBUBBLE (E);
}
함수 IALERTTHREE (e) {
경고 ( '내부');
STOPBBLEDOUBLE (E);
}
함수 stopbubble (e) {
var evt = e || window.event;
evt.stoppropagation? evt.stoppropagation () :( evt.cancelbubble = true); // 거품이 팽창하지 못하도록;
}
함수 stopBubbledouble (e) {
var evt = e || window.event;
evt.stoppropagation? evt.stoppropagation () :( evt.cancelbubble = true); // 거품이 팽창하지 못하도록;
evt.preventDefault (); // 링크가 점프되지 않도록 브라우저의 기본 동작을 차단합니다.
}
$ (function () {
// 메소드 1
//$('#JQueryTest ') .click(Function(Event) {
// Alert ( 'Innerfour');
// event.stopPropagation ();
// event.preventDefault ();
//});
// 방법 2
$ ( '#jQueryTest'). 클릭 (function () {
경고 ( 'Innerfour');
거짓을 반환합니다.
});
});
</스크립트>
<div onclick = "alert ( 'nudry');">없이
<div onclick = "alert ( 'middle');"> 중간
<div onclick = "alert ( '내부');"> 내부 </div>
<div onclick = "iAlertDouble (이벤트)"> 내부 ouble </div>
<p> <a href = 'http : //www.baidu.com'onclick = "ialertthree (event)"> 내부 </a> </p>
<p id = 'jQueryTest'> <a href = 'http : //www.baidu.com'> Innerfour </a> </p>
</div>
</div>
</html>
내부를 클릭하면 '내부', '중간'및 '없는'이 차례로 나타납니다. 이것은 이벤트 버블입니다.
직관적으로 말하면, 가장 안쪽 영역은 부모 노드를 클릭하면 실제로 상위 노드 영역을 클릭하면 이벤트가 퍼지기 때문입니다.
사실, 여러 번, 우리는 이벤트가 버블 링을 원하지 않습니다. 왜냐하면 이것은 여러 이벤트가 동시에 트리거되기 때문입니다.
다음 : InnerDouble을 클릭합시다. 그녀는 호출 된 메소드 iAlertDouble ()에서 stopBubble () 메소드를 호출했기 때문에 버블 링되지 않았다는 것을 알게 될 것입니다.
그러나 그것이 링크 인 경우, 우리는 그것이 거품을 방지 할 것이지만, 점프는 브라우저의 기본 동작입니다. extendefault () 메소드를 사용하여 차단해야합니다. 자세한 내용은 iAlertthree ()를 확인할 수 있습니다.
현재 주류 사람들은 jQuery를 사용하여 클릭 이벤트를 묶습니다. 이는 훨씬 간단합니다.
이벤트를 클릭 할 때 매개 변수 이벤트를 통과 한 다음 직접
event.stopPropagation ();
event.preventDefault ();
그게 다야.
프레임 워크는 좋지만 실제로는 이벤트 핸들러에 더 간단한 리턴이 있습니다.
[위의 자세한 코드를 참조하십시오. JQuery.js를로드하십시오. 】
실제로 각 클릭 이벤트에 판단을 추가 할 수도 있습니다.
코드 사본은 다음과 같습니다.
$ ( '#id'). 클릭 (function (event) {
if (event.target == this) {
// 무언가를합니다
}
})
분석 : 이벤트 핸들러의 변수 이벤트는 이벤트 객체를 저장합니다. Target 속성은 이벤트의 대상 요소를 보유합니다. 이 속성은 DOM API에 지정되어 있지만 모든 브라우저에서 구현되지는 않습니다. jQuery는이 속성이 모든 브라우저에서 사용할 수 있도록이 이벤트 객체에 필요한 확장을합니다. .target을 사용하면 이벤트를 먼저 수신하는 DOM의 요소를 결정할 수 있습니다 (즉, 실제로 클릭 한 요소). 또한, 우리는 이것이 이벤트를 처리하는 DOM 요소를 말하므로 위의 코드를 쓸 수 있습니다.
그러나 jQuery가 이벤트를 바인 경우 Return False를 사용하는 것이 좋습니다.