开发者社区

文档建议反馈控制台

最新优惠活动

文章/答案/技术大牛

发布

onchange和addEventListener有什么不同？

onchange和addEventListener是两种不同的事件监听方式。

onchange是一个HTML属性，用于监听表单元素的值发生改变时触发的事件。它通常用于<input>、<select>和<textarea>等表单元素上。当用户改变表单元素的值并且失去焦点时，onchange事件会被触发。例如，可以使用onchange事件来实现一个实时搜索功能，当用户输入关键字时，触发搜索操作。
addEventListener是JavaScript中的方法，用于向一个元素添加事件监听器。它可以用于监听任何类型的事件，不仅限于表单元素的值改变。通过addEventListener，可以为一个元素添加多个事件监听器，并且可以指定事件的处理函数和事件的捕获或冒泡阶段。例如，可以使用addEventListener来监听鼠标点击、键盘按下等事件。

总结：

onchange是HTML属性，用于监听表单元素的值改变事件。
addEventListener是JavaScript方法，用于向元素添加事件监听器，可以监听任何类型的事件。

腾讯云相关产品和产品介绍链接地址：

腾讯云云服务器（CVM）：https://cloud.tencent.com/product/cvm
腾讯云云原生容器服务（TKE）：https://cloud.tencent.com/product/tke
腾讯云云数据库MySQL版（CDB）：https://cloud.tencent.com/product/cdb_mysql
腾讯云对象存储（COS）：https://cloud.tencent.com/product/cos
腾讯云人工智能（AI）：https://cloud.tencent.com/product/ai

相关搜索:网站和网址有什么不同 JsonObject和JSONObject有什么不同 setupFiles和setupTestFrameworkScriptFile有什么不同 asynctreenode和treenode有什么不同？MockBackend和HttpTestingController有什么不同？IWindsorContainer和IUnityContainer有什么不同？RBuilder和RDomBuilder有什么不同？XPath和JXPath有什么不同？linkWithCredential和linkWithPopup有什么不同 Actionchains和Actionclass有什么不同？CachingConnectionFactory和ConnectionFactory有什么不同？tfrecord和瓶颈有什么不同？StreamSink和Sink有什么不同？Tfidftransformer和Tfidfvectorizer有什么不同？flow和channelFlow有什么不同？LastWriteTime和LastAccessTime有什么不同 asyncio和线程有什么不同？Tk()和Frame()有什么不同 useState和useImmer有什么不同？findContours()和opencv ()：有什么不同？

相关搜索:

页面内容是否对你有帮助？

有帮助

没帮助

相关·内容

从 0 到 1 实现 react - 9.onChange 事件以及受控组件

接上一章 HOC 探索抛出的问题 ———— react 中的 onChange 事件和原生 DOM 事件中的 onchange 表现不一致，举例说明如下：

01

onpropertychange事件「建议收藏」

2.如果得用javascript改变触发对象的属性时，并不能触发onchange事件

03

JavaScript 事件

原文链接：https://note.noxussj.top/?source=cloudtencent 鼠标事件鼠标单击事件 click 在文档中鼠标进行单击，就会触发事件。 var i = 0 d

02

onpropertychange & oninput兼容性

onpropertychange事件:IE专有,disable=true的时候失效,onpropertychange是在触发对象改变任何属性时都会触发。onpropertychange==onchange+onblur。onchange只有在用键盘改变其值，然后在失去焦点(onblur)后才触发。

01

统计字数oninput？keyup？onchange？

当元素的值发生改变时，会触发change事件。该事件仅适用于<input>, <select>和<textarea> 元素。当用于<select>元素时，change 事件会在选择某个选项时发生。当用于<input>或<textarea>时，该事件会在元素失去焦点时发生。

03

Egret之List使用示例

