Javascript 브 라 우 저 이벤트 소결

引入外部Js需再刷新一下页面才能执行]이 방법 은 간단 합 니 다.어떤 브 라 우 저 도 지원 합 니 다.자바 script 코드 와 HTML 코드 를 혼합 하 는 것 이 단점 입 니 다.이벤트 응답 순 서 를 동적 으로 추가 할 수도 없고 여러 응답 프로그램 을 추가 할 수도 없습니다.(2)전통 모델(traditional registration)이라는 모델 은 사건 을 대상 으로 하 는 속성 을 추가 합 니 다.예 를 들 어function helloWorld(){alert("Hello World");var d = document.getElementById("adiv"); d.onmouseout = function() { this.innerHTML += 'Bye'; } } window.onload = helloWorld; [Ctrl+A 전체 선택:외부 Js 를 도입 하려 면 페이지 를 새로 고침 해 야 실행 할 수 있 습 니 다.]1.2 이벤트 의 인자(Event 대상)일부 이벤트 처리 프로그램 은 이벤트 에 대한 더 많은 정 보 를 필요 로 합 니 다.예 를 들 어 click 이벤트 가 발생 하 는 위치 등 입 니 다.이 정 보 는 이벤트 매개 변 수 를 통 해 이벤트 처리 프로그램 에 전 달 된 것 이다.IE 이벤트 모델 과 W3C 이벤트 모델 은 이에 대한 실현 이 다르다.IE 는 이벤트 대상 을 window 대상 의 속성 으로 하고 W3C 는 이벤트 대상 을 처리 프로그램의 매개 변수 로 합 니 다.다음은 click 이 벤트 를 예 로 들 어 IE 와 W3C 표준 을 지원 하 는 브 라 우 저 를 각각 작성 합 니 다. function IEClick() { var res = document.getElementById("result"); var s; for (var p in window.event) { s += p.toString() + ":" + window.event[p] + ""; } res.innerHTML = s; } function W3CClick(args) { var res = document.getElementById("result"); var s; for (var p in args) { s += p.toString() + ":" + args[p] + ""; } res.innerHTML = s; } [Ctrl+A 전체 선택:외부 Js 를 도입 하려 면 페이지 를 새로 고침 해 야 실행 할 수 있 습 니 다.]이 페이지 코드 는 click 이벤트 대상 의 모든 속성 을 보 여 줍 니 다.위의 예 는 W3C 브 라 우 저 에서 사용 하 는 방법 입 니 다.IE 에서 사용 하려 면 onclick="IEClick()"으로 바 꾸 면 됩 니 다.W3Cclick 의 매개 변수 이름 은 이벤트 일 수 있 습 니 다.인쇄 된 속성 이 매우 많 습 니 다.저 는 각각 FF 3.5,Chrome 3,IE8(표준 모드 와 호 환 모드)로 실 행 됩 니 다.그들 이 공유 하 는 속성 이 많 지 않 습 니 다.사실은 이런 공 통 된 속성 만 의미 가 있 습 니 다.그들 은 altKey,shiftKey,ctrlKey:alt,shift,ctrl 키 clientX,clientY:클 라 이언 트 좌표(브 라 우 저 창),screenX 를 누 를 지 여부 입 니 다.screenY:화면 영역 좌표 type:이벤트 형식 은 이벤트 의 매개 변수 전달 방식 이 다 르 지만 브 라 우 저 를 뛰 어 넘 는 코드 를 쓰 는 데 많은 번 거 로 움 을 주지 않 습 니 다.함수 가 처음부터 window.event 가 정의 되 었 는 지 판단 하면 됩 니 다

 
function BothClick(args) { 
var evnt = window.event ? window.event : args; 
alert(evnt.clientX); 
} 

