DOM 이벤트 모델 과 인터넷 explorer 이벤트 모델 의 연결 메커니즘

DOM 이벤트 모델 과 인터넷 explorer 이벤트 모델 의 연결 메커니즘
서로 다른 브 라 우 저 (chrome, Safari, Firefox, Opera, Internet Explorer) 는 자신 만 의 이벤트 체 제 를 가지 고 있 는데 그 중에서 마이크로소프트 의 Internet Explorer 가 가장 '다른 유형' 에 속한다.
사건 귀속 방법 으로 말씀 드 리 겠 습 니 다!
더 좋 은 브 라 우 저 특성 을 확보 하기 위해 서 는 브 라 우 저 와 무관 한 이벤트 바 인 딩 방법 을 추천 합 니 다.
귀속 HTML 요소 속성
이러한 이벤트 바 인 딩 방식 은 간단 하고 사용 하기 쉽다. 예 를 들 어:.
이벤트 프로 세 서 를 연결 할 때 HTML 페이지 코드 를 직접 수정 해 야 합 니 다. 다음 과 같은 몇 가지 나 쁜 점 을 가 져 올 수 있 습 니 다.
HTML 요소 속성 을 직접 수정 하여 페이지 논리의 복잡 도 를 증가 시 켰 다.
개발 자 는 HTML 페이지 를 직접 수정 해 야 하기 때문에 팀워크 개발 에 불리 하 다.
그러나 자바 스 크 립 트 함 수 를 호출 할 때 인 자 를 입력 할 수 있 습 니 다. 전형 적 인 것 은 this, event 등 특수 한 의 미 를 가 진 인자 입 니 다.
귀속 DOM 개체 속성
Document.forms[n].onsubmit=check;
DOM 대상 속성 에 연결 되 었 을 때 이 속성 값 은 javaScript 함수 의 참조 일 뿐 이 므 로 함수 뒤에 괄호 를 추가 하지 마 십시오. 괄호 를 추가 하면 이 함 수 를 호출 하 는 것 이 됩 니 다. 따라서 이 함 수 를 DOM 대상 의 onclick 등 속성 에 되 돌려 줍 니 다.
DOM 모델 의 이벤트 메커니즘 에서 제공 하 는 이벤트 귀속 메커니즘
objectTarget. addEventListener ("eventType", handle, captureFlag) 이 방법 은 objectTarget 바 인 딩 이벤트 프로세서 handler 입 니 다. 첫 번 째 매개 변 수 는 이벤트 형식 문자열 (앞의 이벤트 속성 을 접두사 제거 "on" 입 니 다. 예 를 들 어 click, mousedown, keypress 등) 입 니 다.두 번 째 매개 변 수 는 이벤트 처리 함수 입 니 다.세 번 째 매개 변 수 는 감청 사건 전파 의 어느 단 계 를 지정 하 는 데 사 용 됩 니 다 (true 는 감청 포획 단 계 를 표시 하고 false 는 감청 거품 단 계 를 표시 합 니 다).



    
     DOM     




    
    


 

    //       
    var gotClick1 = function(event)
    {
        //                   
        document.getElementById("results").innerHTML +=
            "      : " + event.currentTarget + "<br />";
    }
    //       
    function gotClick2(event)
    {
        //                   
        document.getElementById("results").innerHTML +=
            "      ：" + event.currentTarget + "<br />";
    }
    //  testbn          （    ）
    document.getElementById("testbn")
        .addEventListener("click" , gotClick1 , true);
    //  testbn          （    ）
    document.getElementById("testbn")
        .addEventListener("click" , gotClick2 , false);
    //       div          （    ）。

addEventListener () 방법 에 대응 하여 DOM 도 이벤트 프로 세 서 를 삭제 하 는 방법 을 향상 시 켰 습 니 다. 이 방법 은 removeEventListener 입 니 다.
objectTarget.removeEventListener(“eventType”,handler,captureFlag)
이 방법 은 object Target 에서 이벤트 프로세서 handler 를 삭제 합 니 다.
인터넷 explorer 는 자신 만 의 이벤트 바 인 딩 방법 두 가 지 를 지원 합 니 다.이 두 가지 방법 은 HTML 요소 에 추가 속성 을 추가 할 필요 가 없다.
인터넷 explorer 4.0 및 업 데 이 트 된 버 전에 서 microsoft 는 for 와 event 
 For < times new roman '; "> > HTML / span > < < < < < 문서 의 어떤 요소 의 id 속성 값 은 이 속성 이 유일 하 게 이 HTML 요 소 를 표시 합 니 다. Event 속성 값 은 이 요소 가 지원 하 는 이벤트 이름 입 니 다. 예 를 들 어 onmouseover , onclick 등.이 script 탭 이 이 두 속성 을 지정 하면 이 탭 에 있 는 모든 스 크 립 트 가 이 요소 의 대응 하 는 이 벤트 를 연결 하고 있 음 을 나타 낸다. 
 주의: 이러한 바 인 딩 체제 에서 사건 처리 스 크 립 트 문 구 는 함수 에 있 지 않 고 < script / > 원소 내.



        
       script for        






    alert("     ");


 
  
attachEvent        
  DOMObject.attachEvent（“eventName”,functionReference）  
  eventName        ，  onmousedown；functionReference         。  
  

    
       attachEvent         




    var test = function()
    {
        alert("    ");
    }
    //  attachEvent      
    document.getElementById("bn1").attachEvent(" , test);


  
 
 일반적인 상황, 하나의 < / span > < span style =" font - family: & \ # 39;times new roman';">DOM 대상, 하나의 사건 은 최대 하나의 이벤트 프로세서 만 연결 할 수 있 습 니 다. 그러나 < / span > < span style =" font - family: & \ # 39;times new roman';">attachEvent() 방법 으로 이벤트 프로 세 서 를 연결 할 때, < / span > < span style =" font - family: & \ # 39;times new roman';">DOM 대상, 하나의 이벤트 가 여러 이벤트 프로 세 서 를 연결 할 수 있 습 니 다. < / span > < span style =" font - size: 14px;font - family: 송 체;"> 
 
 
 
attachEvent() 방법 에 대응 하 는 것 은 < / span > < span style =" font - family: & \ # 39;times new roman';">detachEvent() 방법, 이 방법 은 이벤트 프로세서 < / span > < / span > < span style =" font - size: 14px 를 삭제 하 는 데 사 용 됩 니 다.font - family: 송 체;"> 
 
 DOMObject. detachEvent (< / span > < span style =" font - size: 14px; font - family: & \ # 39; times new roman & \ # 39;; times new roman & \ # 39;;;; ">" < / span > < span style = "font 크기: 14px; font - family: & \ # 39; times new roman & \ # 39;;" > evenName < / span > < span 스타일 = < span 스타일 = "font 크기: 14px; font - family: & \ # 39; times new rom & \ # 39;" > < / span > < span 스타일 스타일 = "font 크기: 14px; font - family: & # # 39; times new rom & \ # 39;" < / span- size: 14px; font - family: 송 체; "> < span style ="font-size:14px;font-family:'times new roman';">，functionReference);

DOM 이벤트 모델 과 인터넷 explorer 이벤트 모델 의 연결 메커니즘

좋은 웹페이지 즐겨찾기