어쨌든지'이'에서 변경할 때,나는 감싸는 기능입니까?
-
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.솔직히,나는 추천 사용하는 프레임워크입니다.그들의해야한 이벤트를 처리하는 것보다 훨씬 더 좋은 손으로 그것.