搜索
首页web前端js教程关于javaScript注册click事件传递参数的不成功问题_javascript技巧

最近这半年作为一个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));
声明
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn
Python vs. JavaScript:您应该学到哪种语言?Python vs. JavaScript:您应该学到哪种语言?May 03, 2025 am 12:10 AM

选择Python还是JavaScript应基于职业发展、学习曲线和生态系统:1)职业发展:Python适合数据科学和后端开发,JavaScript适合前端和全栈开发。2)学习曲线:Python语法简洁,适合初学者;JavaScript语法灵活。3)生态系统:Python有丰富的科学计算库,JavaScript有强大的前端框架。

JavaScript框架:为现代网络开发提供动力JavaScript框架:为现代网络开发提供动力May 02, 2025 am 12:04 AM

JavaScript框架的强大之处在于简化开发、提升用户体验和应用性能。选择框架时应考虑:1.项目规模和复杂度,2.团队经验,3.生态系统和社区支持。

JavaScript,C和浏览器之间的关系JavaScript,C和浏览器之间的关系May 01, 2025 am 12:06 AM

引言我知道你可能会觉得奇怪,JavaScript、C 和浏览器之间到底有什么关系?它们之间看似毫无关联,但实际上,它们在现代网络开发中扮演着非常重要的角色。今天我们就来深入探讨一下这三者之间的紧密联系。通过这篇文章,你将了解到JavaScript如何在浏览器中运行,C 在浏览器引擎中的作用,以及它们如何共同推动网页的渲染和交互。JavaScript与浏览器的关系我们都知道,JavaScript是前端开发的核心语言,它直接在浏览器中运行,让网页变得生动有趣。你是否曾经想过,为什么JavaScr

node.js流带打字稿node.js流带打字稿Apr 30, 2025 am 08:22 AM

Node.js擅长于高效I/O,这在很大程度上要归功于流。 流媒体汇总处理数据,避免内存过载 - 大型文件,网络任务和实时应用程序的理想。将流与打字稿的类型安全结合起来创建POWE

Python vs. JavaScript:性能和效率注意事项Python vs. JavaScript:性能和效率注意事项Apr 30, 2025 am 12:08 AM

Python和JavaScript在性能和效率方面的差异主要体现在:1)Python作为解释型语言,运行速度较慢,但开发效率高,适合快速原型开发;2)JavaScript在浏览器中受限于单线程,但在Node.js中可利用多线程和异步I/O提升性能,两者在实际项目中各有优势。

JavaScript的起源:探索其实施语言JavaScript的起源:探索其实施语言Apr 29, 2025 am 12:51 AM

JavaScript起源于1995年,由布兰登·艾克创造,实现语言为C语言。1.C语言为JavaScript提供了高性能和系统级编程能力。2.JavaScript的内存管理和性能优化依赖于C语言。3.C语言的跨平台特性帮助JavaScript在不同操作系统上高效运行。

幕后:什么语言能力JavaScript?幕后:什么语言能力JavaScript?Apr 28, 2025 am 12:01 AM

JavaScript在浏览器和Node.js环境中运行,依赖JavaScript引擎解析和执行代码。1)解析阶段生成抽象语法树(AST);2)编译阶段将AST转换为字节码或机器码;3)执行阶段执行编译后的代码。

Python和JavaScript的未来:趋势和预测Python和JavaScript的未来:趋势和预测Apr 27, 2025 am 12:21 AM

Python和JavaScript的未来趋势包括:1.Python将巩固在科学计算和AI领域的地位,2.JavaScript将推动Web技术发展,3.跨平台开发将成为热门,4.性能优化将是重点。两者都将继续在各自领域扩展应用场景,并在性能上有更多突破。

See all articles

热AI工具

Undresser.AI Undress

Undresser.AI Undress

人工智能驱动的应用程序,用于创建逼真的裸体照片

AI Clothes Remover

AI Clothes Remover

用于从照片中去除衣服的在线人工智能工具。

Undress AI Tool

Undress AI Tool

免费脱衣服图片

Clothoff.io

Clothoff.io

AI脱衣机

Video Face Swap

Video Face Swap

使用我们完全免费的人工智能换脸工具轻松在任何视频中换脸!

热工具

SublimeText3 英文版

SublimeText3 英文版

推荐:为Win版本,支持代码提示!

安全考试浏览器

安全考试浏览器

Safe Exam Browser是一个安全的浏览器环境,用于安全地进行在线考试。该软件将任何计算机变成一个安全的工作站。它控制对任何实用工具的访问,并防止学生使用未经授权的资源。

禅工作室 13.0.1

禅工作室 13.0.1

功能强大的PHP集成开发环境

Atom编辑器mac版下载

Atom编辑器mac版下载

最流行的的开源编辑器

VSCode Windows 64位 下载

VSCode Windows 64位 下载

微软推出的免费、功能强大的一款IDE编辑器