js_javascript 기술의 PreventDefault 및 stopPropagation에 대한 자세한 설명-JS 튜토리얼-php.cn

js_javascript 기술의 PreventDefault 및 stopPropagation에 대한 자세한 설명

WBOY

풀어 주다： 2016-05-16 17:01:38

원래의

1207명이 탐색했습니다.

먼저 js의 PreventDefault 메소드와 stopPropagation 메소드의 차이점을 설명해 보겠습니다.
preventDefault 메소드의 기능은 무엇인가요? 예를 들어 Baidu는 이것이 HTML의 가장 기본적인 것이며 그 기능은 http에 대한 Baidu 링크를 클릭하는 것입니다. //www.baidu.com, 이는 태그의 기본 동작이며, PreventDefault 메소드는 기본 동작이 발생하는 것을 방지하고 다른 일이 발생하는 것을 방지할 수 있습니다. 코드를 보면 누구나 이해할 수 있습니다.

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

JS는 링크 점프를 방지합니다

Baidu< /a>

이때 Baidu 링크를 클릭하면 http://www.baidu.com이 열리지 않고 경고 대화 상자만 나타납니다.

여기에서는 PreventDefault 메소드에 대해 설명했는데 stopPropagation 메소드는 어떻습니까? stopPropagation 메소드에 대해 이야기하기 전에 먼저 js 이벤트 프록시에 대해 설명해야 합니다.

이벤트 프록시는 JavaSciprt 이벤트에서 종종 간과되는 두 가지 기능인 이벤트 버블링과 대상 요소를 사용합니다. 버튼을 마우스로 클릭하는 것과 같이 요소에서 이벤트가 트리거되면 해당 요소의 모든 상위 요소에서 동일한 이벤트가 트리거됩니다. 이 프로세스를 이벤트 버블링이라고 합니다. 이벤트는 원래 요소에서 DOM 트리의 맨 위로 올라갑니다. 모든 이벤트에서 대상 요소는 원본 요소이며, 우리의 경우에는 버튼입니다. 대상 요소 이벤트 개체의 속성으로 나타납니다. 이벤트 프록시를 사용하면 요소에 이벤트 핸들러를 추가하고, 이벤트가 하위 요소에서 버블링될 때까지 기다리며, 이벤트가 시작된 요소를 쉽게 확인할 수 있습니다.

stopPropagation 메소드는 js 이벤트가 발생하는 것을 방지하는 것입니다. 코드를 살펴보세요.

코드 복사 코드는 다음과 같습니다.

버블 전달 팝업(cancelBubble, stopPropagation)

<script> function doSomething (obj,evt) { Alert(obj.id); var e=(evt)?evt:window.event; if (window.event) { e.cancelBubble = true;// ie에서 버블링 방지 } else { //e.preventDefault(); e.stopPropagation();// 다른 브라우저에서 버블링 방지 } } </script>

부모1 div입니다.

child1입니다.

parent1 div입니다.

이것은 parent2 div입니다.

이것은 child2입니다. 버블이 발생합니다.

이것은 parent2 div입니다. .

위 코드를 실행해 보시면 이해가 되실 겁니다.