javascript 이벤트 메커니즘

회전[url]http://www.jb51.net/article/22107.htm[/url]
Javascript 의 이 벤트 는 언어 자체 의 모든 것 이 아니 라 대상 과 연 결 됩 니 다.Javascript 이 브 라 우 저 에서 실 행 될 때 이 벤트 는 모든 브 라 우 저 에서 실 현 된 DOM 모델 과 관련 이 있 습 니 다.
사건 자체 가 상당히 직관 적 이 고 자주 사용 하 는 것 은 다음 과 같다.
[img]http://dl.iteye.com/upload/attachment/370982/5f9c785a-6f19-3602-8229-5601eb994114.png[/img]
1.0 레벨 DOM 의 이벤트 처리
0 급 DOM 의 이벤트 처리 방법 은 비교적 빠 르 고 현재 도 광범 위 하 게 응용 되 고 있 으 며 IE 4.0 부터 이런 방법 을 지원 하고 있다.
[b]1.1 이벤트 등록[/b]
다음은 응답 이 벤트 를 추가 하 는 방법,즉 이벤트 에 처리 프로그램 을 추가 하 는 방법 을 소개 한다.
[b](1)내 연 등록(인 라인 등록)[/b]
이것 은 가장 간단 한 것 입 니 다.이벤트 응답 프로그램 을 html 태그 의 속성 으로 설정 합 니 다.다음 과 같은 예 는 코드 일 수 있 습 니 다.물론 더 많은 경우 함수 호출 입 니 다.이벤트 의 핸들 은 일반적으로 이벤트 의 이름 에 접두사 on 을 붙 이 는 것 입 니 다.
4.567913.이런 방법 은 매우 간단 하고 모든 브 라 우 저 를 지원 합 니 다.단점 은 자바 script 코드 와 HTML 코드 를 혼합 하 는 것 입 니 다.또한 이벤트 응답 프로그램 을 동적 으로 추가 할 수도 없고 여러 개의 응답 프로그램 을 추가 할 수도 없습니다.
[b](2)전통 모델(전통 등록)[/b]
이 모드 는 이 벤트 를 대상 으로 하 는 속성 을 추가 합 니 다.예 를 들 면:

    
    




    a

[b]1.2 이벤트 의 인자(이벤트 대상)[/b]
일부 이벤트 처리 프로그램 은 클릭 이벤트 가 발생 하 는 위치 등 이벤트 에 대한 더 많은 정 보 를 필요 로 한다.이 정 보 는 이벤트 매개 변 수 를 통 해 이벤트 처리 프로그램 에 전 달 된 것 이다.IE 이벤트 모델 과 W3C 이벤트 모델 은 이에 대한 실현 이 다르다.
IE 는 이벤트 대상 을 window 대상 의 속성 으로 하고 W3C 는 이벤트 대상 을 처리 프로그램의 매개 변수 로 합 니 다.다음은 click 이 벤트 를 예 로 들 어 IE 와 W3C 표준 을 지원 하 는 브 라 우 저 를 각각 작성 합 니 다.

 <br>        function helloWorld() {<br>            alert("Hello World");<br>            var d = document.getElementById("adiv");<br>            d.onmouseout = function() {<br>                this.innerHTML += 'Bye';<br>            }<br>        }<br>        window.onload = helloWorld;<br>    

