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


Posted in Javascript onJune 28, 2017

今天在给元素注册事件的时候,使用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中把函数作为另一函数的参数传递方法(总结)就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
event.srcElement+表格应用
Aug 29 Javascript
jquery操作复选框checkbox的方法汇总
Feb 05 Javascript
AngularJS入门教程之AngularJS模型
Apr 18 Javascript
canvas实现粒子时钟效果
Feb 06 Javascript
JavaScript实现简单评论功能
Aug 17 Javascript
JS 中document.write()的用法和清空的原因浅析
Dec 04 Javascript
Echart折线图手柄触发事件示例详解
Dec 16 Javascript
基于vue-cli、elementUI的Vue超简单入门小例子(推荐)
Apr 17 Javascript
详解小程序毫秒级倒计时(适用于拼团秒杀功能)
May 05 Javascript
了解JavaScript中的选择器
May 24 Javascript
Electron vue的使用教程图文详解
Jul 05 Javascript
Vue的全局过滤器和私有过滤器的实现
Apr 20 Javascript
js+html制作简单日历的方法
Jun 27 #Javascript
ionic环境配置及问题详解
Jun 27 #Javascript
微信小程序 密码输入(源码下载)
Jun 27 #Javascript
Javascript实现base64的加密解密方法示例
Jun 27 #Javascript
微信小程序 空白页重定向解决办法
Jun 27 #Javascript
ionic 自定义弹框效果
Jun 27 #Javascript
js脚本编写简单刷票投票系统
Jun 27 #Javascript
You might like
PHP获取文件的MD5值并判断是否被修改的例子
2014/06/19 PHP
php函数实现判断是否移动端访问
2015/03/03 PHP
关于laravel 数据库迁移中integer类型是无法指定长度的问题
2019/10/09 PHP
DB.ASP 用Javascript写ASP很灵活很好用很easy
2011/07/31 Javascript
node.js 一个简单的页面输出实现代码
2012/03/07 Javascript
在js文件中如何获取basePath处理js路径问题
2013/07/10 Javascript
jquery如何判断某元素是否具备指定的样式
2013/11/05 Javascript
javascript获取ckeditor编辑器的值(实现代码)
2013/11/18 Javascript
JS获取当前网页大小以及屏幕分辨率等
2014/09/05 Javascript
javascript适合移动端的日期时间拾取器
2015/11/10 Javascript
jQuery删除节点用法示例(remove方法)
2016/09/08 Javascript
EasyUi 打开对话框后控件赋值及赋值后不显示的问题解决办法
2017/01/19 Javascript
如何选择jQuery版本 1.x? 2.x? 3.x?
2017/04/01 jQuery
使用jQuery,Angular实现登录界面验证码详解
2017/04/27 jQuery
vue2.0 + element UI 中 el-table 数据导出Excel的方法
2018/03/02 Javascript
AngularJS 应用模块化的使用
2018/04/04 Javascript
js实现各浏览器全屏代码实例
2018/07/03 Javascript
微信小程序云开发详细教程
2019/05/16 Javascript
Element-ui中元素滚动时el-option超出元素区域的问题
2019/05/30 Javascript
小程序websocket心跳库(websocket-heartbeat-miniprogram)
2020/02/23 Javascript
vue使用svg文件补充-svg放大缩小操作(使用d3.js)
2020/09/22 Javascript
[15:57]教你分分钟做大人:斧王
2014/10/30 DOTA
[53:38]OG vs LGD 2018国际邀请赛淘汰赛BO3 第三场 8.26
2018/08/30 DOTA
python使用threading获取线程函数返回值的实现方法
2017/11/15 Python
Python处理文本换行符实例代码
2018/02/03 Python
Python之读取TXT文件的方法小结
2018/04/27 Python
详解pyqt5 动画在QThread线程中无法运行问题
2018/05/05 Python
基于python的socket实现单机五子棋到双人对战
2020/03/24 Python
PyQt5通过信号实现MVC的示例
2021/02/06 Python
CSS 3.0文字悬停跳动特效代码
2020/10/26 HTML / CSS
英国独特的时尚和生活方式品牌:JOY
2018/03/17 全球购物
秋季运动会广播稿(30篇)
2014/09/13 职场文书
幼儿教师自我剖析材料
2014/09/29 职场文书
在职证明格式样本
2015/06/15 职场文书
2016年毕业实习心得体会范文
2015/10/09 职场文书
你会写报告?产品体验报告到底该怎么写?
2019/08/14 职场文书