인라인 핸들러는 어떻게 처리됩니까?

Question

인라인 핸들러가 evalled이지만 그 정보를 찾을 수 없다는 의혹이 있습니다. 그때 호기심에서 : 그러한 핸들러가 어떻게 처리되는지 누구나 알고 있습니까?

<a href="#" onclick="doSomethingReallyCunning()">...</a> 
<input type="checkbox" onmouseover="this.checked=!this.checked;this.blur()"/> 

등

가

Answer 1

내부적 인라인 이벤트 속성이 같은 익명 래퍼 함수를 ​​생성함으로써 처리된다 :

element.onclick = new Function("event", onclickAttribute); 
// etc. 

이 내용을 의미 명확화를 위해, I 같은 인라인 핸들러 의미 의 속성은 eval이지만 요소가 DOM에 삽입 될 때만 (이 함수는 다른 이벤트 핸들러와 마찬가지로 메모리의 구문 분석 된 양식에 있습니다). 즉, JavaScript 코드를 별도로 할당 한 이벤트 핸들러보다 훨씬 많은 메모리와 시간을 소비하지 않습니다. 그리고 이벤트가 발생할 때마다 코드를 파싱해야한다고해도 사용자가 알아 차릴 수있는 큰 차이를 만들지는 못합니다.

그러나 인라인 이벤트 속성을 사용하지 않으려면 충분한 이유가 있습니다. 프레젠테이션과 로직을 서로 분리하여 가독성과 유지 관리를 향상시킵니다. 또 다른 이점은 minifier를 사용하는 것이 고통스럽지 않다는 점입니다. JavaScript 파일의 함수 이름은 minifier의 설정과 지능에 따라 변경 될 수 있지만 마크 업에서는 변경되지 않을 수 있습니다 (이 문제는 대괄호 표기법을 정의 할 때 코드에있는 함수 (예 : window['doSomethingReallyCunning'] = function (…) {…), 함수 이름은 그대로 유지되지만 훨씬 더 좋은 방법이 있으면 깔끔한 솔루션이 아닙니다. 함수를 직접 참조하여 이벤트 처리기를 코드에 할당하는 경우 해당 함수 이름의 모든 인스턴스가 변경됩니다 (물론 매개 변수가 setTimeout 및 setInterval 인 경우에도 마찬가지입니다).