지역 사회 배우다 도구 라이브러리 여가
찾다
한국어
집 > 웹 프론트엔드 > JS 튜토리얼 > JQurey 시작하기 - 이벤트 메커니즘_jquery의 버블링 현상의 예

JQurey 시작하기 - 이벤트 메커니즘_jquery의 버블링 현상의 예

WBOY
풀어 주다： 2016-05-16 17:42:09
원래의
1051명이 탐색했습니다.

1. 사용자가 페이지를 탐색하면 브라우저가 페이지 코드를 해석하거나 컴파일합니다. 이 프로세스는 기본적으로 이벤트 기반입니다. 즉, 페이지가 로드되면 Load 이벤트가 실행됩니다. . 이 이벤트에서는 브라우저가 페이지 코드를 컴파일하는 프로세스가 구현됩니다. 이벤트가 발생한 후에는 Capture와 Bubbing의 두 단계로 나누어지는데, 대부분의 브라우저는 캡처 단계를 지원하지 않기 때문에 이벤트가 발생한 후에 버블링 프로세스를 실행하는 경우가 많습니다.

2. 샘플 코드:

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



이벤트 버블링

>

🎜>




3.


클릭 후:

한 번 클릭하면 실행 횟수가 3번으로 표시됩니다. 이는 실행 과정에서 이벤트가 버블링 현상이 발생하기 때문입니다. 즉, 클릭은 버튼이지만 동시에
요소를 둘러싼
요소의 이벤트도 발생합니다. 또한 전체 프로세스는 버블링 프로세스입니다. 버블링 프로세스가 발생하는 것을 방지하는 방법은 stopPropagation() 메소드를 통해 달성하거나 false를 반환할 수 있습니다.



코드 복사

코드는 다음과 같습니다.




효과 그림은 다음과 같습니다.


클릭 후

이전 기사：window.open 분석 및 브라우저 차단 문제 해결 방법_javascript 기술 다음 기사：jQuery.prototype.init 선택기 생성자 소스 코드 아이디어 analyze_jquery
본 웹사이트의 성명
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.
저자별 최신 기사
최신 이슈
모바일 보기에서 사용자가 링크를 클릭할 때 이 탐색 표시줄을 어떻게 닫을 수 있나요? 사용자가 웹 사이트를 탐색하기 위해 링크를 클릭하면 탐색 표시줄이 닫히지 않습니까? 내비게이션 바를 닫기 위해 각 링크에 클릭 이벤트 리스너를 추가해 보았지만 작...
에서 2024-04-06 19:23:03
0
1
411
웹 애플리케이션에 버전 정보를 표시하는 모범 사례는 무엇입니까? 웹 애플리케이션을 개발 중입니다. 웹 애플리케이션에 버전 정보를 표시하는 모범 사례는 무엇입니까? 저는 semantic versioning을 사용하고 있고 이미 ...
에서 2024-04-06 19:13:16
0
2
476
d3.js를 확대할 때 산점도 값이 유지되지 않습니다. d3.js를 처음 사용하는 것이므로 양해해 주시기 바랍니다. vue.js 파일에 순수 JavaScript로 구현했습니다. 확대/축소 기능을 사용하여 산점도를 만들...
에서 2024-04-06 18:16:26
0
1
403
사이트에 CSS 스타일이 적용되지 않음 Bootstrap5를 사용하여 웹사이트를 만들고 있는데 index.css 속성이 index.html에 적용되지 않습니다. 서비스 카드 위로 마우스를 가져가면 배경...
에서 2024-04-06 17:12:23
0
1
336
공급업체별 의사 요소에 대한 JavaScript 호버 이벤트 나는 아래에 HTMLinput标签。$("input[type='range']::-webkit-slider-thumb").on('hover',fun...
에서 2024-04-06 15:35:24
0
1
274
관련 주제
더>
인기 추천
인기 튜토리얼
더>
관련 튜토리얼
인기 추천
최신 강좌
최신 다운로드
더>
웹 효과
웹사이트 소스 코드
웹사이트 자료
프론트엔드 템플릿