JS 에서 네 가지 이벤트 처리 프로그램 을 설정 하 는 방법 을 깊이 이해 하 다.

모든 자 바스 크 립 트 이벤트 처리 프로그램의 역할 영역 은 호출 된 역할 영역 이 아 닌 정 의 된 역할 영역 에서 실 행 됩 니 다.또한 그 역할 영역 에 있 는 모든 로 컬 변 수 를 액세스 할 수 있 습 니 다.그러나 HTML 태그 속성 등록 처리 프로그램 은 예외다.다음 네 가지 방법 을 보 세 요.
첫 번 째 방법(HTML 태그 속성):

<input type="button" id="btn1" value="  " onclick="alert(this.id);" />

위의 코드 는 HTML 탭 속성 을 설정 하여 button 에 클릭 이 벤트 를 추가 합 니 다.button 단 추 를 누 르 면 이 button 의 id,즉 btn 1 이 팝 업 됩 니 다.
HTML 속성 을 통 해 이벤트 처리 프로그램 을 등록 하 는 것 은 예외 입 니 다.로 컬 변수 가 아 닌 전역 변 수 를 액세스 할 수 있 는 최상 위 함수 로 변 환 됩 니 다.역사적 인 원인 으로 인해 그들 은 수 정 된 역할 도 메 인 체인 에서 실 행 됩 니 다.HTML 속성 을 통 해 정 의 된 이벤트 처리 프로그램 은 로 컬 변수 처럼 대상,용기 대상(form)대상 과 document 대상 의 속성 을 사용 할 수 있 습 니 다.브 라 우 저 에서 다음 과 같은 코드 로 변 환 됩 니 다.

 function (event){
  with(document){
   with(this.form||{}){
    with(this){
     /*         */
    }
   }
  }  
}

with 의 용법 에 대해 서 는 스스로 찾 아 볼 수 있 습 니 다.여기 뒤에 설명 이 있 습 니 다.독자 가 먼저 스스로 좀 이해 하 다.연결 제공https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Statements/with
이런 방식 은 현재 이미 사용 을 추천 하지 않 는 다.
두 번 째 방식(호출 함수)

<input type="button" id="btn2" value="  " onclick="test()" />
<script type="text/javascript">
  function test(){
   alert(this.id);
  }
</script>

이 코드 가 튀 어 나 온 것 은 undefined 입 니 다.
이 설정 방식 은 전역 함 수 를 호출 하여 진 행 됩 니 다.이때 this 는 window 를 가리 키 며,이 button 의 호출 자가 아 닌 console.log(this=window)를 출력 할 수 있 습 니 다.검증 하 겠 습 니 다.
세 번 째 방식(호출 함수)

<input type="button" id="btn3" value="  " />
<script type="text/javascript">
   var btn3 = document.getElementById("btn3");
        btn3.onclick = function () {
          alert(this.id);
        };
</script>

이 코드 가 튀 어 나 온 것 은 btn 3 이다.
이 이벤트 처리 프로그램 은 이벤트 목표 에 정의 되 어 있 기 때문에 이 대상 의 방법 으로 호출 됩 니 다(단,아래 는 IE 에 예외 가 있 습 니 다).이벤트 처리 프로그램 에서 this 키 워드 는 이벤트 목 표를 가리킨다.
addEventListener()를 사용 하여 등록 할 때 호출 된 처리 프로그램 은 이벤트 목 표를 this 값 으로 사용 합 니 다.그러나 attachment()로 등 록 된 처리 프로그램 을 함수 로 호출 하 는 경우 this 값 은 전역(window)대상 입 니 다.그 러 니까 4 중 방식.
네 번 째 방식(addEventListener 와 attachment 를 통 해):

<input type="button" id="btn3" value="  " onclick="test()" />
 var btn = document.getElementById("btn3");
        var handler = function () { console.log(this.id); };
        if (btn.addEventListener) {
          console.log("addEventListener");
          btn.addEventListener("click", handler, false);
        }
        else if (btn.attachEvent) {//IE9     
          console.log("attachEvent");
          btn.attachEvent("onclick",handler);
        }

IE5-IE8 버 전에 서 출력 한 것 은 undefined 입 니 다.(이 때 호출 된 것 은 attachement)
IE9 이후 버 전 출력 btn 3.
IE5-8 에 있 는 그 문 제 를 복구 하려 면 다음 방법 을 사용 하 세 요.

/*
*target:    ,button   
*type:"click"       ,   on
*handler:       
*/
function addEvent(target,type,handler){
 if (target.addEventListener) {
          target.addEventListener(type, handler, false);
        }
        else if (target.attachEvent) {//IE9               
          btn.attachEvent("on"+type,function(event){
            return hanlder.call(target,event);//                ,  this  。
          });
        }
}

위 에서 말 한 것 은 편집장 님 께 서 소개 해 주신 JS 에서 네 가지 이벤트 처리 프로그램 을 설정 하 는 방법 입 니 다.여러분 께 도움 이 되 셨 으 면 합 니 다.궁금 한 점 이 있 으 시 면 댓 글로 남 겨 주세요.편집장 님 께 서 바로 답 해 드 리 겠 습 니 다.여기 서도 저희 사이트 에 대한 여러분 의 지지 에 감 사 드 립 니 다!