함수 리터럴을 사용한 이벤트 처리

Question

헤드 퍼스트 자바 스크립트를 사용하여 함수 리터럴을 사용한 이벤트 처리에 관한 절을 읽었습니다. 이 책은 '스크립트'태그에서 모든 이벤트 처리를 연결할 수 있다고 설명합니다. 하지만 한 가지 이벤트에서 여러 가지 기능을 수행하는 방법에 대해 혼란 스럽습니다. 내가 "하여 onResize"이벤트가 resizeImg 및 reportImgHeight (나는 내 ​​코드의 다른 곳에서 정의한 기능) BOTH을 실행하는 얻는 방법 그래서 특히이 예를 들어

//Event Handling with Function Literals 
    window.onload = function(evt) { 

//THIS IS BROKEN 
    document.body.onresize = resizeImg();reportImgHeight(); 

//Onload: Functions to Execute -- THESE WORK  
    resizeImg(); 
    reportImgHeight(); 
    } 

, 다음은 내 코드입니다. 고맙습니다!

Answer 1

당신이

document.body.onresize = function(){ 
    resizeImg(); 
    reportImgHeight(); 
}; 

을해야 할 것입니다 그리고 당신이 그들을 호출 할 경우 그들은 당신이이 this 통과이

document.body.onresize = function(){ 
    resizeImg.apply(this, arguments); 
    reportImgHeight.apply(this, arguments); 
}; 

처럼 뭔가를 할 수 분리한다면 그들은 것처럼 그것이 하나라면 당신이 가진 것이었고, 논쟁은 사건에 전달 된 모든 논쟁을 통과합니다.

Answer 2

가장 깨끗한 해결책은 addEventListener을 사용하는 것입니다

window.addEventListener('resize', resizeImg); 
window.addEventListener('resize', reportImgHeight); 

이 방법이 모두 바인딩을 분리 할 수 ​​있습니다.

resize 이벤트는 문서 부분이 아닌 창에 바인딩해야합니다.