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

最新推荐文章于 2022-12-28 15:43:45 发布

yunhaifeiwu

最新推荐文章于 2022-12-28 15:43:45 发布

阅读量155

点赞数

分类专栏： UI封装之javascript 文章标签：编程 JavaScript UI ViewUI

UI封装之javascript 专栏收录该内容

5 篇文章 0 订阅

订阅专栏

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

备用知识点：

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

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


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

;
上面三个等效。第三个，这部份----“(function(v){ return alert(v);})”新定义了一个
函数；而这部份----“("aaa")”向新定义的函数传递参数；也就是说第三个，函数定义与
调用写在了一起。

[/quote]

[b][color=blue][size=medium]
序：js----指javascript
＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝

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

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

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

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

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

＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝[/size][/color][/b]

例：下面的例子将由js，定义了一个Button对象，该对象生成一个按钮。
点击该按钮时，事件方法中既得到事件方法调用时的Button对象，又不丢产生事件的对象（例中是dom树中的button节点）。

<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 由此可看出，函数式编程，在不丢失事件源对象的前提下，成功地传递各种参数。

yunhaifeiwu

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
javascript函数式编程---解决事件参数传递问题

说明：函数式编程的概念，是本人的理解之物，不属于正规的严密定义。备用知识点：[quote]函数式编程------由于函数最终是一个值，因此函数可像普通变量一样参于各种运算，这就是函数式编程。Js支持函数式编程。Js的函数调用，可用两个括号括起来，第一个表示定义的函数，第二个表示参数。例： [code="java"]alert(“aaa”); (alert...
复制链接

扫一扫