자바 script 의 이벤트 모델 을 빠르게 이해 해 드 립 니 다.

javascript 에는 두 가지 이벤트 모델 이 있 습 니 다:DOM 0,DOM 2.그리고 이 두 가지 시간 모델 에 대해 저 는 잘 모 르 겠 습 니 다.지금 은 인터넷 을 통 해 자 료 를 찾 아 보고 드디어 알 게 되 었 습 니 다.
하나  DOM 0 급 이벤트 모델
DOM 0 급 이벤트 모델 은 초기 이벤트 모델 로 모든 브 라 우 저 를 지원 하 며 실현 도 간단 합 니 다.코드 는 다음 과 같 습 니 다:

<p id = 'click'>click me</p>
<script>
 document.getElementById('click').onclick = function(event){
  alert(event.target);
 }
</script>

이 이벤트 모델 은 dom 대상 에 이벤트 이름 을 직접 등록 하 는 것 입 니 다.이 코드 는 p 태그 에 onclick 이 벤트 를 등록 하고 이 이벤트 함수 내부 에서 클릭 을 출력 하 는 목표 입 니 다.이벤트 해 제 는 더욱 간단 합 니 다.바로 null 을 이벤트 함수 에 복사 하 는 것 입 니 다.다음 과 같 습 니 다.document.getElementById('click'_).onclick = null;이 를 통 해 dom 0 에서 하나의 dom 대상 은 같은 유형의 함수 만 등록 할 수 있다 는 것 을 알 수 있 습 니 다.같은 유형의 함 수 를 여러 개 등록 하면 덮어 쓰기 가 발생 하고 이전에 등 록 된 함수 가 무효 가 되 기 때 문 입 니 다.

var click = document.getElementById('click');
click.onclick = function(){
 alert('you click the first function');
};
click.onclick = function(){
 alert('you click the second function')
}

이 코드 에서,우 리 는 dom 대상 을 위해 두 개의 onclick 함 수 를 등 록 했 지만,결 과 는 두 번 째 등 록 된 함수 만 실 행 했 고,앞 에 등 록 된 함 수 는 덮어 썼 다.
둘.   DOM 2 급 이벤트 모델
　　1.  이벤트 캡 처 와 이벤트 거품(capture,bubble)
우선 IE8 및 이하 에 서 는 이러한 이벤트 모델 을 지원 하지 않 습 니 다.이벤트 캡 처 와 이벤트 거품 메커니즘 은 다음 과 같 습 니 다.

위의 그림 에서 보 듯 이 123 대표 사건 포착,4567 대표 사건 거품.우선 우 리 는 아래 의 코드 를 사용한다.

<div id = 'outer' style = 'margin: 100px 0 0 100px; width: 200px;height: 200px; background: red;'>
 <div id="inner" style = 'margin-left:20px; width: 50px;height:50px; background: green;'></div>
</div>

만약 에 우리 가 ID 가 inner 인 div 를 클릭 했다 고 가정 하면 이때 의 이벤트 절 차 는 먼저 캡 처 단 계 를 실행 하 는 것 입 니 다:document-html-body-div(outer).그리고 거품 단계:div(inner)-div(outer)-body-html-document 을 실행 합 니 다.
　　2.   DOM 2 급 등록 이벤트 와 해 지 이벤트
DOM 2 급 에 서 는 addEventListener 와 removeEventListener 를 사용 하여 이 벤트 를 등록 하고 해제 합 니 다(IE8 및 이전 버 전 은 지원 되 지 않 습 니 다).이러한 함수 가 이전 방법 에 비해 좋 은 점 은 dom 대상 이 같은 유형의 사건 을 여러 개 등록 할 수 있 고 사건 의 커버 가 발생 하지 않 으 며 각 사건 함 수 를 순서대로 실행 할 수 있다 는 것 이다.
addEventListener('이벤트 이름','이벤트 리 셋','캡 처/거품').예 는 다음 과 같다.

<div id = 'outer' style = 'margin: 100px 0 0 100px; width: 200px;height: 200px; background: red;'>
 <div id="inner" style = 'margin-left:20px; width: 50px;height:50px; background: green;'></div>
</div>
<script>
 var click = document.getElementById('inner');
 click.addEventListener('click',function(){
  alert('click one');
 },false);
 click.addEventListener('click',function(){
  alert('click two');
 },false);
</script>

우선 addEventListenr 의 첫 번 째 매개 변 수 는 이벤트 이름 이 고 DOM 0 급 과 다른 것 은'on'이 없다 는 것 을 알 아야 합 니 다.또한 세 번 째 매개 변 수 는 포획 인지 거품 인지,true 는 포획 사건 을 대표 하고 false 는 거품 사건 을 대표 합 니 다.
이 코드 에서 우 리 는 inner 의 div 에 두 개의 click 이벤트 함 수 를 등록 하 였 으 며,결 과 는 브 라 우 저가 이 두 함 수 를 순서대로 실행 하 였 다.
이벤트 흐름 의 발생 메커니즘 을 어떻게 사용 하 는 지 보 여 드 리 겠 습 니 다.

