您的位置：首页 > Web前端 > JavaScript

javascript函数式编程---解决事件参数传递问题

2012-03-31 18:20 381 查看

说明：函数式编程的概念，是本人的理解之物，不属于正规的严密定义。

备用知识点：

引用

函数式编程------由于函数最终是一个值，因此函数可像普通变量一样参于各种运算，这就是函数式编程。

Js支持函数式编程。

Js的函数调用，可用两个括号括起来，第一个表示定义的函数，第二个表示参数。

例：

Java代码

alert(“aaa”);

(alert)(“aaa”)

(function(v){ return alert(v);})("aaa");

;

上面三个等效。第三个，这部份----“(function(v){ return alert(v);})”新定义了一个

函数；而这部份----“("aaa")”向新定义的函数传递参数；也就是说第三个，函数定义与

调用写在了一起。

序：js----指javascript

＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝

在用js写UI组件，即对诸如div之类的封装时，不可避免的遇到一个困难。

当要在js所定义的对象中，为一个DOM节点的事件指定一个事件响应函数时，通

常这个事件响应函数的this对象是产生该事件的DOM节点，而得不到该函数所在

的对象。另外，由于需要，通常还要为该事件响应函数传递其他参数。

此时的解决之道就是应用函数式编程。下面是具体的应用实例。

＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝

例：下面的例子将由js，定义了一个Button对象，该对象生成一个按钮。

点击该按钮时，事件方法中既得到事件方法调用时的Button对象，又不丢产生事件的对象（例中是dom树中的button节点）。

Html代码

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<body>

<script language=Javascript>

function Button(value) {

　　this.value = value;

　　this.button = document.createElement("button");

　　this.button.appendChild(document.createTextNode("test"));

document.body.appendChild(this.button);

//注：这里才是点击事件的最终响应函数。

this.falert=function(classObj,e){

alert(classObj.value);

}

//下面onclick事件的右边第一个括符现定义了一个函数，这个函数的v参数，

//保存了onclick调用时的this对象，即Button对象；

// onclick事件的右边第二个括号传了onclick调用时的this对象即Button对象。

this.button.onclick = (function(v) {

　　　 return function() {

//调用Button对象的falert方法

v.falert(v,this);//这里的this是事件源对象，即dom树中的button节点

};

　　}) (this);

}

var bt = new Button("affffffffddda");

</script>

</body>

</html>

其中：

1 falert为点击事件的响应函数，该函数的classObj是调用onclick事件函数时的this对象，这里即是用户自已定义的Button对象。e为产生onclick事件的对象，这时即为

Button类中创建的button节点。

2 由此可看出，函数式编程，在不丢失事件源对象的前提下，成功地传递各种参数。

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航