어쨌든지'이'에서 변경할 때,나는 감싸는 기능입니까?

StackOverflow https://stackoverflow.com/questions/400968

  •  03-07-2019
  •  | 
  •  

문제

내가 원하는 모든 작업을 수행 할 수있는 버튼을 전후 그들의 정상적인 onclick 이벤트입니다.그래서 내가 왔으로"화려한"아이디어의 반복을 통해 모든 요소를 만드는 래퍼 기능입니다.

이것이 잘 때에 그것을 테스트하지만,때 나는 통합 그것은 우리의 응용 프로그램으로,그것이 무너졌다.I 추적한다면 이 값에 의해 변경 내 래퍼입니다.샘플 코드를 보여 줍니다;전신 랩 이벤트 처리기,각각의 버튼이 표시됩니다 버튼 id 을 클릭하면,하지만 그 후에 그것을 감싸는 표시되는 이름은'정의되지 않은'이 예제에서,또는'Form1'실행할 경우 내에서 형태입니다.

가 누구나 알고 있거나 더 좋은 방법이 같은 일을 할 필요?또는 좋은 방법을 유지하는 원래 의도한'이'가치입니까?

당신이 상상할 수 있는,나는 원하지 않을 수정하는 기존의 이벤트 처리기 코드를 대상 버튼이 있습니다.

미리 감사드립니다.

PS-은 목표 브라우저 IE6&까지,브라우저 기능이 필요하지 않음

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
<script language="javascript" type="text/javascript">
    function btnWrap_onClick()
    {
        var btns = document.getElementsByTagName("button");
        for( var i = 0; i < btns.length; i++)
        {
            var btn = btns[i];

            // handle wrap button differerntly
            if( "btnWrap" == btn.id)
            {
                btn.disabled = true;
                continue; // skip this button
            }

            // wrap it
            var originalEventHandler = btn.onclick;
            btn.onclick = function()
            {
                alert("Starting event handler");
                originalEventHandler();
                alert("Finished event handler");
            }
        }

        alert("Buttons wrapped successfully");
    }
</script>
<body>
    <p>
    <button id="TestButton1" onclick="alert(this.id);">TestButton1</button>
    <button id="TestButton2" onclick="alert(this.id);">TestButton2</button>
    </p>
    <button id="btnWrap" onclick="btnWrap_onClick();">Wrap Event Handlers</button>
</body>
</html>
도움이 되었습니까?

해결책

아 폴 딕슨 말 사용할 수 있습니다 전화 그러나 나는 당신이 사용하는 것이 좋 적용 대신 합니다.

그러나,그 이유는 내가 응답되는 내가 발견해 bug: 당신은 실제로 바꾸는 모든 이벤트를 처리기와 이벤트 처리기의 마지막 단추입니다. 나는 생각하지 않는 당신이 무엇을 의도,그것은?(힌트:당신은 대체 가치에 대한 originalEventHandler 에서 각 반복)

아래 코드에서는 당신을 찾을 작동하는 크로스 브라우저 솔루션: 

function btnWrap_onClick()
{
    var btns = document.getElementsByTagName("button");
    for( var i = 0; i < btns.length; i++)
    {
        var btn = btns[i];

        // handle wrap button differerntly
        if( "btnWrap" == btn.id)
        {
            btn.disabled = true;
            continue; // skip this button
        }

        // wrap it

        var newOnClick = function()
        {
            alert("Starting event handler");
            var src=arguments.callee;
            src.original.apply(src.source,arguments);
            alert("Finished event handler");
        }
        newOnClick.original = btn.onclick; // Save original onClick
        newOnClick.source = btn; // Save source for "this"
        btn.onclick = newOnClick; //Assign new handler
    }
alert("Buttons wrapped successfully");
}

첫 번째 내가 만드는 새로운 익명의 기능과 스토어에서 변수 newOnClick.이 함수는 개체를 만들 수 있습 속성에 함수 개체 어떤 다른 객체입니다.내가 이것을 사용하여 만들의 시설 래 는 원래 onclick-handler,고 원 하는 요소가 될 것입니다 이 할 때 원래의 처리기가 호출됩니다.

익명 함수 안에 있는 나는 필요에 대한 참조를 가져올 수 있게 하는 기능을 의 값을 얻을 속성 래 고 원.부터 익명의 기능이 없는 이름을 내가 사용하는 사용 인수를 사용합니다.수신자 (지원되었던 이후 MSIE5.5)참조를 가져오고 그것을 저장하에서 변 src.

다음 사용 방법 적용 를 실행하여 원본 onclick 처리기입니다. 적용 두 개의 매개변수:첫 번째는 것의 가치 이, 이고,두 번째는 배열의 인수입니다. 이 는 요소는 원래 onclick 처리기에 부착하는 값이 저장되었에 원. 인수 내부 시설의 모든 기능 및 모든 인수 함수 호출되었으로(주는 익명의 기능이 없는 매개 변수 지정되지만,이를 호출하는 경우 몇 가지 어쨌든 매개변수,그들에서 찾을 수 있습니다 인수 제공).

사용하는 이유 적용 내가 전달할 수 있습니다 모든 인수하는 익명 함수가 호출로,그리고 이 기능이 투명한 크로스 브라우저입니다.(마이크로소프트 이벤트를 넣어에서는 창입니다.이벤트이지만 다른 브라우저는 물품에서 그것의 첫 번째 매개 변수 처리기 통화)

다른 팁

사용할 수 있습니다 전화 해결 방법이 바인딩,예를 들어, originalEventHandler.call(btn);

또는,도서관 같은 프로토타입 도움이 될 수 있습니다-그 bind 메서드를 구축 할 수있는 새로운 기능밖에 없을 지정된 개체는,그래서 당신이 선언 originalEventHandler 로 var originalEventHandler = btn.onclick.bind(btn);

마지막으로,좋은 백그라운더 바인딩에 대한 문제도를 참조하십시오 의 바인딩 상황에서 JavaScript

귀하의 문제는 방법으로 마감 작업에서 JavaScript.솔직히,나는 추천 사용하는 프레임워크입니다.그들의해야한 이벤트를 처리하는 것보다 훨씬 더 좋은 손으로 그것.

라이센스 : CC-BY-SA ~와 함께 속성
제휴하지 않습니다 StackOverflow
scroll top