js 이벤트 메커니즘-포획 및 거품 메커니즘 실례 분석
먼저 이벤트 바 인 딩 메커니즘 부터 말하자면 이벤트 바 인 딩 메커니즘 은 바 인 딩 방법 addEventListener()를 통 해 이 루어 집 니 다.
문법 형식 은 다음 과 같 습 니 다.
element.addEventListener(event, function, useCapture)
매개 변수 값
매개 변수
묘사 하 다.
event
반드시.문자열,이벤트 이름 을 지정 합 니 다.
주의: "on"접 두 사 를 사용 하지 마 세 요.예 를 들 어'onclick'대신'click'을 사용 합 니 다.
알림: 모든 HTML DOM 이벤트 HTML DOM 이벤트 대상 참조 매 뉴 얼 。
function
반드시.이벤트 가 실 행 될 함 수 를 지정 합 니 다.
이벤트 대상 이 첫 번 째 매개 변수 로 함수 에 전 달 됩 니 다.사건 대상 의 유형 은 특정한 사건 에 달 려 있다.예 를 들 어'click'이 벤트 는 마우스 이벤트(마우스 이벤트)대상 에 속한다.
useCapture
선택 할 수 있다.불 값,이벤트 가 캡 처 또는 거품 단계 에서 실 행 될 지 여 부 를 지정 합 니 다.
가능 한 값:
true-이벤트 핸들 은 캡 처 단계 에서 실 행 됩 니 다false-false-기본 값.이벤트 핸들 은 거품 단계 에서 실 행 됩 니 다세 번 째 매개 변 수 는 불 값 을 볼 수 있 습 니 다.true 는 캡 처 단계 에서 실 행 됩 니 다.false 는 거품 단계 에서 실 행 됩 니 다.
그래서 포획 과 거품 은 무엇 입 니까?
캡 처(capture)와 거품(bubble)은 이벤트 전파 과정 에서 두 가지 개념 입 니 다.예 를 들 어 사용자 가 특정한 요 소 를 클릭 하지만 요소 가 부모 요소 에 있 기 때문에 이 부모 요 소 는 document 대상 에 있 고 document 대상 은 window 대상 에 있 기 때문에 이 단 추 를 누 르 면 실제 적 으로 이 요소,부모 요소,document,window 대상 에서 발생 합 니 다.이벤트 전파 과정 은 브 라 우 저가 어떤 대상 의 이벤트 처리 함 수 를 순서대로 촉발 할 지 결정 하 는 과정 이다.
DOM 이벤트 모델 은 사건 전파 과정 을 두 단계 로 나 누 었 다.포획 단계 와 거품 단계 이다.
이벤트 캡 처 단계 에서 사건 은 최상 위 부모 요소 에서 한 층 씩 안 으로 전 달 됩 니 다.
거품 단계 에서 사건 은 사건 발생 의 직접적인 요소 에서 아버지 요소 로 전달 된다.
여기에 간단 한 예 를 들 자.
손자 요 소 를 클릭 하여 body 에 있 는 요 소 를 클릭 이벤트 에 추가 하고 트리거 이벤트 의 대상 id 를 출력 합 니 다.
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<div id=" ">
<div id=" ">
<div id=" " style="width:100px; height:100px; background-color:yellow">
</div>
</div>
</div>
</body>
<script type="text/javascript">
var a = document.getElementById(' '),
b = document.getElementById(' '),
c = document.getElementById(' ');
a.addEventListener("click",show, true);
b.addEventListener("click",show, true);
c.addEventListener("click",show, true);
console.log(" 3 , ");
a.addEventListener("click",show, false);
b.addEventListener("click",show, false);
c.addEventListener("click",show, false);
function show(even){ console.log(this.id); }
</script>
</html>
그 중에서 두 손자 의 출력 이 똑 같이 접 혔 습 니 다.앞의 세 번 째 는 포획 순서 이 고 세 번 째 매개 변 수 는 true 이 며 순 서 는 아버지 에서 손자 까지 입 니 다.
뒤의 세 가 지 는 false 라 는 뜻 으로 거품 이 나 는 순서 이 고 순 서 는 손자 에서 아버지 급,즉 안에서 밖으로 나 가 는 것 이다.
실제로 포획 과 거품 이 생 겼 을 때 가장 바깥쪽 과 원 소 는 아버지 급 div 가 아 닙 니 다.
포획 시 실제:
document-->html-->body-->부모 div-->아들 div-->손자 div
거품 이 생 겼 을 때 는 반대로 body 및 이상 에 사건 을 추가 하고 출력 하지 않 았 기 때문에 예 에서 나타 나 지 않 았 습 니 다.
그래서 거품 으로 잡 는 거 야,잡 는 거 야?
이벤트 에이전트 의 경우 이벤트 캡 처 나 이벤트 거품 단계 에서 처리 하 는 것 은 뚜렷 한 우열 의 구분 이 없 지만 이벤트 거품 의 이벤트 흐름 모델 이 모든 주류 브 라 우 저 에 의 해 호 환 되 기 때문에 호환성 측면 에서 볼 때 이벤트 거품 모델 을 사용 하 는 것 을 권장 합 니 다.
관심 있 는 친 구 는 온라인 HTML/CSS/JavaScript 코드 실행 도 구 를 사용 할 수 있 습 니 다.
더 많은 자 바스 크 립 트 관련 내용 에 관심 이 있 는 독 자 는 본 사이트 의 주 제 를 볼 수 있다.,,,,,,,,,,
본 고 에서 말 한 것 이 여러분 의 자 바스 크 립 트 프로 그래 밍 에 도움 이 되 기 를 바 랍 니 다.
이 내용에 흥미가 있습니까?
현재 기사가 여러분의 문제를 해결하지 못하는 경우 AI 엔진은 머신러닝 분석(스마트 모델이 방금 만들어져 부정확한 경우가 있을 수 있음)을 통해 가장 유사한 기사를 추천합니다:
[2022.04.19] 자바스크립트 this - 생성자 함수와 이벤트리스너에서의 this18일에 this에 대해 공부하면서 적었던 일반적인 함수나 객체에서의 this가 아닌 오늘은 이벤트리스너와 생성자 함수 안에서의 this를 살펴보기로 했다. new 키워드를 붙여 함수를 생성자로 사용할 때 this는...
텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
CC BY-SA 2.5, CC BY-SA 3.0 및 CC BY-SA 4.0에 따라 라이센스가 부여됩니다.
좋은 웹페이지 즐겨찾기
