Js 버블링 이벤트 상세 설명 및 차단 example_javascript 스킬

JS 버블링 메커니즘은 요소가 클릭 이벤트와 같은 이벤트 A를 정의하고 이벤트가 트리거되고 버블링 이벤트가 차단되지 않은 경우 해당 이벤트가 상위 요소로 전파되어 상위 요소의 클릭 기능을 트리거한다는 것을 의미합니다. 수업.
다음 예시와 같습니다.

코드를 복사하세요 코드는 다음과 같습니다.

<script> e) { <br> 경고('innerdouble'); <br>stopBubble(e) <br>} <br><br>function ialert three(e) { <br>alert('innertwo'); stopBubbleDouble(e); <br>} <br><br>function stopBubble(e) { <br>var evt = e||window.event; <br>evt.stopPropagation?evt.stopPropagation():(evt. cancelBubble=true);/ /버블링 중지<br>} <br><br>function stopBubbleDouble(e) { <br>var evt = e||window.event; <br>evt.stopPropagation?evt.stopPropagation() :(evt.cancelBubble =true);//버블링 방지<br>evt.preventDefault();//링크가 점프하지 않도록 브라우저의 기본 동작을 방지<br>} <br><br>$(function( ) { <br>//방법 1<br>//$('#jquerytest').click(function(event) { <br>// Alert('innerfour'); <br>// event.stopPropagation( ); <br>// event.preventDefault(); <br><br>//방법 2<br>$('#jquerytest').click(function() { <br>alert( 'innerfour'); <br>return false; <br>}) <br></script>

없음

중간

inner

< div onclick="ialertdouble(event)">innerdouble

innerThree< ;/a>

innerfour< /p>

'내부', '중간'이 나타납니다. 순서대로 그리고 '없이'. 이것이 이벤트 버블링입니다.

직관적으로도 마찬가지인데, 가장 안쪽 영역이 부모 노드에 있기 때문입니다. 자식 노드의 영역을 클릭하면 실제로는 부모 노드의 영역을 클릭하게 되므로 이벤트가 확산됩니다. .

실제로 우리는 이벤트가 버블링되는 것을 원하지 않는 경우가 많습니다. 이렇게 하면 여러 이벤트가 동시에 트리거되기 때문입니다.

다음: innerdouble을 클릭합니다. ialertdouble() 호출 메서드에서 stopBubble() 메서드를 호출하기 때문에 버블링이 발생하지 않는다는 것을 알 수 있습니다. 이 메서드는 브라우저 유형을 결정하여 버블링을 방지합니다(예: cancleBubble()를 사용하고 Firefox는 stopProgation()을 사용함).

하지만 링크인 경우 버블링도 방지되지만 점프는 브라우저의 기본 동작입니다. 이를 방지하려면 PreventDefault() 메소드를 사용해야 합니다. 자세한 내용은 ialert three()를 참조하세요.

현재 주류 방법은 jquery를 사용하여 클릭 이벤트를 바인딩하는 것입니다.

이벤트를 클릭할 때 매개변수 이벤트를 전달한 다음 직접

event.stopPropagation()
event.preventDefault(); 링크가 없습니다.

그렇습니다.

프레임워크는 좋지만 실제로 이벤트 핸들러에서 false를 반환하는 더 쉬운 방법이 있습니다. 이는 이벤트 개체에서 stopPropagation()과 PreventDefault()를 동시에 호출하는 간단한 방법입니다.
[위의 자세한 코드를 참조하세요. jquery.js를 로드하는 것을 잊지 마세요. ]

실제로 각 클릭 이벤트에 판단을 추가할 수도 있습니다.




코드 복사

코드는 다음과 같습니다. 다음: $('#id').click(function(event){ if(event.target==this){ //뭔가를 하세요 }

})

분석: 이벤트 핸들러의 이벤트 변수는 이벤트 개체를 저장합니다. event.target 속성은 이벤트가 발생한 대상 요소를 저장합니다. 이 속성은 DOM API에 지정되지만 모든 브라우저에서 구현되는 것은 아닙니다. jQuery는 이 속성을 모든 브라우저에서 사용할 수 있도록 이 이벤트 개체에 필요한 확장을 만듭니다. .target을 사용하면 이벤트를 처음 수신한 DOM 요소(예: 실제로 클릭된 요소)를 확인할 수 있습니다. 게다가 이것이 이벤트를 처리하는 DOM 요소를 참조한다는 것을 알고 있으므로 위의 코드를 작성할 수 있습니다.

단, Jquery가 이벤트를 바인딩하는 경우 return false를 사용하는 것이 좋습니다.