Node.js는 함수 바인딩 기술을 사용하여 이벤트 핸들러의 범위를 변경합니다.

첫 번째이자 가장 일반적인 방법은 이벤트 핸들러와 동일한 이름의 HTML 속성을 지정하여 html 태그에 직접 이벤트를 등록하는 것입니다.

코드 복사 코드는 다음과 같습니다.

function eventHandler() {
alert("현재 범위는 입력 요소 자체입니다.");
}

두 번째 방법은 이벤트 핸들러 속성. 이런 식으로 먼저 요소 객체를 얻습니다.

코드를 복사합니다. 코드는 다음과 같습니다. :

> ;

세 번째 방법은 DOM2 수준 이벤트 처리 방법인 addEventListener 및 RemoveEventListener를 사용하는 것입니다. IE 브라우저에 해당하는 방법은 attachmentEvent 및 detachEvent입니다. 이벤트를 등록하는 코드는 다음과 같습니다.

코드 복사 코드는 다음과 같습니다.

위의 세 가지 방법을 통해 입력 요소에 대한 클릭 이벤트 핸들러를 등록할 때의 한 가지 단점은 이 핸들러(this)의 범위가 항상 입력 개체 내에 있다는 것입니다. 객체지향 프로그래밍에서는 특정 범위에서 이를 명시적으로 지정해야 합니다. 이 범위를 변경하려면 js의 바인딩 기능 기술을 사용해야 합니다.
소위 "바운드 함수"는 특정 환경에서 지정된 매개변수로 다른 함수를 호출할 수 있는 함수를 생성하는 것입니다. 함수를 변수로 전달하면서 함수를 유지하는 데 사용할 수 있습니다. 함수의 범위(또한 이것의 실행 환경). 바인딩 함수의 정의 형태는 다음과 같습니다.

코드 복사 코드는 다음과 같습니다.

function bin( fn,scope) {
return fn.apply(scope||this,arguments)
}

이 바인딩 함수는 첫 번째 매개변수 두 개를 허용합니다. 함수를 실행해야 하며, 두 번째는 특정 실행 환경으로, 주어진 범위에서 주어진 함수를 호출하고 모든 매개변수를 함께 전달하는 함수를 반환합니다. 바인딩 기능 기술과 DOM2 수준 이벤트 핸들러를 사용하면 특정 범위에서 실행되는 요소에 대한 이벤트 핸들러를 등록할 수 있습니다. 구체적인 처리 방법은 다음과 같습니다.
먼저 앞서 정의한 등록 이벤트 방법을 다음과 같이 수정하세요.

코드를 복사하세요 코드는 다음과 같습니다:

function addHandler(obj, type, handler,scope) {
function fn(event) {
var evt = event ? 🎜>evt.target = event.target || event.srcElement;
return handler.apply(scope || this,arguments)
obj.eventHash || //필수사항입니다. 이벤트 핸들러를 등록하는 객체는 이벤트를 저장하는 해시 객체를 정의하고, 이벤트 유형
(obj.eventHash [type] = obj.eventHash [ 유형] || obj.addEventListener(type , fn, false)
} else if (obj.attachEvent) {
obj.attachEvent("on" type, fn)
} else {
obj[" on" 유형] = fn;
}
}


수정된 등록 이벤트 메소드를 사용하면 요소의 이벤트 핸들러가 지정된 환경에서 실행되도록 할 수 있습니다.

코드 복사 코드는 다음과 같습니다.

> ;

위 코드가 실행되면 핸들러 eventHandler의 this 범위는 window 객체 아래에 있습니다.

앞서 소개한 바인딩 기능을 통한 이벤트 등록은 이벤트 핸들러를 저장하기 위해 요소 객체에 대한 이벤트 해시 객체를 생성합니다. 이 해시 객체는 긴급 상황이 발생하면 해당 요소가 이벤트 핸들러를 제거할 때 시작됩니다. 상황에 따라 해당 이벤트 핸들러를 정확하게 제거할 수 있습니다. 이벤트 핸들러를 제거하는 코드는 다음과 같습니다.

코드 복사 코드는 다음과 같습니다.

function RemoveHandler(obj, type, handler,scope) {
obj.eventHash = obj.eventHash || {};
var evtList = obj.eventHash [type] || length;
if (len > 0) {
for (; len--; ) {
var curEvtObj = evtList[len]
if (curEvtObj.name == type && curEvtObj. handler === handler && curEvtObj.scope === 범위) {
if (obj.removeEventListener) {
obj.removeEventListener(type, curEvtObj.fn, false)
} else if (obj. detachEvent) {
obj.detachEvent("on" 유형, curEvtObj.fn)
} else {
obj["on" 유형] =
}
evtList.splice( len, 1);
break;
}
}
}
}

이로써 함수 바인딩 기술을 사용하여 이벤트 핸들러를 등록하는 방법을 마칩니다. 특정 실행 환경. 마찬가지로, 함수 바인딩을 사용하여 콜백 함수가 주어진 실행 환경에서 실행되도록 할 수도 있습니다.

본 글의 저작권은 작성자에게 있으며, 재인쇄는 환영합니다. 단, 이 글은 작성자의 동의 없이 보관되어야 하며, 눈에 띄는 위치에 원문 링크를 제공해야 합니다. 그렇지 않으면 법적 책임을 추구할 권리가 있습니다.