JavaScript 등록 클릭 이벤트에서 매개변수 전달 실패 문제에 대해

高洛峰
풀어 주다: 2017-02-16 17:19:52
원래의
954명이 탐색했습니다.

예를 들어 javaScript에서 html 요소에 대한 클릭 이벤트 핸들러 함수를 등록할 때 핸들러 함수에 3개의 매개변수를 전달합니다. 그러나 다음 방법을 사용해도 이벤트 처리 함수에 매개변수를 전달할 수 없습니다.

저는 지난 6개월 동안 Java 프로그래머로서 Java 코드보다 JavaScript 코드를 더 많이 작성했습니다. 창구 관리 및 통제 시스템을 구축하기 위해서는 창구 권한 측면에서 창구 권한에 있어서 조직적 권한, 창구형 권한, 직위 권한, 업무 권한 등 다양한 요소를 고려해야 하며, 이러한 권한은 은행을 대상으로 한다. 여러 번 수행해야 합니다. 교차 또는 결합 처리에는 제어를 위해 페이지에서 사용되는 많은 자바스크립트가 필요합니다. 이로 인해 JavaScript 코드가 Java 코드보다 이 기능 모듈의 구현을 더 담당하게 되는 상황이 발생했습니다.

이제 은행용 대여금고 관리 시스템을 개발해야 합니다. 핵심 기능 블록은 대여금고 기반 관리와 대여금고 관리 기능을 직관적이고 편리하게 구현하는 것입니다. 며칠간 고민하고 실험한 끝에 최종적으로 CSS+javaScript+java를 개발에 사용했고, 비즈니스 로직을 처리하기 위해 java를 사용했고, CSS를 사용했습니다. 대상 객체의 다양한 상태를 표현하기 위해 javaScript를 사용하였고, 대상 객체의 상태 전환에 따라 CSS 전환을 구현하였습니다.

여기서 문제가 발생했습니다. 즉, JavaScript에서 html 요소에 대한 클릭 이벤트 핸들러 함수를 등록할 때(예: 핸들러 함수에 3개의 매개변수 전달) 문제가 발생했습니다. 다만, 다음 방법을 사용해도(노드는 이벤트를 등록하는 노드를 나타내며, fun은 이벤트 처리 함수) 이벤트 처리 함수에 매개변수를 전달할 수 없습니다.

node.addEventListener('click', fun, false); 
node.attachevent('onclick', fun);
Node['onclick']=fun
로그인 후 복사

분명히 어떤 방법도 작동하지 않습니다. 쓰기가 올바르지 않다는 점에 유의하세요.

node.addEventListener('click', fun(arg1,arg2,arg3), false); 
node.attachevent('onclick', fun(arg1,arg2,arg3)); 
Node['onclick']=fun(arg1,arg2,arg3)
로그인 후 복사

다행히 책을 읽었습니다. JavaScript.DOM 고급 프로그래밍". 이 책에서 해결책을 찾았습니다. 먼저 메소드를 작성하세요:

function bindFunction(obj, func){ 
var args = []; 
for(var i =2; i < arguments.length; i++) { 
args.push(arguments[i]);
} 
return function(){ 
func.apply(obj, args);
}; 
};
로그인 후 복사

그런 다음 자신의 js 라이브러리에 다음 두 가지 메소드를 추가하세요. 아무것도 이해하지 못하는 경우 "JavaScript"를 참조하세요. .DOM" "고급 프로그래밍", 책의 섹션 2.3에 이 방법에 대한 설명이 있지만 몇 가지 변경 사항을 추가했습니다.

function bindFunction(obj, func){ 
var args = []; 
for(var i =2; i < arguments.length; i++) {
args.push(arguments[i]);
}
return function(){
func.apply(obj, args);
};
}; 
window[&#39;OYF_MARK&#39;][&#39;bindFunction&#39;] = bindFunction; 
function addEvent(node, type, listener){
//使用前面的方法检查兼容性以保证平稳退化
if (!isCompatible()) {
return false
} 
if (!(node = $(node))) 
return false;
if (node.addEventListener) { 
//W3C的方法(冒泡事件,如果将false改为true,则为捕获事件) 
node.addEventListener(type, listener, false); 
return true;
}
else
if (node.attachEvent) { 
//MSIE的方法 
node[&#39;e&#39; + type + listener] = listener;
node[type + listener] = function(){
node[&#39;e&#39; + type + listener](window.event);
} 
node.attachEvent(&#39;on&#39; + type, node[type + listener]); 
return true; 
}
//若两种方法都不具备则返回false 
return false;
};
window[&#39;OYF_MARK&#39;][&#39;addEvent&#39;] = addEvent;
로그인 후 복사

위의 두 함수 "JavaScript.DOM 고급 프로그래밍"의 소스 코드는 약간 수정되어 재사용을 위해 자신의 js 라이브러리에 추가되었습니다. 다음으로, 다음 방법을 사용하여 요소에 대한 이벤트를 등록하고 이벤트 처리 함수에 매개변수를 전달할 수 있습니다.

//注册新的onclick事件处理函数
OYF_MARK.addEvent(e,&#39;click&#39;,OYF_MARK.bindFunction(e,getContainerDetail,x,y,containid));
로그인 후 복사

클릭 이벤트 등록 시 매개변수 전달 실패 문제에 대한 자세한 관련 기사를 보려면 javascript로 PHP 중국어 홈페이지를 주목해주세요!

관련 라벨:
원천:php.cn
본 웹사이트의 성명
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.
최신 이슈
인기 튜토리얼
더>
최신 다운로드
더>
웹 효과
웹사이트 소스 코드
웹사이트 자료
프론트엔드 템플릿