이 페이지 코드 는 click 이벤트 대상 의 모든 속성 을 보 여 줍 니 다.위의 예 는 W3C 브 라 우 저 에서 사용 하 는 방법 입 니 다.IE 에서 사용 하려 면 바 꾸 기만 하면 됩 니 다.οnclick="IEClick()".W3Cclick 의 매개 변수 이름 은 이벤트 일 수 있 습 니 다.인쇄 된 속성 이 매우 많 습 니 다.저 는 각각 FF 3.5,Chrome 3,IE8(표준 모드 와 호 환 모드)로 실 행 됩 니 다.그들 이 공유 하 는 속성 이 많 지 않 습 니 다.사실은 이런 공유 속성 만 의미 가 있 습 니 다.그들 은:
altKey,shiftKey,ctrlKey:alt,shift,ctrl 키 를 누 를 지 여부
clientX,clientY:클 라 이언 트 영역 좌표(브 라 우 저 창),screenX,screenY:화면 영역 좌표
[b]type:이벤트 종류[/b]
이벤트 의 매개 변 수 를 전달 하 는 방식 은 조금 다 르 지만 브 라 우 저 를 뛰 어 넘 는 코드 를 쓰 는 데 도 큰 문제 가 되 지 않 았 습 니 다.함수 가 처음부터 window.event 가 정의 되 었 는 지 판단 하면 됩 니 다.

    
    
    <br>        function IEClick() {<br>            var res = document.getElementById("result");<br>            var s;<br>            for (var p in window.event) {<br>                s += p.toString() + ":" + window.event[p] + "\r
";<br>            }<br>            res.innerHTML = s;<br>        }<br>        function W3CClick(args) {<br>            var res = document.getElementById("result");<br>            var s;<br>            for (var p in args) {<br>                s += p.toString() + ":" + args[p] + "\r
";<br>            }<br>            res.innerHTML = s;<br>        }<br>    


a

등록 핸들 은 a 로 두 번 째 방식 으로 핸들 을 등록 하면 특별한 처리 가 필요 하지 않 습 니 다.
[b]1.3 이벤트 의 부상[/b]
페이지 의 대상 은 보통 중첩 되 어 있 습 니 다.예 를 들 어 하나의 div 에는 약간의 div 나 다른 요 소 를 포함 할 수 있 습 니 다.어떤 사건 이 발생 할 때 여러 요소 가 영향 을 받 고 해당 하 는 사건 처리 프로그램 이 있 습 니 다.그러면 이런 사건 처리 프로그램 은 어떤 것 을 실행 합 니까?어떤 순서 로 실행 합 니까?이것 이 바로 이 절 에서 토론 해 야 할 문제 다.일반적으로 한 사건 이 여러 문형 에 의 해 포착 되 는 경 우 는 많 지 않다.예 를 먼저 보 세 요(CSS 생략):

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

이 를 통 해 알 수 있 듯 이 사건 은 내향 외층 의 요소 에 의 해 순서대로 촉발 된다.(일반 교재 에 서 는 위로 올 라 가 는 것 이 라 고 합 니 다.버 블 링,나 는 이것 이 위로 올 라 가 는 것 이 다른 의미 가 있다 고 생각 합 니 다.나 는 처음부터 내부 의 요소 가 위 에 있 는 것 이 라 고 오 해 했 습 니 다.외부 요 소 를 덮 을 수 있 기 때 문 입 니 다)0 급 DOM 으로 등 록 된 사건 은 IE 든 W3C 든 모두 통일 되 었 습 니 다.
[b]1.4 부상 의 취소[/b]
때때로 우 리 는 하나의 사건 에 응답 한 후에 외부 요소 가 더 이상 응답 하지 않 아 도 되 고 사건 의 상승 을 취소 할 수 있다.취소 하 는 방법 은 IE 와 W3C 가 일치 하지 않 습 니 다.IE 는 이벤트 대상 의 cancelBubble 속성 을 설정 하여 이 루어 지 며,W3C 는 이벤트 대상 을 호출 하 는 stopPropagation 방법 입 니 다.
예 를 들 어 위의 예 는 다음 과 같다.

<br>    function body_click() {<br>        var dis = document.getElementById("res");<br>        dis.innerHTML += "Body Click  ";<br>    }<br>    function out_click() {<br>        var dis = document.getElementById("res");<br>        dis.innerHTML += "Outer Click";<br>    }<br>    function inner_click() {<br>        var dis = document.getElementById("res");<br>        dis.innerHTML += "Inner Click  ";<br>    }<br>



    Outer Div
    

        Inner Div
    

[b]1.5 이벤트 처리 함수 중의 this[/b]
이 this 는 사건 을 촉발 하 는 대상 을 가리킨다.
다음은 2 급 DOM 의 이벤트 핸들 을 소개 합 니 다.이런 방식 은 비교적 새로운 방식 으로 특정한 이벤트 핸들 속성 에 의존 하지 않 는 다.W3C 가 정 한 방식 은?
object.addEventListener('event',function,boolean)
첫 번 째 파 라미 터 는 이벤트 이름 이 고,두 번 째 파 라미 터 는 이벤트 응답 함수 입 니 다.세 번 째 변수 가 true 라면 이벤트 함수 가 이벤트 거품 단계 에서 촉발 되 고,그렇지 않 으 면 이벤트 포획 단계 에서 촉발 됩 니 다.W3C 는 사건 의 발생 에 두 단계 가 있다 고 규정 했다.먼저 포획,즉 사건 은 이 를 통 해 가장 바깥쪽 의 요소 에서 안쪽 으로 전달 되 고 해당 하 는 사건 처리 함수 가 순서대로 촉발 되 며 그 다음 에 거품 단계 이 고 사건 은 가장 안쪽 의 요소 에서 바깥쪽 으로 전달 된다.예 를 들 어:

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



    Outer Div
    

        Inner Div
    

이벤트 처리 프로그램 에서 W3C 와 IE 는 아직도 일치 하지 않 는 부분 이 많아 서 매우 번거롭다.다행히 대부분 비교적 좋 은 해결 방안 이 있다.더 많은 정 보 는 참고 하 시기 바 랍 니 다.http://www.quirksmode.org/js/events_events.html