场景:给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学习的更多相关文章

  1. 简单入门canvas - 通过刮奖效果来学习

    一 .前言 一直在做PC端的前端开发,从互联网到行业软件.最近发现移动端已经成为前端必备技能了,真是不能停止学习.HTML5新增的一些东西,canvas是用的比较多也比较复杂的一个,简单的入门了一下, ...

  2. jQuery学习之路(7)- 用原生JavaScript实现jQuery的某些简单功能

    ▓▓▓▓▓▓ 大致介绍 学习了妙味,用原生的JavaScript实现jQuery中的某些部分功能 定义自己的函数库lQuery ▓▓▓▓▓▓ $()选择器的实现 jQuery是面向对象的,所以自己编写 ...

  3. 一步步学习javascript基础篇(8):细说事件

    终于学到事件了,不知道为何听到“事件”就有一种莫名的兴奋.可能是之前的那些知识点过于枯燥无味吧,说起事件感觉顿时高大上了.今天我们就来好好分析下这个高大上的东西. 可以说,如果没有事件我们的页面就只能 ...

  4. 【Knockout.js 学习体验之旅】(1)ko初体验

    前言 什么,你现在还在看knockout.js?这货都已经落后主流一千年了!赶紧去学Angular.React啊,再不赶紧的话,他们也要变out了哦.身旁的90后小伙伴,嘴里还塞着山东的狗不理大蒜包, ...

  5. HTML5移动开发学习笔记之Canvas基础

    1.第一个Canvas程序 看的是HTML5移动开发即学即用这本书,首先学习Canvas基础,废话不多说,直接看第一个例子. 效果图为: 代码如下: <!DOCTYPE html> < ...

  6. CSS3与页面布局学习总结(四)——页面布局大全

    一.负边距与浮动布局 1.1.负边距 所谓的负边距就是margin取负值的情况,如margin:-100px,margin:-100%.当一个元素与另一个元素margin取负值时将拉近距离.常见的功能 ...

  7. HTML5 学习总结(一)——HTML5概要与新增标签

    一.HTML5概要 1.1.为什么需要HTML5 HTML4陈旧不能满足日益发展的互联网需要,特别是移动互联网.为了增强浏览器功能Flash被广泛使用,但安全与稳定堪忧,不适合在移动端使用(耗电.触摸 ...

  8. CSS3与页面布局学习总结(一)——概要、选择器、特殊性与刻度单位

    web前端开发者最最注的内容是三个:HTML.CSS与JavaScript,他们分别在不同方面发挥自己的作用,HTML实现页面结构,CSS完成页面的表现与风格,JavaScript实现一些客户端的功能 ...

  9. HTML5学习笔记之History API

    这系列文章主要是学习Html5相关的知识点,以学习API知识点为入口,由浅入深的引入实例,让大家一步一步的体会"h5"能够做什么,以及在实际项目中如何去合理的运用达到使用自如,完美 ...

  10. canvas学习之API整理笔记(二)

    前面我整理过一篇文章canvas学习之API整理笔记(一),从这篇文章我们已经可以基本了解到常用绘图的API.简单的变换和动画.而本篇文章的主要内容包括高级动画.像素操作.性能优化等知识点,讲解每个知 ...

随机推荐

  1. 使用部分写时复制提升Lakehouse的 ACID Upserts性能

    使用部分写时复制提升Lakehouse的 ACID Upserts性能 译自:Fast Copy-On-Write within Apache Parquet for Data Lakehouse A ...

  2. python学习笔记:第七章面向对象

    与java类似,python作为一种面向对象的编程语言,也可以创建自定义的对象和类. 它的特性主要有:继承,封装,多态,方法,属性,超类 1.变量的作用域 c = 50 #全局变量, 作用域为整个模块 ...

  3. html实现原生table并设置表格边框的两种方式

    虽然第三方表格插件多不胜数,但是很多场景还是需要用到原生<table>,掌握html原生table的实现方法,是前端开发的必备技能.例如:print-js打印.html2canvas生成图 ...

  4. 初识常量变量、字符串、ASCII编码表、转义字符表

    一.常量.变量 1.枚举常量(enum) 枚举常量不能更改,枚举常量所创造出的变量可以更改 正确 错误 2.常变量 3.#define定义的标示变量 二.数组 "abc"--'a' ...

  5. 即构SDK新增焦点语音功能,可实现特定用户语音的聚焦

    2021年,即构SDK每月迭代如期而至.今年,我们会着重介绍每月SDK的重要新增功能,让大家更清晰的了解到这些新功能的特性及应用场景. 重点新增功能 多人语音通话场景下的焦点语音功能 功能介绍 即构S ...

  6. stegsolve与zsteg的使用

    zsteg 介绍:用来检测PNG和BMP中隐藏数据的工具,可以快速提取隐藏信息 使用环境:kali kali自带zsteg,可以用这个指令使用 gem install zsteg 下载完之后查看使用方 ...

  7. Java 中怎样将 bytes 转换为 long 类型?

    将bytes 转换为long类型: 第一种方式: String 接收 bytes 的构造器转成 String,再 Long.parseLong: 但此种情况需要注意:字节数组中的每个字节都必须是有效的 ...

  8. quarkus实战之四:远程热部署

    将本地的改动极速同步到远程服务端,并自动生效,掌握此技能,开发调试会更高效 欢迎访问我的GitHub 这里分类和汇总了欣宸的全部原创(含配套源码):https://github.com/zq2599/ ...

  9. 超越.NET极限:我打造的高精度数值计算库

    超越.NET极限:我打造的高精度数值计算库 还记得那一天,我大学刚毕业,紧张又兴奋地走进人生第一场.NET工作面试.我还清楚地记得那个房间的气氛,空调呼呼地吹着,面试官的表情严肃而深沉.我们进行了一番 ...

  10. 如何编写难以维护的React代码?耦合组件

    如何编写难以维护的React代码?耦合组件 在许多项目中,我们经常会遇到一些难以维护的React代码.其中一种常见的情况是:子组件直接操作父组件方法,从而导致父子组件深度耦合.这样的实现让子组件过于依 ...