등록 핸들 은:두 번 째 방식 으로 핸들 을 등록 하면 특별한 처리 가 필요 하지 않 습 니 다.1.3 이벤트 의 부상 페이지 의 대상 은 보통 중첩 되 어 있 습 니 다.예 를 들 어 하나의 div 에는 약간의 div 또는 다른 요 소 를 포함 할 수 있 습 니 다.어떤 사건 이 발생 할 때 여러 요소 가 영향 을 받 고 해당 하 는 사건 처리 프로그램 이 있 습 니 다.그러면 이런 사건 처리 프로그램 은 어떤 것 을 실행 합 니까?어떤 순서 로 실행 합 니까?이것 이 바로 이 절 에서 토론 해 야 할 문제 다.일반적으로 한 사건 이 여러 문형 에 의 해 포착 되 는 경 우 는 많 지 않다.예 를 들 어(CSS 생략):function bodyclick(){ var dis=document.getElementById("res"); dis.innerHTML+="Body Click "; } function out_click(){ var dis=document.getElementById("res"); dis.innerHTML+="Outer Click "; } function inner_click(){ var dis=document.getElementById("res"); dis.innerHTML+="Inner Click "; } [Ctrl+A 전체 선택:외부 Js 를 도입 하려 면 페이지 를 새로 고침 해 야 실행 할 수 있 습 니 다.]body 에서 바깥쪽 div 와 안쪽 div 가 모두 click 이벤트 에 응 답 했 습 니 다.결 과 는 다음 과 같 습 니 다 이 를 통 해 알 수 있 듯 이 사건 은 내향 외층 의 요소 에 의 해 순서대로 촉발 된다.(일반 교재 에 서 는 위로 올 라 가 는 것 이 라 고 합 니 다.버 블 링,나 는 이것 이 위로 올 라 가 는 것 이 다른 의미 가 있다 고 생각 합 니 다.나 는 처음부터 내부 의 요소 가 위 에 있 는 것 이 라 고 오 해 했 습 니 다.외부 요 소 를 덮 을 수 있 기 때 문 입 니 다)0 급 DOM 으로 등 록 된 사건 은 IE 든 W3C 든 모두 통일 되 었 습 니 다.1.4 부상 의 취 소 는 때때로 우 리 는 하나의 사건 에 응답 한 후에 외부 요소 가 다시 응답 하지 않 아 도 되 고 사건 의 부상 을 취소 할 수 있다.취소 하 는 방법 은 IE 와 W3C 가 일치 하지 않 습 니 다.IE 는 이벤트 대상 의 cancelBubble 속성 을 설정 하여 이 루어 지 며,W3C 는 이벤트 대상 을 호출 하 는 stopPropagation 방법 입 니 다.예 를 들 어 위의 예 는

 
function inner_click(arg){ 
var evnt=window.event?window.event:arg; 
var dis=document.getElementById("res"); 
dis.innerHTML+="Inner Click <br/>"; 
if(evnt.stopPropagation){ 
evnt.stopPropagation(); 
}else{ 
evnt.cancelBubble=true; 
} 
}<div id="innerdiv" onclick="inner_click(event)" > 

다른 것 은 변 하지 않 으 면 한 줄 의 출력 만 볼 수 있다.1.5 이벤트 처리 함수 중의 this this 는 트리거 이벤트 의 대상 을 가리 키 고 있 습 니 다.다음은 2 급 DOM 의 이벤트 핸들 을 소개 합 니 다.이런 방식 은 비교적 새로운 방식 으로 특정한 이벤트 핸들 속성 에 의존 하지 않 는 다.W3C 가 규정 한 방식 은 object.addEventListener('event',function,boolean)의 첫 번 째 매개 변 수 는 이벤트 이름 이 고,두 번 째 는 이벤트 응답 함수 이 며,세 번 째 변 수 는 true 라면 이벤트 함수 가 이벤트 거품 단계 에서 촉발 되 며,그렇지 않 으 면 이벤트 캡 처 단계 에서 촉발 된다.W3C 는 사건 의 발생 에 두 단계 가 있다 고 규정 했다.먼저 포획,즉 사건 은 이 를 통 해 가장 바깥쪽 의 요소 에서 안쪽 으로 전달 되 고 해당 하 는 사건 처리 함수 가 순서대로 촉발 되 며 그 다음 에 거품 단계 이 고 사건 은 가장 안쪽 의 요소 에서 바깥쪽 으로 전달 된다.예 를 들 어function setup(){var div=document.getElement ById('testDiv');div.addEventListener('click',function(){alert('div true');},true); document.addEventListener('click',function(){alert('body true');},true); div.addEventListener('click',function(){alert('div false');},false); document.addEventListener('click',function(){alert('body false');},false); } window.onload=setup;