About the unsuccessful problems with JavaScript registration Click event passing Parameters _javascript tips

Source: Internet
Author: User

This last six months as a Java programmer, I write JavaScript code faster than the Java code, some time ago is to a bank to do a teller control system, in the cabinet authorization this function, due to the authority of the teller need to consider all aspects of factors, such as the authority of the cabinet, the type of authority, Post permissions, business permissions and so on, and to do these permissions to do multiple intersection or set processing, the page has to use a lot of JavaScript to control. This creates a situation where JavaScript code is responsible for the implementation of this functional module over Java code.

And now it's time to develop a safe-box management system for a bank, its core function block safe management and safe box management, in order to achieve the management function similar to the C/s structure as intuitive, convenient, and the results of the processing of real-time display to the operator, after several days of thinking and experiments, the final use of Css+javascript +java to develop, with Java to deal with business logic, using CSS to represent the various states of the target object, using JavaScript to change the state of the target object, to achieve its CSS switch.

One of the challenges here is to register the click event handler for an HTML element in JavaScript, such as passing 3 arguments to the handler function. However, whether you use the following method (node represents the nodes that are registering the event, fun is the event handler), you cannot pass arguments to the event handler function:

Node.addeventlistener (' Click ', fun, false); 
Node.attachevent (' onclick ', fun);
node[' onclick ']=fun

Obviously not in the way, note that the wording is not correct:

Node.addeventlistener (' Click ', Fun (ARG1,ARG2,ARG3), false); 
Node.attachevent (' onclick ', Fun (ARG1,ARG2,ARG3)); 
node[' onclick ']=fun (ARG1,ARG2,ARG3)

Fortunately, read a book "Javascript.dom Advanced Program Design", in this book found a solution. 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);
};}; 

And then in their own JS library to add the following two methods, if there is no understanding of the place, you can refer to the "Javascript.dom Advanced Program Design", which the book 2.3 subsection has the description of the method, but I 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) {
//Check compatibility with the previous method to ensure smooth degradation
if (!iscompatible ()) {return
false
} 
if (!) ( node = $ (node)) return 
false;
The IF (node.addeventlistener) { 
//w3c method (bubbling event, if False to true, is the capture event) 
Node.addeventlistener (type, listener, FALSE); 
return true;
}
else
if (node.attachevent) { 
//msie method 
node[' e ' + type + listener] = listener;
Node[type + Listener] = function () {
node[' e ' + type + listener] (window.event);
} 
Node.attachevent (' on ' + type, Node[type + listener]); 
return true; 
}
If neither method is available, returns false return False 
;
window[' Oyf_mark ' [' addevent '] = addevent;

The above two functions for myself according to the "Javascript.dom advanced Programming" in the source code slightly modified to add to their own a JS library, in order to reuse. You can then register the event with the element and pass arguments to the event handler function by using the following methods:

//Register the new OnClick event handler function oyf_mark.addevent (E, ' click ', Oyf_mark.bindfunction (E, 
Getcontainerdetail,x,y,containid)); 
Related Article

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.