JS 에서 귀속 이벤트 실행 순서 제어
id3 요 소 를 클릭 할 때 실행 결 과 는 id2, id3, id1 입 니 다.
해석: obj 2 바 인 딩 방법 은 캡 처 단계 에서 실행 되 기 때문에 obj 1 과 obj 3 바 인 딩 사건 은 거품 단계 에서 실 행 됩 니 다.
JS 는 기본 적 인 상황 에서 사건 을 가 져 온 후 루트 요소 부터 이 사건 의 감청 대상 을 모두 포착 한 다음 거품 단계 에서 하나씩 실행 합 니 다.우 리 는 귀속 이 벤트 를 통 해 이벤트 가 실 행 될 때 거품 단계 인지 포획 단 계 를 지정 할 수 있 습 니 다.
obj.addEventListener(event,function(){},bool)
bool: false, 거품 단계 실행 대표
bool: true, 포획 단계 실행 대표
사건 거품
거품 을 막다
w3c 의 방법 은 e. stopPropagation () 이 고 IE 는 e. cancelBubble = true 를 사용 합 니 다.
묵인 행 위 를 저지 하 다
w3c 의 방법 은 e. preventDefault () 이 고 IE 는 e. returnValue = false 를 사용 합 니 다.
그래서 상소 예 에서 만약 에 우리 가 모든 사건 에 거품 행 위 를 막 았 다 면:
즉, 항소 JS 코드 는 다음 과 같은 내용 으로 바 뀌 었 습 니 다.
<!Doctype html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
*{margin:0;padding: 0;}
</style>
</head>
<body>
<div id="id1" style="height:400px; background-color:blue; border:1px solid #000;">
<div id="id2" style="height:200px; background-color:yellow; border:1px solid #000;">
<div id="id3" style="height:50px; background-color:red; border:1px solid #000;"></div>
</div>
</div>
</body>
<script type="text/javascript">
var obj1=document.getElementById('id1');
obj1.addEventListener('click',function(){
alert('id1');
},false);
var obj2=document.getElementById('id2');
obj2.addEventListener('click',function(){
alert('id2');
},true);
var obj3=document.getElementById('id3');
obj3.addEventListener('click',function(){
alert('id3');
},true);
/* true， ， false， */
</script>
</html>id3: 실행 결과: id2 를 누 르 면
id2: 실행 결과: id2 를 누 르 면
id1: 실행 결과: id1 을 누 르 면
이 를 통 해 사건 의 거품 을 막 았 고 사건 이 계속 하급 으로 잡 히 는 것 도 막 았 다.
테스트 사용 브 라 우 저: Google Chrome 주요 기능
이 내용에 흥미가 있습니까?
현재 기사가 여러분의 문제를 해결하지 못하는 경우 AI 엔진은 머신러닝 분석(스마트 모델이 방금 만들어져 부정확한 경우가 있을 수 있음)을 통해 가장 유사한 기사를 추천합니다:
다양한 언어의 JSONJSON은 Javascript 표기법을 사용하여 데이터 구조를 레이아웃하는 데이터 형식입니다. 그러나 Javascript가 코드에서 이러한 구조를 나타낼 수 있는 유일한 언어는 아닙니다. 저는 일반적으로 '객체'{}...
텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
CC BY-SA 2.5, CC BY-SA 3.0 및 CC BY-SA 4.0에 따라 라이센스가 부여됩니다.
좋은 웹페이지 즐겨찾기
