关于javaScript注册click事件传递参数的不成功问题

最近这半年作为一个java 程序员,我写的javaScript代码都快比java代码多了,前段时间是给某银行做一个柜员管控系统,在柜员授权这一块功能上,由于柜员的授权需要考虑各方面的因素,比如机构权限、柜员类型权限、岗位权限,业务权限等等,并且要对这些权限要做多次的交集或者并集处理,页面上不得不用许多的javascript来进行控制。造成了这一功能模块的实现上javaScript代码比java代码负责的情况。

而现在又要给某银行开发一个保管箱管理系统,其核心功能块保管箱座管理以及保管箱管理,为实现管理功能上类似与C/S架构那样直观、方便,并将处理结果实时的显示给操作人员,经过几日思考与实验,最终使用CSS+javaScript+java来进行开发,用java来处理业务逻辑,用CSS用来表现目标对象的各种状态,用javaScript来根据目标对象的状态转变,来实现其CSS的切换。

在这其中遇到了一个难题,就是在javaScript中给一个html元素注册click事件处理函数时,比如给该处理函数传3个参数。可是不管是使用下面那种方式(node表示要注册事件的节点,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['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;

以上两个函数为本人根据《JavaScript.DOM高级程序设计》中源代码稍作修改,添加到自己的的一个js库中,以便复用。接下来就可以使用如下方式给元素注册事件并向事件处理函数传递参数了:

//注册新的onclick事件处理函数
OYF_MARK.addEvent(e,'click',OYF_MARK.bindFunction(e,getContainerDetail,x,y,containid));
(0)

相关推荐

  • Javascript attachEvent传递参数的办法

    复制代码 代码如下: var newopen = function(id,level) { return function() { opentree(id,level);//该函数为外部定义的一个执行函数: } } x.attachEvent("onclick",newopen(id,parseInt(level)+1)); y.attachEvent("onclick",newopen(id,parseInt(level)+2)); IE only想要知道兼容的代

  • JSP跨iframe如何传递参数实现代码

    表单与操作页面分离 按钮按下,click 或者onclick事件触发 传递一个唯一性的参数至子页面JSP, 子页面内,负责查询与判断逻辑, JSP:FORWARD尝试过,直接报错 复制代码 代码如下: <script type="text/JavaScript"> function tigger() { var f_application =1; <jsp:forward page="input.jsp"> <jsp:param nam

  • JS中传递参数的几种不同方法比较

    在进行网页开发时,与前台与后台数据进行交互是一个无法避免的问题,不同的业务需求有着不同的传递方式,下面是我在开发过程中用到过的几种传递方式,写出来与大家分享一下,由于经验不足,出现错误的地方欢迎大家指正. 1.通过window.location.href或者document.location.href进行传递,比如window.location.href="http://www.ewcar.net?name=sun&age=21";在这个例子中所携带的参数即为name和age,

  • JS AJAX前台如何给后台类的函数传递参数

    将普通页面的方法公布为WebMethod,以Javascript形式访问. 1 方法要public static修饰,返回类型最好是string. 2 方法前添加[WebMethod] 特性. 3 Client端访问时要使用Post方法,和Json作为数据形式进行交互.否则会整页HTML返回. 4 在jQuery访问时,回调中的data.d才时真正的返回内容. 5 访问URL为: http://abc.com/abc.aspx/GetTime 如有个GetTime的公共静态方法. 例: abc.

  • javascript向flash swf文件传递参数值注意细节

    问题:如何使用javascript向SWF文件传递参数? 在网上找了一个完整的教程,很有启发性和实用性,如下是完整实现的步骤: 配置SwfObject: Swfobject2是目前检测用户是否安装Flash的最佳方法.它被认为是'行业标准',并且Adobe所有产品的新版本(Flex4,Flash CS5)都会使用SwfObject来检测Flash Player. 先要下载,解压ZIP文件,复制swfobject.js文件到你的web服务器上,根目录下创建名为'js'根文件夹是个不错的想法.(因此

  • 完美解决js传递参数中加号和&号自动改变的方法

    在action中用get方法获得参数,如果参数里有"+",要做处理,否则到后台会变成空格. 解决方案: 1 .改用post方法: 2 .在 js 里用 url = encodeURI(encodeURI(XXX)) ,后台再解码一次: 3 .传递参数的时候直接替换转义,或者直接写转义后的代码 data =  "a + b": data = data.replace(/\+/g, "+"); data = data.replace(/\&/

  • js提交form表单,并传递参数的实现方法

    //增加的函数 begin function queryFun(){ var type = $("#artType").val(); var hasInputed = "1";//表示输入了要搜索 的信息 if($("#query").val()=="选手姓名/编号"){ //表示没有输入要搜索的值 hasInputed="0"; } document.getElementById("queryF

  • Angularjs中$http以post请求通过消息体传递参数的实现方法

    本文实例讲述了Angularjs中$http以post请求通过消息体传递参数的方法.分享给大家供大家参考,具体如下: Angularjs中,$http以post在消息体中传递参数,需要做以下修改,以确保消息体传递参数的正确性. 一.在声明应用的时候进行设置: var httpPost = function($httpProvider) { /******************************************* 说明:$http的post提交时,纠正消息体 ***********

  • html向js方法传递参数具体实现

    html注册事件向引用方法中的传参问题,两个方式: 复制代码 代码如下: <html> <head> <script> function bbb(event){ event = window.event || event; var srcEle = event.target || event.srcElement; alert(srcEle.value); } function ccc(cc){ alert(cc.value); } </script> &l

  • js获取html参数及向swf传递参数应用介绍

    我们知道HTML页面是在客户端执行的,这样要获取参数必须使用客户端脚本(如JavaScript),在这点上不同于服务器端脚本获取参数方式. 下面的这段js代码获取HTML网页形如"test.html?foo=mytest&program=flash" "?"后所有参数. 复制代码 代码如下: <script language=javascript> <!-- var hrefstr,pos,parastr; hrefstr = window

随机推荐