addEventListener学习
场景:给input框添加事件,但是里面的function得抽取出来复用,并且这个function还要传递参数
userId.addEventListener('input', idTest(userId.value));
这种写法是错误的,此时页面只会触发一次这个idTest方法,value为空。

正确写法:
userId.addEventListener('input', function (e) {
idTest(userId.value);
});
上面是传递参数的写法,
当不传递参数时,可以这样写:
userId.addEventListener('input', idTest);
addEventListener内可以传三个参数,具体见文档
mdn文档地址:https://developer.mozilla.org/zh-CN/docs/Web/API/EventTarget/addEventListener
addEventListener学习的更多相关文章
- 简单入门canvas - 通过刮奖效果来学习
一 .前言 一直在做PC端的前端开发,从互联网到行业软件.最近发现移动端已经成为前端必备技能了,真是不能停止学习.HTML5新增的一些东西,canvas是用的比较多也比较复杂的一个,简单的入门了一下, ...
- jQuery学习之路(7)- 用原生JavaScript实现jQuery的某些简单功能
▓▓▓▓▓▓ 大致介绍 学习了妙味,用原生的JavaScript实现jQuery中的某些部分功能 定义自己的函数库lQuery ▓▓▓▓▓▓ $()选择器的实现 jQuery是面向对象的,所以自己编写 ...
- 一步步学习javascript基础篇(8):细说事件
终于学到事件了,不知道为何听到“事件”就有一种莫名的兴奋.可能是之前的那些知识点过于枯燥无味吧,说起事件感觉顿时高大上了.今天我们就来好好分析下这个高大上的东西. 可以说,如果没有事件我们的页面就只能 ...
- 【Knockout.js 学习体验之旅】(1)ko初体验
前言 什么,你现在还在看knockout.js?这货都已经落后主流一千年了!赶紧去学Angular.React啊,再不赶紧的话,他们也要变out了哦.身旁的90后小伙伴,嘴里还塞着山东的狗不理大蒜包, ...
- HTML5移动开发学习笔记之Canvas基础
1.第一个Canvas程序 看的是HTML5移动开发即学即用这本书,首先学习Canvas基础,废话不多说,直接看第一个例子. 效果图为: 代码如下: <!DOCTYPE html> < ...
- CSS3与页面布局学习总结(四)——页面布局大全
一.负边距与浮动布局 1.1.负边距 所谓的负边距就是margin取负值的情况,如margin:-100px,margin:-100%.当一个元素与另一个元素margin取负值时将拉近距离.常见的功能 ...
- HTML5 学习总结(一)——HTML5概要与新增标签
一.HTML5概要 1.1.为什么需要HTML5 HTML4陈旧不能满足日益发展的互联网需要,特别是移动互联网.为了增强浏览器功能Flash被广泛使用,但安全与稳定堪忧,不适合在移动端使用(耗电.触摸 ...
- CSS3与页面布局学习总结(一)——概要、选择器、特殊性与刻度单位
web前端开发者最最注的内容是三个:HTML.CSS与JavaScript,他们分别在不同方面发挥自己的作用,HTML实现页面结构,CSS完成页面的表现与风格,JavaScript实现一些客户端的功能 ...
- HTML5学习笔记之History API
这系列文章主要是学习Html5相关的知识点,以学习API知识点为入口,由浅入深的引入实例,让大家一步一步的体会"h5"能够做什么,以及在实际项目中如何去合理的运用达到使用自如,完美 ...
- canvas学习之API整理笔记(二)
前面我整理过一篇文章canvas学习之API整理笔记(一),从这篇文章我们已经可以基本了解到常用绘图的API.简单的变换和动画.而本篇文章的主要内容包括高级动画.像素操作.性能优化等知识点,讲解每个知 ...
随机推荐
- 计算机COM口数据测试
计算机COM口数据测试一.基本使用流程 程序需要以管理员身份运行,COM口回路测试需短接2,3pin,测试时候使用控制台,配置测试相关路径,并在测试完成后 1.测试配置路径D:\bigdata\INI ...
- TiDB简述及TiKV的数据结构与存储
1 概述 TiDB 是 PingCAP 公司自主设计.研发的开源分布式关系型数据库,是一款同时支持在线事务处理与在线分析处理 (Hybrid Transactional and Analytical ...
- Djiango 创建迁移项报错query = query.decode(errors='replace') AttributeError: 'str' object has no attribute 'decode'
在终端命令行创建迁移项 输入(python manage.py makemigrations) 或(python manage.py migrate)时出现报错信息:Traceback (most r ...
- EaselJS 源码分析系列--第三篇
这一篇分析另外四个稍显高级的显示类 -- Sprite.Movieclip.DOMElement.BitmapText SpriteSheet SpriteSheet 比较简单 它继承自 EventD ...
- EasyExcel · 填充Excel
原文地址 Demo地址 最简单的填充 模版 效果 对象 @Getter @Setter @EqualsAndHashCode public class FillData { private Strin ...
- Robot Framework 自动化测试随笔(一)
一.安装Robot Framework步骤(安装目录避免中文和特殊字符,建议以管理员身份进行全部安装过程): 1.查看ride最新支持的python版本,据此下载对应python版本: https:/ ...
- Cesium 概述 (二) 空间数据可视化
https://blog.csdn.net/happyduoduo1/article/details/51865811/
- 线性关系和非线性关系在.net中的应用
在数学中,线性关系和非线性关系是描述两个变量之间函数关系的两种不同类型. 线性关系是指两个变量之间可以用一条直线来表示的关系.具体来说,如果存在一个一次函数 y = kx + b,其中k和b是常数,使 ...
- 1.0 Python 标准输入与输出
python 是一种高级.面向对象.通用的编程语言,由Guido van Rossum发明,于1991年首次发布.python 的设计哲学强调代码的可读性和简洁性,同时也非常适合于大型项目的开发.py ...
- 解放双手!ChatGPT助力编写JAVA框架
亲爱的Javaer们,在平时编码的过程中,你是否曾想过编写一个Java框架去为开发提效?但是要么编写框架时感觉无从下手,不知道从哪开始.要么有思路了后对某个功能实现的技术细节不了解,空有想法而无法实现 ...