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 相关文章推荐
IE8下关于querySelectorAll()的问题
May 13 Javascript
Javascript表达式中连续的 &amp;&amp; 和 || 之赋值区别
Oct 17 Javascript
jQuery中end()方法用法实例
Jan 08 Javascript
JavaScript取得键盘按下方向键是哪个的方法
Aug 04 Javascript
Jquery实现上下移动和排序代码
Oct 17 Javascript
js实现返回顶部效果
Mar 10 Javascript
Bootstrap页面标题Page Header的实现方法
Mar 22 Javascript
浅析Angular2子模块以及异步加载
Apr 24 Javascript
解决vue组件中使用v-for出现告警问题及v for指令介绍
Nov 11 Javascript
Angular数据绑定机制原理
Apr 17 Javascript
react的滑动图片验证码组件的示例代码
Feb 27 Javascript
微信小程序实现消息框弹出动画
Apr 18 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 获取SWF动画截图示例代码
2014/02/10 PHP
wordpress网站转移到本地运行测试的方法
2017/03/15 PHP
PHP实现留言板功能的详细代码
2017/03/25 PHP
PHP中抽象类,接口功能、定义方法示例
2019/02/26 PHP
thinkphp框架实现路由重定义简化url访问地址的方法分析
2020/04/04 PHP
JavaScript创建类/对象的几种方式概述及实例
2013/05/06 Javascript
JavaScript创建对象的写法
2013/08/29 Javascript
利用jquery包将字符串生成二维码图片
2013/09/12 Javascript
Javascript selection的兼容性写法介绍
2013/12/20 Javascript
jsPDF导出pdf示例
2014/05/02 Javascript
jQuery使用之处理页面元素用法实例
2015/01/19 Javascript
WEB前端开发都应知道的jquery小技巧及jquery三个简写
2015/11/15 Javascript
微信小程序 动态绑定事件并实现事件修改样式
2017/04/13 Javascript
JavaScript实现单例模式实例分享
2017/12/22 Javascript
深入理解js 中async 函数的含义和用法
2018/05/13 Javascript
微信小程序仿微信运动步数排行(交互)
2018/07/13 Javascript
React路由鉴权的实现方法
2019/09/05 Javascript
微信小程序保存图片到相册权限设置
2020/04/09 Javascript
JavaScript函数重载操作实例浅析
2020/05/02 Javascript
python中的字典详细介绍
2014/09/18 Python
Python使用ftplib实现简易FTP客户端的方法
2015/06/03 Python
python检索特定内容的文本文件实例
2018/06/05 Python
python2和python3的输入和输出区别介绍
2018/11/20 Python
python创建与遍历List二维列表的方法
2019/08/16 Python
Python 继承,重写,super()调用父类方法操作示例
2019/09/29 Python
python字符串的index和find的区别详解
2020/06/20 Python
使用CSS变量实现炫酷惊人的悬浮效果
2019/04/26 HTML / CSS
杭州联环马网络笔试题面试题
2013/08/04 面试题
安全负责人任命书
2014/06/06 职场文书
中学生旷课检讨书模板
2014/10/08 职场文书
西双版纳导游词
2015/02/03 职场文书
2015年小学语文教学工作总结
2015/05/25 职场文书
2016秋季校长开学典礼致辞
2015/11/26 职场文书
图解上海144收音机
2021/04/22 无线电
python实现的web监控系统
2021/04/27 Python
解决golang结构体tag编译错误的问题
2021/05/02 Golang