当前位置:首页 > 日记 > 正文

JS中把函数作为另一函数的参数传递方法 | 总结

JS中把函数作为另一函数的参数传递方法 | 总结

今天在给元素注册事件的时候,使用addEventListener遇到了一个问题,这个好像之前也遇到过,觉得有必要总结一下,就是js函数作为参数引发的问题。首先看以下代码,觉得下面代码有问题吗?是否能达到点击id3对应的元素后,弹出id3呢?

例1

var obj3=document.getElementById('id3'); obj3.addEventListener('click',curClick('id1'),true); function curClick(id){     alert(id); } 

答案是否定,不能达到我想要的效果,因为这行代码在页面加载完成时候,就会弹出id3。当我单击id3对应的元素时候,页面没有任何反应。

于是我将代码改为如下两种情况:

例2

var obj3=document.getElementById('id3');   obj3.addEventListener('click',function(e){curClick('id3');stopPropagation(e)},true);    function curClick(id){     alert(id);   } 

例3

var obj1=document.getElementById('id1');  obj1.addEventListener('click',curClick1,true); function curClick1(){  alert('okey'); } 

这次执行正常了,这是为什么呢?

因为在JS世界里curClick('id3')就是直接调用curClick('id3'),而非将其作为一个参数来传递,如果要将其作为一个参数来传递,如果不需要传递参数,直接传递函数名就可,如果需要传递参数,有两种解决办法

方法一:借助匿名函数,将要传递的函数,放在匿名函数中,将匿名函数作为参数如例2

eg:将function(){myfunction(val1,val2,......);}作为参数传递。

第二:改写需要传递函数

function curClick1(val){ <span style="white-space:pre">  </span>return function(){     alert(val);   }; } 

以上这篇JS中把函数作为另一函数的参数传递方法(总结)就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持。

相关文章

Agularjs妙用双向数据绑定实现手风

Agularjs妙用双向数据绑定实现手风

数据绑定,手风琴,妙用,双向,效果,最近在工作总遇到需要实现类似手风琴效果的需求,如下图所示:因为汇总(上半部分)和明细(下面的浅色部分)在不同的情况下显示的字段数量是不一样的,而且还有编辑和展示的状态切换,所以需要自己实现手风琴效果。初步的…

实例详解JavaScript中setTimeout函

实例详解JavaScript中setTimeout函

执行顺序,函数,详解,实例,电脑软件,前言setTimeout,前端工程师必定会打交道的一个函数。它看上去非常的简单,朴实,有着一个很不平凡的名字--定时器。其实网上关于JavaScript中setTimeout的文章很多,但总感觉例子不够直接具体,因此写了个简单的例…

详解tween.js的使用教程

详解tween.js的使用教程

使用教程,详解,电脑软件,js,tween,前面的话TweenJS提供了一个简单但强大的渐变界面。它支持渐变的数字对象属性&CSS样式属性,并允许链接补间动画和行动结合起来,创造出复杂的序列。本文将详细介绍tween.js的使用 概述tween.js允许以平滑的方…

老生常谈js-react组件生命周期

老生常谈js-react组件生命周期

生命周期,组件,老生常谈,电脑软件,react,组件的生命周期可分成三个状态:?Mounting:已插入真实 DOM?Updating:正在被重新渲染?Unmounting:已移出真实 DOM生命周期的方法有:?componentWillMount 在渲染前调用,在客户端也在服务端。?componentDidMo…

老生常谈js中0到底是 true 还是 fa

老生常谈js中0到底是 true 还是 fa

老生常谈,电脑软件,true,js,false,想到一个好玩的,运行如下 javascript :if ('0') alert("'0' is true");if ('0' == false) alert("'0' is false");结果是,两次都 alert 了!那么 '0' 到底是 true 还是 false 呢?答案是:在js做比较…

Excel表格函数出错怎么解决

Excel表格函数出错怎么解决

函数,表格,电脑软件,Excel,  工作中经常使用Excel的朋友可能都会遇到一些看起来似懂非懂的错误值信息:例如# N/A!、#VALUE!、#DIV/O!等等,出现这些错误的原因有很多种,你真的了解它们吗,熟练掌握解决这些错误的方法吗?下面给大家分享Excel中…

ps怎么给图形上渐变色

ps怎么给图形上渐变色

图形,渐变色,方法,电脑软件,ps,  给图形上色在ps中很简单,但其实上渐变色也很好看。那么大家知道ps怎么给图形上渐变色吗?下面是小编整理的ps怎么给图形上渐变色的方法,希望能帮到大家!ps给图形上渐变色的方法1、新建一个图层,画一个圆形。2…

解决浏览器记住ajax请求并能前进和

解决浏览器记住ajax请求并能前进和

请求,浏览器,并能,电脑软件,ajax,在我们浏览不同网页的时候,我们可以通过浏览器的前进、后退键来去到我们前后访问过的页面。这都有一个共同点,就是 浏览器地址栏的地址改变了。浏览器自身维护了一个记录用户访问页面历史的栈,栈中记录了用户…

WPS演示插入背景音乐的方法是什么

WPS演示插入背景音乐的方法是什么

方法,背景音乐,演示,电脑软件,WPS,  制作PPT的时候,需要加入一些元素使得PPT更加吸引人,其中给PPT加入背景音乐是常用的方法之一。那么在wps中,这个方法应该怎么使用,一起来探讨一下。以下是小编为您带来的关于WPS演示插入背景音乐的方法,希望…

JavaScript定义函数的三种实现方法

JavaScript定义函数的三种实现方法

方法,函数,三种,定义,电脑软件,JavaScript定义函数的三种实现方法【1】正常方法function print(msg){ document.write(msg);}对函数进行调用的几种方式: 函数名(传递给函数的参数1,传递给函数的参数2,….)变量 = 函数名(传递给函数的参数1,传递给…

详解JS中的立即执行函数

详解JS中的立即执行函数

立即执行函数,详解,电脑软件,JS,1.匿名函数不能单独定义,必须进行赋值操作或者立即执行,否则会被JS引擎定义为语法错误function(){alert(dada);}VM229:1 Uncaught SyntaxError: Unexpected token 2.在函数体后面加括号就能立即调用,这个函数形…

JS倒计时实例_天时分秒

JS倒计时实例_天时分秒

分秒,天时,倒计时,实例,电脑软件,HTML代码:<div id="times_wrap" class="time_num"> 距离结束时间: <div class="time_w"> <b id="times_d" class="time"> </b>天 <b id="times_h" class="time"> </b>时 <b id="times_m" …