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 相关文章推荐
关于document.cookie的使用javascript
Apr 11 Javascript
jquery关于页面焦点的定位(文本框获取焦点时改变样式 )
Sep 10 Javascript
基于OO的动画附加插件,可以实现弹跳、渐隐等动画效果 分享
Jun 24 Javascript
运用JQuery的toggle实现网页加载完成自动弹窗
Mar 18 Javascript
javascript移动设备Web开发中对touch事件的封装实例
Jun 05 Javascript
JS中三目运算符和if else的区别分析与示例
Nov 21 Javascript
Javascript 拖拽雏形(逐行分析代码,让你轻松了拖拽的原理)
Jan 23 Javascript
原生js与jQuery实现简单的tab切换特效对比
Jul 30 Javascript
js多个物体运动功能实例分析
Dec 20 Javascript
jQuery排序插件tableSorter使用方法
Feb 10 Javascript
javascript异步编程的六种方式总结
May 17 Javascript
用vue写一个日历
Nov 02 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
apache和PHP如何整合在一起
2015/10/12 PHP
PHP attributes()函数讲解
2019/02/03 PHP
Yii2框架配置文件(Application属性)与调试技巧实例分析
2019/05/27 PHP
基于Web标准的UI组件 — 树状菜单(2)
2006/09/18 Javascript
SlideView 图片滑动(扩展/收缩)展示效果
2010/08/01 Javascript
使用JavaScript的ActiveXObject对象检测应用程序是否安装的方法
2014/04/15 Javascript
jQuery控制TR显示隐藏的三种常用方法
2014/08/21 Javascript
自己封装的常用javascript函数分享
2015/01/07 Javascript
用jQuery实现优酷首页轮播图
2017/01/09 Javascript
JS模拟超市简易收银台小程序代码解析
2017/08/18 Javascript
php main 与 iframe 相互通讯类(js+php同域/跨域)
2017/09/14 Javascript
微信小程序富文本渲染引擎的详解
2017/09/30 Javascript
vue采用EventBus实现跨组件通信及注意事项小结
2018/06/14 Javascript
vue-router 源码之实现一个简单的 vue-router
2018/07/02 Javascript
es6数组之扩展运算符操作实例分析
2020/04/25 Javascript
[00:56]跨越时空加入战场 全新祈求者身心“失落奇艺侍祭”展示
2019/07/20 DOTA
谈谈Python进行验证码识别的一些想法
2016/01/25 Python
numpy中索引和切片详解
2017/12/15 Python
python实时监控cpu小工具
2018/06/21 Python
python之Flask实现简单登录功能的示例代码
2018/12/24 Python
简单了解pytest测试框架setup和tearDown
2020/04/14 Python
Eclipse配置python默认头过程图解
2020/04/26 Python
Python实现将元组中的元素作为参数传入函数的操作
2020/06/05 Python
移动端适配 使px自动转换rem
2019/08/26 HTML / CSS
详解CSS3中常用的样式【基本文本和字体样式】
2020/10/20 HTML / CSS
HTML5 b和i标记将被赋予真正的语义
2009/07/16 HTML / CSS
外企C语言笔试题
2013/11/10 面试题
请介绍一下WSDL的文档结构
2013/03/17 面试题
市场部专员岗位职责
2013/11/30 职场文书
诚信考试标语
2014/06/24 职场文书
《改造我们的学习》心得体会
2014/11/07 职场文书
对外汉语教师推荐信
2015/03/27 职场文书
2015年幼儿园卫生保健工作总结
2015/05/12 职场文书
golang 实现两个结构体复制字段
2021/04/28 Golang
python自动化之如何利用allure生成测试报告
2021/05/02 Python
面试中canvas绘制图片模糊图片问题处理
2022/03/13 Javascript