이벤트 거품,이벤트 캡 처 및 이벤트 의뢰 에 대한 상세 한 설명
javascript 에서 사건 의뢰 는 매우 중요 한 것 입 니 다.사건 의뢰 는 사건 의 거품 과 캡 처 메커니즘 에 의존 합 니 다.제 가 먼저 사건 의 거품 과 사건 캡 처 를 설명 하 겠 습 니 다.
이벤트 거품 은 현재 촉발 한 이벤트 목표 의 1 급 1 급 에서 위로 전달 되 며,document 까지 순서대로 촉발 합 니 다.
이벤트 캡 처 는 document 에서 시작 하여 1 급 1 급 아래로 전달 되 며,실제 이벤트 목표 까지 순서대로 촉발 합 니 다.
이렇게 말 하면 매우 추상 적 이지 않 습 니까?사실은 제 가 키 보드 를 두 드 린 것 과 같 습 니 다.제 가 키 보드 를 두 드 리 는 동시에 저도 이 컴퓨터 를 두 드 렸 습 니까?제 가 예 를 들 면 여러분 은 알 수 있 습 니 다.
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<style type="text/css">
#box1 { width: 300px; height: 300px; background: blueviolet; }
#box2 { width: 200px; height: 200px; background: aquamarine; }
#box3 { width: 100px; height: 100px; background: tomato; }
div { overflow: hidden; margin: 50px auto; }
</style>
<body>
<div id="box1">
<div id="box2">
<div id="box3"></div>
</div>
</div>
<script>
function sayBox3() {
console.log(' box');
}
function sayBox2() {
console.log(' box');
}
function sayBox1() {
console.log(' box');
}
// ， ， false，false ，true
document.getElementById('box3').addEventListener('click', sayBox3, false);
document.getElementById('box2').addEventListener('click', sayBox2, false);
document.getElementById('box1').addEventListener('click', sayBox1, false);
</script>
</body>
</html>
우 리 는 빨간색 box 만 클릭 한 것 을 발 견 했 습 니 다.그러나 녹색 과 자주색 box 도 인쇄 사건 을 촉발 시 켰 습 니 다.접촉 순 서 는 빨간색>녹색>자주색 입 니 다.이런 현상 은 바로 사건 의 거품 입 니 다.
이벤트 캡 처 를 다시 시도 해 보 겠 습 니 다.위 코드 에서 사건 을 감청 하 는 세 번 째 매개 변 수 를 true 로 바 꾼 다음 빨간색 box 를 누 르 십시오.
우 리 는 여전히 가장 중간 에 있 는 빨간색 box 만 클릭 합 니 다.지난번 과 마찬가지 로 세 box 가 모두 사건 을 일 으 켰 지만 순 서 는 반대로 보라색>녹색>빨간색 이 라 고 합 니 다.이런 현상 을 사건 포착 이 라 고 합 니 다.
위의 예 를 통 해 사건 의 거품 과 사건 포착 을 쉽게 이해 할 수 있 을 것 입 니 다.우 리 는 평소에 기본적으로 거품 이 발생 합 니 다.거품 은 document 루트 문서 까지 발생 합 니 다.
이제 사건 의뢰 를 이야기 하 겠 습 니 다.사건 의뢰 는 사건 대리 라 고도 부 릅 니 다.우 리 는 통속 적 인 예 를 통 해 설명 합 니 다.
세 명의 동료 가 월요일 에 택 배 를 받 을 예정 입 니 다.택 배 를 받 기 위해 두 가지 방법 이 있 습 니 다.1.세 사람 이 회사 입구 에서 택 배 를 기다 리 는 것 입 니 다.2.프런트 MM 에 의뢰 하여 수령 을 대신 합 니 다.현실 에서 우 리 는 대부분 위탁 방안 을 채택 한다.프런트 MM 이 택 배 를 받 으 면 받 는 사람 이 누구 인지 판단 한 뒤 받 는 사람의 요구 에 따라 서명 하고 대신 지불 하기 도 한다.이런 방안 은 또 하나의 장점 이 있다.즉,회사 에 신 입 사원(얼마 가 되 든)이 오 더 라 도 프런트 MM 은 신 입 사원 에 게 보 낸 택 배 를 받 은 후에 확인 하고 대신 수령 하 는 것 이다(잠시 존재 하지 않 는 노드 에 도 사건 을 연결 할 수 있다).
우 리 는 또 다른 예 를 들 었 다.
지금 은 얼 리 가 하나 있 습 니 다.얼 리 는 100 개의 li 가 있 습 니 다.저 는 이 100 개의 li 에 모두 클릭 사건 을 연결 하고 싶 습 니 다.우 리 는 보통 for 순환 을 통 해 연결 할 수 있 습 니 다.그러나 1000 개의 li 가 있다 면 요?효율 과 속 도 를 높이 기 위해 서 우 리 는 이때 사건 의뢰 를 사용 할 수 있 습 니 다.얼 에 게 만 사건 을 연결 할 수 있 습 니 다.사건 의 거품 규칙 에 따라 얼 리 의 모든 li 를 누 르 면 얼 의 바 인 딩 사건 을 촉발 할 수 있 습 니 다.우 리 는 얼 바 인 딩 사건 의 함수 에서 일부 판단 을 통 해 이 100 li 에 게 모두 클릭 사건 을 촉발 할 수 있 습 니 다.
구체 적 으로 어떻게 실현 하 는 지 코드 를 보십시오.
// IE，
function clickLi() {
alert(' li');
}
document.getElementById('isUl').addEventListener('click', function(event) {
// event ， target ，
var src = event.target;
// target li，
// target ，id 、class 、
if(src.nodeName.toLowerCase() == 'li') {
clickLi() ；
}
});그럼 서로 다른 li 에 게 서로 다른 함 수 를 연결 하려 면 어떻게 합 니까?
만약 에 3 개의 li 가 있다 고 가정 하면 우 리 는 먼저 3 개의 서로 다른 함 수 를 쓰 고 3 개의 li 에 서로 다른 id 이름 을 설정 합 니 다.id 이름 이 다른 li 에 서로 다른 함 수 를 연결 할 수 있 는 지 판단 합 니 다.
<body>
<ul id="isUl">
<li id="li01">1</li>
<li id="li02">2</li>
<li id="li03">3</li>
</ul>
<script>
function clickLi01() {
alert(' 1 li');
}
function clickLi02() {
alert(' 2 li');
}
function clickLi03() {
alert(' 3 li');
}
document.getElementById('isUl').addEventListener('click', function(event) {
var srcID = event.target.id;
if(srcID == 'li01'){
clickLi01();
}else if(srcID == 'li02') {
clickLi02();
}else if(srcID == 'li03') {
clickLi03();
}
});
</script>
</body>그렇다면 원소 의 사건 거품 을 막 을 수 있 을 까?답 은 가능 하 다.
처음에 그 예 를 들 어 만약 에 우리 가 정말 맨 안쪽 에 있 는 빨간색 box 만 클릭 하고 다른 두 box 의 사건 이 촉발 되 고 싶 지 않다 면 우 리 는 빨간색 box 에 사건 을 연결 하 는 함수 에 이렇게 쓸 수 있 습 니 다.
function sayBox3(event) {
//
event.stopPropagation();
console.log(' box');
}
document.getElementById('box3').addEventListener('click', sayBox3, false);그럼 거품 을 막 는 데 실제 용도 가 있 나 요?답 은 있 습 니 다.우 리 는 이 예 를 봅 시다.
이것 은 모드 상자 입 니 다.현재 의 수 요 는 빨간색 단 추 를 누 르 면 페이지 를 뛰 어 넘 고 흰색 대화 상 자 를 누 르 면 아무런 반응 이 필요 하지 않 습 니 다.다른 곳 을 누 르 면 이 모드 상 자 를 닫 는 것 입 니 다.
여기 서 거품 을 막 는 데 사용 해 야 합 니 다.빨간색 단 추 는 흰색 대화 상자 의 하위 요소 입 니 다.흰색 대화 상 자 는 이 전체 모드 상자 의 하위 요소 입 니 다.우 리 는 모드 상자 에 클릭 이벤트 가 닫 힌 다음 에 빨간색 단 추 를 누 르 면 이벤트 가 이동 합 니 다.이때 문제 가 발생 했 습 니 다.흰색 대화 상 자 를 누 르 면 거품 메커니즘 으로 인해이 모드 상자 도 닫 힙 니 다.실제로 우 리 는 흰색 대화 상 자 를 클릭 하여 반응 하고 싶 지 않 습 니 다.이때 우 리 는 이 흰색 대화 상자 에 클릭 이 벤트 를 연결 합 니 다.함수 에 event.stopPropagation()을 적 습 니 다.이렇게 하면 된다.
IE 에 대하 여
이전 버 전의 IE 에 호 환 문제 가 존재 합 니 다.addEventListener()의 추가 이벤트 와 removeEventListener()의 삭제 이 벤트 는 지원 되 지 않 습 니 다.감청 방법 이 있 습 니 다.
// ，
attachEvent( ， )
//
detachEvent( ， )
function() {
// IE
window.event.cancelBubble = true;
// IE id
var srcID = window.event.srcElement.id;
}
function(event) {
// IE
event.stopPropagation();
// IE id
var srcID = event.target.id;
}js 브 라 우 저 호 환 문제 에 대해 서 는 일반적으로 능력 검 측 으로 해결 합 니 다.if(){}else{}
우 리 는 평소에 일 을 할 때 보통 jquery 를 사용 하 는데 IE 라 는 특수 한 상황 은 이미 우 리 를 도와 호 환 을 잘 해 주 었 다.
jquery 1.7 버 전 이후 가장 유행 하 는 이벤트 감청 방법 은$(요소).on(이벤트 이름,실행 함수)입 니 다.이벤트 의뢰 의 쓰기$(어느 요소 에 의뢰 합 니까?).on(이벤트 이름,의뢰 된 요소,실행 함수)도 있 습 니 다.
마지막 으로 요소 가 거품 을 막 으 면 사건 의뢰 방식 으로 사건 을 감청 하지 마 세 요.사건 의뢰 의 원 리 는 사건 의 거품 을 이용 하여 거품 이 막 히 면 감청 할 수 없 기 때 문 입 니 다.
이상 은 개인 적 인 경험 이 므 로 여러분 에 게 참고 가 되 기 를 바 랍 니 다.여러분 들 도 저 희 를 많이 응원 해 주시 기 바 랍 니 다.
이 내용에 흥미가 있습니까?
현재 기사가 여러분의 문제를 해결하지 못하는 경우 AI 엔진은 머신러닝 분석(스마트 모델이 방금 만들어져 부정확한 경우가 있을 수 있음)을 통해 가장 유사한 기사를 추천합니다:
이상 과 포획 이상 의 차 이 를 간단히 말 하 다방법 성명 에 이상 설명 을 포함 할 수 있 지만 실제로는 내 놓 지 않 기 때문이다!이렇게 하 는 것 은 이상 을 위해 자 리 를 먼저 차지 하고 나중에 이런 이상 을 던 져 기 존 코드 를 수정 하지 않 아 도 ...
텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
CC BY-SA 2.5, CC BY-SA 3.0 및 CC BY-SA 4.0에 따라 라이센스가 부여됩니다.
좋은 웹페이지 즐겨찾기
