Home > Web Front-end > JS Tutorial > Regarding the unsuccessful problem of passing parameters in javaScript registration click event_javascript skills

Regarding the unsuccessful problem of passing parameters in javaScript registration click event_javascript skills

WBOY
Release: 2016-05-16 16:41:39
Original
1094 people have browsed it

As a Java programmer in the past six months, I have written more JavaScript code than Java code. Some time ago, I was building a teller control system for a bank. In the teller authorization function, due to the teller authorization needs Considering various factors, such as organizational permissions, teller type permissions, position permissions, business permissions, etc., and these permissions need to be intersected or combined multiple times, and a lot of JavaScript has to be used on the page for control. This has resulted in a situation where the javaScript code is more responsible for the implementation of this functional module than the java code.

Now we need to develop a safe deposit box management system for a bank. Its core function blocks are safe deposit box management and safe deposit box management. In order to achieve management functions that are as intuitive and convenient as the C/S architecture, it will also process the results. Real-time display to the operator. After several days of thinking and experimenting, we finally used CSS javaScript java for development, java to handle business logic, CSS to express various states of the target object, and javaScript to base on the state of the target object. Transform to achieve its CSS switching.

I encountered a problem here, that is, when registering a click event handler function for an html element in JavaScript, for example, passing 3 parameters to the handler function. However, no matter whether you use the following method (node ​​represents the node to register the event, fun is the event processing function), you cannot pass parameters to the event processing function:

node.addEventListener('click', fun, false); 
node.attachevent('onclick', fun);
Node['onclick']=fun
Copy after login

Obviously none of the methods work. Please note that the writing is incorrect:

node.addEventListener('click', fun(arg1,arg2,arg3), false); 
node.attachevent('onclick', fun(arg1,arg2,arg3)); 
Node['onclick']=fun(arg1,arg2,arg3)
Copy after login

Fortunately, I read a book "JavaScript.DOM Advanced Programming" and found a solution in this book. First write a method:

function bindFunction(obj, func){ 
var args = []; 
for(var i =2; i < arguments.length; i++) { 
args.push(arguments[i]);
} 
return function(){ 
func.apply(obj, args);
}; 
};
Copy after login

Then add the following two methods in your own js library. If you don’t understand anything, you can refer to "JavaScript.DOM Advanced Programming". Section 2.3 of the book has instructions for this method, but I have added a few. Changes:

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['OYF_MARK']['bindFunction'] = 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['e' + type + listener] = listener;
node[type + listener] = function(){
node['e' + type + listener](window.event);
} 
node.attachEvent('on' + type, node[type + listener]); 
return true; 
}
//若两种方法都不具备则返回false 
return false;
};
window['OYF_MARK']['addEvent'] = addEvent;
Copy after login

The above two functions were slightly modified by me based on the source code in "JavaScript.DOM Advanced Programming" and added to one of my own js libraries for reuse. Next, you can use the following method to register events for elements and pass parameters to the event processing function:

//注册新的onclick事件处理函数
OYF_MARK.addEvent(e,'click',OYF_MARK.bindFunction(e,getContainerDetail,x,y,containid));
Copy after login
Related labels:
source:php.cn
Statement of this Website
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Popular Tutorials
More>
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template