js 클릭 이벤트 의 실행 과정 실례 분석[거품 과 포획]
js 이벤트 대상 이 벤트 는 많은 이벤트 유형 을 포함 합 니 다.여 기 는 onclick 사건 을 예 로 들 어 js 이벤트 캡 처 체제 와 거품 체제 에서 의 집행 과정,그리고 사건 의 캡 처 와 거품 을 어떻게 막 는 지 연구 합 니 다.
우선 요 소 를 클릭 하면 브 라 우 저의 실행 과정 을 봅 니 다.
1.특정한 요소 가 연 결 된 이벤트 가 실 행 될 때 브 라 우 저 는 최상 위 document 요소 에서 이벤트 흐름 을 보 냅 니 다.
2.이 사건 의 흐름 은 dom 등급 을 따라 한 층 한 층 아래로 찾 습 니 다.사건 을 촉발 하 는 목표 요 소 를 만 날 때 까지 이 검색 과정 은 캡 처 단계 입 니 다.
설명:캡 처 단계,각 층 dom 을 찾 을 때 같은 이벤트 가 기본적으로 실행 되 지 않 습 니 다.요소 의 이 벤트 는 기본적으로 거품 단계 에서 실 행 됩 니 다.
3.목표 요소 에 도달 하면 목표 요소 가 연 결 된 이벤트 함수,즉 목표 요소 이벤트 함수 처리 단 계 를 촉발 합 니 다.
4.목표 요소 사건 을 처리 한 후에 dom 을 따라 한 층 한 층 위로 찾 습 니 다.이때 dom 에 같은 사건 이 있 으 면 기본 값 으로 촉발 되 고 거품 단계 가 발생 합 니 다.
실례:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<div class="box" style="width:300px;height:300px;background:green;" οnclick="firstClick()">
parent
<div class="child" οnclick="secondClick()">child
<div class="button" onclick = "thirdClick()"> </div>
</div>
</div>
<script>
var divs=document.querySelectorAll("div");// divs
function firstClick(){
alert('firstClick')
}
function secondClick(){
alert('secondClick')
}
function thirdClick(){
alert('thirdClick')
}
function fn0(){
alert("box");
}
function fn1(){
alert("child");
}
function fn2(){
alert("but");
}
divs[0].addEventListener("click",fn0,false);
divs[1].addEventListener("click",fn1,false);
divs[2].addEventListener("click",fn2,false);
</script>
</body>
</html>
addEventListener 는 세 개의 매개 변수 가 있 습 니 다.마지막 매개 변 수 는 요소 이벤트 의 트리거 단 계 를 결정 합 니 다.기본 값 은 false 이 고 거품 단계 에서 실 행 됩 니 다.true 로 설정 하면 캡 처 단계 에서 실 행 됩 니 다.
dom 에 직접 연 결 된 이 벤트 는 addEventListener 가 감청 한 이벤트 가 실 행 된 후에 실 행 됩 니 다.
거품 방지:
onclick = function(e){
e=e||window.event;
if(e.stopPropagation){
e.stopPropagation();//
}else{
e.cancelBubble=true;//IE
}
}
function fn0(e){
if(e.target == divs[0]){
alert("fn0");
}
}
divs[0].addEventListener("click",fn0,true);
자 바스 크 립 트 관련 내용 에 관심 이 있 는 독자 들 은 본 사이트 의 주 제 를 볼 수 있다.
본 고 에서 말 한 것 이 여러분 의 자 바스 크 립 트 프로 그래 밍 에 도움 이 되 기 를 바 랍 니 다.
이 내용에 흥미가 있습니까?
현재 기사가 여러분의 문제를 해결하지 못하는 경우 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에 따라 라이센스가 부여됩니다.
좋은 웹페이지 즐겨찾기
