Javascript의 이벤트 거품 및 이벤트 캡처
이 사건들이 어떻게 처리되는지는 웹 페이지의 사용자 우호도를 결정한다.
이벤트 거품과 이벤트 포획은 자바스크립트에서 이벤트 전파/흐름의 두 단계입니다.이벤트 흐름은 기본적으로 웹 페이지에서 이벤트를 수신하는 순서이다.Javascript에서 이벤트 흐름은 3단계로 나뉩니다.
우리 먼저 거품을 알아보자.
이벤트 거품:
거품은 하나의 사건 흐름으로 하나의 사건이 하나의 요소에서 발생할 때 그 자체에서 처리 프로그램을 실행한 다음에 그 부급에서 실행한 다음에 그 모든 조상에서 실행한다.
그것은 기본적으로 가장 안쪽의 원소에서 가장 바깥의 원소로 위로 이동한다.
예를 들면 이 점을 더 잘 이해할 수 있다 -
<body>
<div id="grandparent">
<p>Grandparent</p>
<div id="parent">
<p>Parent</p>
<div id="child">
<p>Child</p>
</div>
</div>
</div>
<button onClick="history.go(0)">
Reset Elements
</button>
</body>
child, parent 및 grandparent를 준다.스타일 추가
div {
min-width: 75px;
min-height: 75px;
padding: 25px;
border: 1px solid black;
}
button {
margin-top: 20px;
width: 200px;
font-size: 14px;
padding: 10px;
}
click 이벤트를 설정합니다document.querySelector("#grandparent").addEventListener("click", () => {
document.querySelector("#grandparent > p").textContent =
"Grandparent Clicked!";
console.log("Grandparent Clicked");
});
document.querySelector("#parent").addEventListener("click", () => {
document.querySelector("#parent > p").textContent = "Parent Clicked!";
console.log("Parent Clicked");
});
document.querySelector("#child").addEventListener("click", () => {
document.querySelector("#child > p").textContent = "Child Clicked!";
console.log("Child Clicked");
});
상기 코드는 다음과 같이 실행될 것이다-
childdiv를 눌러도 조상의 모든 처리 프로그램이 터치됩니다.이와 같이 parentdiv를 누르면 grandparentdiv의 처리 프로그램도 자극됩니다.단, 이 예에서 childdiv의 처리 프로그램은 터치되지 않는다는 것을 기억하십시오.하지만 여기서 더 중요한 것은 사건 발생 방식이다.그것은 가장 안쪽의 원소, 즉
childdiv에서 시작하여 위로 차원 구조로 전파되고 최종적으로 parentdiv(이 순서에 따라 엄격히 한다)에 도달한다.이런 유형의 사건 흐름을 사건 거품이라고 부른다.
이벤트 캡처:
포착 원리는 기포와 완전히 상반된다.
이벤트 포획에서 이벤트는 가장 바깥쪽 요소에서 가장 안쪽 요소로 전파된다.사건 포획은 때때로 사건 적류라고도 부른다.
Javascript를 사용할 때 우리는 자주
grandparent 를 사용하는데 그 중에서 우리는 보통 두 개의 매개 변수를 전달한다-addEventListener() 함수는 세 번째 숨겨진 매개 변수-addEventListener()를 사용하고 이 매개 변수는 부울 값을 사용한다.이 useCapture 매개 변수는 기본값이false로 설정됩니다.이것을false로 설정하여 우리의 사건을 거품 원리로 전파합니다.이것을true로 설정하면 그것들을 위에서 아래로 전파하는 방식, 즉 포획할 수 있습니다.이벤트 캡처를 위해 JS 코드를 약간 변경합니다. -
document.querySelector("#grandparent").addEventListener("click", () => {
document.querySelector("#grandparent > p").textContent =
"Grandparent Clicked!";
console.log("Grandparent Clicked");
},true); // useCapture parameter is now set to true
document.querySelector("#parent").addEventListener("click", () => {
document.querySelector("#parent > p").textContent = "Parent Clicked!";
console.log("Parent Clicked");
},true); // useCapture parameter is now set to true
document.querySelector("#child").addEventListener("click", () => {
document.querySelector("#child > p").textContent = "Child Clicked!";
console.log("Child Clicked");
},true); // useCapture parameter is now set to true
이벤트 흐름이 현재 어떻게 최외층 원소에서 최내층 원소로 전파되는지 주의하십시오.
i、 e
useCapture->grandparent->parent이런 사건의 흐름을 사건 포획이라고 부른다.끝내다
내가 먼저 물집이 생기는 원인에 대해 이야기한 것은 사건 포획을 거의 사용하지 않기 때문이다.기본값은false입니다.대부분의 브라우저에서 이벤트 거품은 기본적인 이벤트 흐름 방식입니다.
Javascript는 상호작용 웹 응용 프로그램을 만드는 데 도움을 줍니다.그것은 대량의 사용자가 생성한 사건을 이용했다.사이트의 사용자 체험은 이 사건들이 어떻게 처리되는지에 달려 있다.따라서 사건의 작업 방식과 그 배후의 절차를 이해하는 것이 중요하다.
직접 시연하고 싶으면 여기 Codepen 링크가 있습니다.
만약 당신이 읽은 내용을 좋아한다면 트위터에서 저를 팔로우하고 언제든지 업데이트하세요.
나는 앞으로 며칠 동안 자바스크립트에 관한 유사한 글을 쓸 계획이다.
Reference
이 문제에 관하여(Javascript의 이벤트 거품 및 이벤트 캡처), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://dev.to/afrazchelsea/event-bubbling-and-event-capturing-in-javascript-3og8텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
우수한 개발자 콘텐츠 발견에 전념
(Collection and Share based on the CC Protocol.)
좋은 웹페이지 즐겨찾기