class Main extends egret.DisplayObjectContainer{ public constructor() { super(); this.addEventListener(egret.Event.ADDED_TO_STAGE,this.onAddToStage,this); } private list: eui.List; public onAddToStage(event: egret.Event)

07

那些关于DOM的常见Hook封装（一）

本文是深入浅出 ahooks 源码系列文章的第十四篇，这个系列的目标主要有以下几点：

02

网站那些阻止F12所遗留的彩蛋

看到好看的网页或者样式时候，大家都会利用我们浏览器的F12，也就是开发人员调试利器这一功能，那么各位老表为了防止自己心爱的代码被偷，也是煞费苦心，给网站设置各种键码限制，网站上也就遗留了很多彩蛋，这也也是一个独特的风景，下面一同欣赏几款我见到过有趣的彩蛋吧。

02

React 进阶 - 事件系统

React 有一种事件插件机制，如 onClick 和 onChange ，会有不同的事件插件 SimpleEventPlugin ，ChangeEventPlugin 处理

01

禁止F12调试chrome

function endebug(off, code) { if (!off) { !function (e) { function n(e) { function n() { return u } funct

02

发布一个轻量级的滑块控件

比系统自带的组件体积要小很多，而且支持进度条显示(在做播放器时，显示缓冲进度很有用哦），另外也支持三角形的音量调整显示使用示例： package { import flash.display.SimpleButton; import flash.display.Sprite; import flash.events.Event; import flash.text.TextField; [SWF(width=150, height=130)] public class SliderTest

08

【基础】input标签输入框内的输入事件详细分析

当用户改变input输入框内容时执行，也可用于单选框与复选框改变后触发的事件，所有主要浏览器都支持。

input元素的oninput事件和onchange事件

第二种：获取input元素，然后在元素对象上添加oninput属性，属性值为函数，函数内部为处理事件函数的调用

01

input标签内发生变化进行监听

onchange事件在内容改变（两次内容有可能相等）且失去焦点时触发；onpropertychange事件是实时触发，每增加或删除一个字符就会触发，通过js改变也会触发该事件，但是该事件是IE专有。

02

React Hook案例集锦

React Hook本质就是一个函数，其名称以 “use” 开头，函数内部可以调用其他的 hook，结果一般会有返回值，使用hook的目的一般是抽离多个组件的公共逻辑，本文以6个案例来带大家熟悉React Hook的使用。

00

【React Conf 2018 回顾】React 的今天和明天 II —— React Hooks 提案

【2.5 万字长文预警】，如果没耐心看 Demo 代码，请一定要看最后一段 Dan 关于 React Hooks 的哲学思考。Dan 最后从 React 的 Logo 说起，将 React Hooks 的出现与电子的发现做了类比，升华到了一定高度：“我感觉 Hook 一直在我们的视线里面隐藏了四年。事实上，如果看看 React 的 Logo，可以看到电子的轨道，而 Hook 好像一直就在那里”。

03

手机端收入实时监听oninput & onpropertychang

使用 onkeydown、onkeypress、onkeyup 这个几个键盘事件来监测的话，监听不了右键的复制、剪贴和粘贴这些操作，处理组合快捷键也很麻烦。因此这篇文章向大家介绍一种完美的解决方案：结合 HTML5 标准事件 oninput 和 IE 专属事件 onpropertychange 事件来监听输入框值变化。

01

Flash/Flex学习笔记(46)：正向运动学

所谓"正向运动学"通俗点讲就是把几个连接部件的一端固定起来，另一个端可以自由(向前/向外)运动。比如人的行走，单个下肢可以理解为脚连接小腿，小腿连接大腿，大腿连接腰。行走的过程，相当于二条腿相对固定于腰部，大腿运动驱动小腿，小腿又驱动脚，从而带动整个连接系统的一系列运动。先来一个基本的关节类Segment:（就是一个圆角矩形+二个小圆圈） package { import flash.display.Sprite; import flash.geom.Point; public class Seg

06

从零开始学 Web 之 HTML5（三）网络监听，全屏，文件读取，地理定位接口，应用程序缓存

于是就变成了 webkitRequestFullScreen()， mozRequestFullScreen()， msRequestFullScreen()。由于使用的方法不同，所以要做兼容性处理。

03

web worker的介绍和使用

什么是web worker呢？从名字上就可以看出，web worker就是在web应用程序中使用的worker。这个worker是独立于web主线程的，在后台运行的线程。

04

Google Chrome CVE-2022-3656 漏洞

Imperva Red Team 最近披露了一个名为 CVE-2022-3656 的漏洞，该漏洞影响超过 25 亿 Google Chrome 和基于 Chromium 的浏览器的用户。

04

【js】Input事件

（兼容性：分号在Firefox，Opera上返回的是ASCII码，在IE，Safari上返回键码）

03

HTML5表单及其验证

将原本type为text的input控件声明为以上特殊类型，是为了给用户呈现不同的输入界面（移动平台上支持这些不同的输入界面，这里就不细说），而且表单提交时会对其值做进一步的验证。下面展示这些新表单元素，请用支持这些表单元素的浏览器查看，IE对其支持最差。

04

分享5个关于 Vue 的小知识，希望对你有所帮助

有时候，我们希望在Vue.js中在选项改变时获取所选的选项。在这篇文章中，我们将学习如何在Vue.js中获取选择的选项。

03

学用Hooks写React组件——基础版Select组件

通过一个父组件包裹显示框组件和下拉框组件，这样的实现方式简单粗暴，而且能解决大部分场景，但是存在几个问题：

02

AngularDart Material Design 单选按钮顶

具有材料风格的单选按钮。通常与material-radio-group一起使用。选中后，无法通过用户操作取消选中相同的单选按钮。

02

oninput onpropertychange「建议收藏」

oninput 是 HTML5的标准事件，对于检测 textarea, input:text, input:password 和 input:search oninput 事件在 IE9 以下版本不支持,是onpropertychange的非IE浏览器版本，支持firefox和opera等浏览器，但有一点不同，它绑定于对象时，并非该对象所有属性改变都能触发事件，它只在对象value值发生改变时奏效。

04

React 实现一个markdown[2]

theme: channing-cyan highlight: a11y-light

03

orimuse作品上传_线框图

<script> window.onload=function(){ var cloth_name={ //衣服的款式图片 man:{ white_f:"img/shadow/m_white1.png", white_b:"img/shadow/m_white2.png", black_f:"img/shadow/m_black1.png", black_b:"img/shadow/m_black2.png" }, woman:{ white_f:"img/sh

05

js web上传文件夹,访问文件夹的多有文件 input type=file

运行input上传文件夹需要设置两个重要属性 webkitdirectory multiple

02

codereview-s8

之后再efficiencyView方法中调用stopPropagation方法阻止事件冒泡

03

HTML5 File API 使用技巧

在 HTML5 的 input 标签中，新增了一个 type=file 属性的表单控件。这个控件可以让我们能调出文件选择窗口然后读取这些文件的内容成为可能。

02

10行JavaScript代码完成图片的上传预览

冬至，希望大家都可以有饺子和汤圆吃，主要是能和自己家人爱人一起吃个饭。下面进入主题，用原生JS给撸个图片上传，预览的小示例，希望对大家有所帮助。

02

HTML5 File API

在 HTML5 的 input 标签中，新增了一个 type=file 属性的表单控件。这个控件可以让我们能调出文件选择窗口然后读取这些文件的内容成为可能。

01

HTML5简明教程（四）Web存储

HTML5的Web存储涉及两部分内容，一是数据存储，支持更多本地存储方案；二是文件读取，支持了File API。

03

[译] 优化 React APP 的 10 种方法

在开发任何软件（尤其是Web应用程序）时，优化是每个开发人员考虑的第一件事。像Angular，React等其他JS框架都包含了一些很棒的配置和功能。在这里，我将回顾有助于您优化应用性能的功能和技巧。

02

使用react-hooks在事件监听中state不更新问题

在使用react开发网站时，使用事件监听是常有的事情，但是有时候你会发现一个问题，就是这个state有时候不更新，始终是一个值，让人很是费解。下面我们来看一下下面这个案例

03

5、React组件事件详解

2.在React中，每个事件处理回调函数都会自动绑定到组件实例（使用ES6语法创建的例外）；

01

springmvc + h5(进度条)文件上传

版权声明：本文为博主原创文章，未经博主允许不得转载。 1.先上效果图 1.1弹出附件框 1.2选择文件，点击上传(这里做了一个简单的校验) 1.3点击上传 1.4上传成功刷新列表 2

01

精读《怎么用 React Hooks 造轮子》

上周的精读《React Hooks》已经实现了对 React Hooks 的基本认知，也许你也看了 React Hooks 基本实现剖析（就是数组），但理解实现原理就可以用好了吗？学的是知识，而用的是技能，看别人的用法就像刷抖音一样（哇，饭还可以这样吃？），你总会有新的收获。

04

太冤了！群友因为这个功能的实现没回答好，到手的 offer 飞了。来看看 React19 如何解决

之前一个群友「三年经验」找我诉苦。说遇到一个奇葩的面试，千辛万苦过了三面，等对方团队着发 offer 的时候，结果对方 hr 说有另外一个人也过了面试，各方面都跟他差不多。所以对方团队不知道如何抉择，想要加面一个面试题，聊十分钟来最终决定选谁。

01

体验concent依赖收集，赋予react更多想象空间

concent v2版本的发布了，在保留了和v1一模一样的api使用方式上，内置了依赖收集系统，支持同时从状态、计算结果和副作用3个维度收集依赖，建立其精确更新路径，当然也保留了v1的依赖标记特性，支持用户按需选择是让系统自动收集依赖还是人工管理依赖，大多数场景，推荐使用自动收集依赖，除非非常在意渲染期间自动收集和更新依赖的那一点微弱的额外计算以及非常清楚自己组件对状态的依赖关系，那么可以降级为人工标记依赖，当然了，如果是v1版本，那就没得选了，只能是人工标记了。

04

HMTL5新增Api

拖动源对象相关事件 ondragstart:源对象开始被拖动 ondrag:源对象在拖动过程中 ondragend:源对象被拖动结束

01

C# 结合JavaScript实现手写板签名并上传到服务器

我们最近开发了一款笔迹测试功能的程序（测试版），用户在手写板上手写签名，提交后即可测试出被测试者的心理素质评价分析。类似功能的场景还比如，在银行柜台办理业务，期间可能需要您使用手写设备进行签名并确认；保险续期小程序，到期后需要你在确认续期条款后，在手机上提供的签名区域进行签名并提交确认。

01

JavaScript小技能：事件

JavaScript 在不同环境下使用不同的事件模型：不同的编程环境下的事件机制是不同的，比如JavaScript 网页上的事件机制不同于在其他环境中的事件机制。（Node.js 的事件模型、浏览器插件WebExtensions技术的事件模型）

01

C# 使用IAsyncEnumerable实现流式分段传输

在使用SSE的时候，前端可以实现流式传输，但是有个问题就是这是一个独占的连接，相当于如果你不手动关闭连接，就会一直请求，一直连接调用接口，而且发送的数据格式也是按照定义好的协议来

02

【分段传输】c#使用IAsyncEnumerable实现流式分段传输

在使用SSE的时候，前端可以实现流式传输，但是有个问题就是这是一个独占的连接，相当于如果你不手动关闭连接，就会一直请求，一直连接调用接口，而且发送的数据格式也是按照定义好的协议来，而使用c#自带的IAsyncEnumerable也可以实现流式传输，不过返回的数据是在之前返回的基础上进行累加，需要自己做处理，我的例子是使用的是ajax来实现，群友有提供了fetch的实现代码，接下来我们看看c#IAsyncEnumerable实现传输的ajax方案和fetch的代码吧。

05

20171020

1.运动函数封装 1.一级备注：接受两个参数，一个是被操作对象，另一个是目标位置，缺陷：只能实现单一方向的运动 var one = document.getElementById("one"); 调用：animate(one,500); eg： function animate(obj,target){ clearInterval(timer); timer = setInterval(function(){ var

02

掌握这个技术, 给轮播图和文本插上自由之翼

今年第一篇文章, 不会写的太干, 主要以开拓思维和送粉丝福利为主. 大致包含如下两部分:

01

【React深入】React事件机制

下面是我阅读过源码后，将所有的执行流程总结出来的流程图，不会贴代码，如果你想阅读代码看看具体是如何实现的，可以根据流程图去源码里寻找。

04

扫码

添加站长进交流群

领取专属 10元无门槛券

手把手带您无忧上云

扫码加入开发者社群

相关资讯

热门标签

活动推荐

运营活动

活动名称

广告关闭