JavaScript 함수 콜백 및 이벤트

Question

저는 독자적으로 자바 스크립트 갤러리 스크립트를 만들려고했습니다. 나는 IE6에서 작동하지 않는다는 것을 알아 채기 전까지는 꽤 행복했습니다. FireFox에서 모든 것이 잘 보입니다. 그래서 디버깅을 시작했습니다.

나는 setAttribute가 확실한 문제 중 하나임을 확인했습니다. 어쩌면 가장 큰 것일 수도 있습니다. 매개 변수를 사용하여 onclick 속성을 설정하는 것에 대한 interetsing article을보고 나면 행복하게 느껴졌지만 한 가지는 나에게 미해결로 남았습니다. 콜백 메소드를 사용하는 것은 까다 롭지 만, 그런 식으로 이벤트 객체를 전달하는 방법을 모른다.

var miniatury = document.getElementsByTagName ("a"); 
function zoom(){ 
    for (l = 0; l < miniatury.length; l++) { 
     if (miniatury[l].className.match("zoom") != null ) { 
      var href = miniatury[l].href; 
      if (document.images) { 
       preImg[l] = new Image(); 
       preImg[l].src = href; 
       miniatury[l].setAttribute("onclick", "przybliz(preImg["+[l]+"].src, event); event.returnValue=false; return false;"); 
      } 
      else { 
      miniatury[l].setAttribute("onclick", "przybliz(href, event); event.returnValue=false; return false;");} 
      } 
    } 
} 
function przybliz(adres, event) { 
pojemnik.style.display = 'block'; 
if (navigator.appName == "Microsoft Internet Explorer") { 
    pozycjaX= window.event.clientX + document.documentElement.scrollLeft 
     + document.body.scrollLeft; 
    pozycjaY= window.event.clientY + document.documentElement.scrollTop 
     + document.body.scrollTop; 
    } 
    if (navigator.appName != "Microsoft Internet Explorer") { 
    pozycjaX = event.clientX + window.scrollX; 
    pozycjaY = event.clientY + window.scrollY; 
    } 
pojemnik.style.top = pozycjaY+'px'; 
pojemnik.style.left = pozycjaX+'px'; 

질문은 다음과 같습니다 : 다음은 이전 코드 샘플입니다 어떻게

의 onclick = 콜백에 코드를 변경 (F, 인수) 이벤트 객체의 값을 전달과

는, 나중에 사치스럽게 사용 하시겠습니까?

Answer 1

음, jQuery를 함께 그 일을 : 당신이해야 할 수도 있기 때문에, 그것은 조금 더 어려워진다 jQuery를하지 않고

function przybliz(evt) { 
    var adres = evt.data; 
    //... 
} 

: 당신이 함수를 검색 할 수

$(miniatury[l]).bind("click", preImg[l], przybliz); 

후 클로저에 값을 저장하십시오. 조심하지 않으면 전체 범위 체인이 메모리에 남아있게 할 수 있습니다 (좋은 것은 아님).

Answer 2

가장 좋은 방법은 처리기를 추가하는 것입니다. 예 :

여기서 콜백은 단일 매개 변수가있는 함수입니다. 아래처럼 :

function callback(evt) { 
    if (! evt) evt = window.event; 
    <insert other code here> 
} 

이 당신이 찾고있는 무슨을해야한다.

편집 : 매개 변수화 된 콜백을 보내는 방법을 묻는 중 깨달았습니다. 나는 거기에 좋은 크로스 브라우저 방법이 있을지는 모르겠지만 데이터를 보유하고있는 해당 요소에 사용자 지정 특성을 추가하고 이벤트 개체 (evt.target 또는 evt.srcElement)를 통해 요소에 액세스 할 수 있습니다 . 사용자 정의 속성에 대해서는 w3c가 설정 한 지침을 따르십시오. w3c custom attributes

Answer 3

IE6은 그렇게 나쁘다. 원시 JS에 익숙해지는 것은 필수적이지만 궁극적으로 브라우저 간의 작은 차이점에 대한 모든 종류의 편의를 제공하는 데 신경 쓰고 싶지는 않을 것입니다.

Antony Mills는 jQuery 또는 프로토 타입과 같은 프레임 워크가 얼마나 쉽게 작업을 수행 할 수 있는지 보여줍니다. 프레임 워크에 대한 또 다른 주요 사항은 일반적으로 이러한 모든 크로스 브라우저 문제에 대해 오랫동안 열심히 생각해 왔기 때문에 사용자가하지 않아도된다는 것입니다.