<div id = 'outer' style = 'margin: 100px 0 0 100px; width: 200px;height: 200px; background: red;'>
 <div id="inner" style = 'margin-left:20px; width: 50px;height:50px; background: green;'></div>
</div>
<script>
 var click = document.getElementById('inner');
 var clickouter = document.getElementById('outer');
 click.addEventListener('click',function(){
  alert('inner show');
 },true);
 clickouter.addEventListener('click',function(){
  alert('outer show');
 },true);
</script>

이 코드 는 포획 사건 을 사 용 했 습 니 다.inner 는 outer 에 끼 워 져 있 기 때문에 포획 을 사용 할 때 outer 가 먼저 이 사건 을 포획 해 야 한 다 는 것 을 알 고 있 습 니 다.그 다음 에 inner 가 이 사건 을 포착 할 수 있 습 니 다.그 결 과 는 outer 가 먼저 집행 하고 그 다음은 inner 가 집행 하 는 것 이다.
그럼 저 는 outer 의 집행 시 기 를 거품 이 나 는 단계 로 바 꿀 까요?

alickouter.addEventListener('click',function(){
 alert('outer show'); 
},false);

이 경우 inner 를 먼저 실행 하고 outer 를 실행 하 는 것 이다.마찬가지 로 우 리 는 두 사람의 사건 집행 시 기 를 모두 거품 단계 로 바 꾸 면 여전히 inner 를 먼저 집행 한 후에 outer 를 집행 한다.그러면 또 하나의 문 제 는 우리 가 inner 를 두 개의 click 이벤트 에 등록 하면 하 나 는 캡 처 단계 이 고 다른 하 나 는 거품 단계 이다.즉,addEventListener 의 세 번 째 인 자 를 각각 false 와 true 로 설정 하면 실행 순 서 는 어떻게 되 는 것 일 까?

<script>
 var click = document.getElementById('inner');
 var clickouter = document.getElementById('outer');
 click.addEventListener('click',function(){
  alert('capture show');
 },true);
 click.addEventListener('click',function(){
  alert('bubble show');
 },false);
</script>

이 경우 우선 capture show,그 다음은 bubble show 다.그러나 이런 결 과 는 등록 순서 와 관련 이 있어 먼저 등록 하고 먼저 집행 한다.우 리 는 사건 포착 과 사건 거품 설명도 를 보고 있 기 때문에 마지막 으로 구체 적 인 dom 대상 은 하나 밖 에 없다 는 것 을 발견 했다.
그럼 저희 가 outer 와 inner 에 click 이 벤트 를 등록 해 줬 는데 outer 가 실행 되 기 싫 으 면 어 떡 하 죠?이 럴 때 우 리 는 stopPropagation 함 수 를 사용 해 야 합 니 다.이 함 수 는 거품 을 막 는 데 사 용 됩 니 다.즉,사건 이 더 이상 거품 을 일 으 키 지 않도록 하 는 것 입 니 다.그러면 다음 에 같은 유형의 사건 을 등록 한 dom 대상 은 실행 하지 않 을 것 입 니 다.
예 를 들 어 드 롭 다운 상 자 를 만 들 때 브 라 우 저의 다른 위 치 를 클릭 합 니 다.드 롭 다운 상자 의 options 숨 김 이 필요 합 니 다.이 때 는 stop Propagation 을 사용 해 야 합 니 다.다음 과 같다.

<script>
 var click = document.getElementById('inner');
 var clickouter = document.getElementById('outer');
 click.addEventListener('click',function(event){
  alert('inner show');
  event.stopPropagation();
 },false);
 clickouter.addEventListener('click',function(){
  alert('outer show');
 },false);
</script>

정상 적 인 상황 에서 우 리 는 stopPropagation 함 수 를 추가 하지 않 을 때 먼저 inner 를 실행 한 다음 에 outer 를 실행 해 야 합 니 다.그러나 inner 의 이벤트 함수 에 stopPropagation 함 수 를 추가 한 후에 inner 의 이벤트 함 수 를 실행 한 후에 outer 의 이벤트 함 수 를 실행 하지 않 을 것 입 니 다.또한 이벤트 가 inner 에 거품 을 일 으 킨 후에 사라 진 것 으로 이해 할 수 있 습 니 다.따라서 다음 이벤트 함 수 를 실행 하지 않 을 것 입 니 다.
이벤트 캡 처 단계 에 사건 을 막 을 수 있 는 함수 가 없 기 때문에 이벤트 거품 으로 설정 합 니 다.
자,이상 이 전부 입 니 다.여러분 의 학습 에 도움 이 되 었 으 면 좋 겠 습 니 다~~