`
wfsheep
  • 浏览: 17404 次
文章分类
社区版块
存档分类
最新评论

input事件的小研究

 
阅读更多

最近在看avalon教程的时候发现,对input,texteara等输入表单组件中使用了input事件,由于很少使用(可能也是由于我还是菜菜),特地去查了一下相关的资料,并试验了一下这个事件。


首先来看看这个input事件,根据html5草案和msdn上给出的说明,给出如下结果:

input | oninput event

简介:这是一个html5事件

触发时机:当用户通过UI改变元素文本内容时(MSDN)| 当用户改变value时(w3c标准)

语法:

HTML Attribute:<element oninput = "handler(event)">

Event Property:object.oninput = handler;

addEventListener Method: object.addEventListener("input", handler, useCapture)

参数:

event

特性:

同步:no

冒泡:no

取消默认:yes


这样看起来,input事件和change非常像,只是它是在内容改变后立即触发的,而change会等到焦点不在元素上才触发。

另一个不同则是onchange可以作用在<select>和<keygen>标签上,而input不行。


这个事件看起来用处不大,时常被change替换,但是在mv*类框架中做实时变化上还是十分有用,可以随时监控输入元素事件的变化。

同时,赞一下正美的发掘能力啊。




分享到:
评论

相关推荐

    Android 4.2 Input 研究分析

    ### Android 4.2 Input 研究分析 #### 前言 本文将深入剖析 Android 4.2 版本中的输入事件处理机制。在 Android 操作系统中,输入事件处理是用户交互的核心部分之一。自 Android 2.3 版本以来,虽然输入事件处理的...

    input触发弹出层,实现select 效果

    在网页设计中,"input触发弹出层,实现select效果"是一种常见的交互设计技术,它旨在提供一个更友好、更具可...文件名`input-select`可能包含了实现这一功能的相关代码或示例,可以进一步研究以获取更具体的实现细节。

    inputmethod

    1. note.txt - 这可能包含了开发者在研究inputmethod时的笔记,可能包含了关键代码片段、思路解析或是问题解决方案。 2. Untitled.uml - 这可能是用统一建模语言(UML)绘制的inputmethod相关的系统架构或类图,帮助...

    input输入放大镜的js效果

    1. **事件监听**:JS通过addEventListener或attachEvent等方法监听input元素的变化,如`input`或`keyup`事件,当用户输入时触发相应的函数。 2. **实时预览**:每当输入发生变化,JS会获取新的文本值,并将其显示在...

    javascript经典特效---input文字特殊显示.rar

    1. **实时预览**:利用JavaScript事件监听,如`onkeyup`、`onkeydown`或`oninput`,可以实现在用户输入时即时更新显示内容,比如实时显示过滤后的搜索结果,或者在输入时提供自动补全建议。 2. **输入格式限制**:...

    js文本框input验证插件

    其中,jQuery库简化了DOM操作、事件处理以及Ajax交互,而JavaScript则提供了基本的验证功能,确保用户输入的数据符合特定格式或规则。在本主题中,我们将深入探讨"js文本框input验证插件"这一技术,特别是与jQuery...

    bootstrap-file-input

    Bootstrap-File-Input是...通过深入研究这些文件,可以更好地理解和定制这个插件,以满足项目的具体需求。总的来说,Bootstrap-File-Input是一个功能强大、易于使用的文件上传解决方案,能够提升网站或应用的用户体验。

    DirectInput & Xinput - 遊戲手把控制器範例

    在深入研究这个示例之前,开发者需要对C++或C#等编程语言有一定的基础,并熟悉Windows API调用。此外,理解DirectInput和Xinput的文档也是必不可少的,这将帮助开发者更好地理解和利用这两个库。通过学习和实践,...

    基于vue2.0的input输入框文字特效

    jQuery是一个广泛使用的JavaScript库,简化了DOM操作、事件处理和动画效果。尽管Vue.js本身已经足够强大,但在某些场景下,如需要兼容旧浏览器或快速实现某些特定功能时,开发者可能会选择结合jQuery。 【文件名称...

    取得input要素的文件路径

    `nsHTMLInputElement.cpp`可能包含了处理`&lt;input type="file"&gt;`元素事件和属性的部分,比如`files`属性的实现。而`nsDOMFile.cpp`可能涉及到`File`对象的实现,包括`name`属性的设置和获取。这些源码可以帮助开发者...

    input32相关资源

    通过研究input32.dll的源码,他们可以学习到如何高效地处理系统输入事件,而驱动源码则能帮助他们理解如何与硬件进行通信。同时,提供的文档和示例代码可以加速学习过程,使得开发者能够更快地将这些知识应用到实际...

    jQuery input文本框点击下拉选择代码.zip

    在网页开发中,jQuery是一个非常流行的JavaScript库,它极大地简化了DOM操作、事件处理和动画效果。本资源“jQuery input文本框点击下拉选择...通过深入研究并实践这个代码,开发者可以进一步提升自己的前端开发技能。

    js input file多个文件上传功能.zip

    你可以解压并研究这些文件,以深入了解如何在实际项目中应用多文件上传功能。 总的来说,这个功能利用HTML5的新特性,结合JavaScript的File API和Fetch API,实现了用户友好的多文件上传体验。在开发过程中,需要...

    参照Vant-Weapp开发的抖音原生小程序UI组件库.zip

    4. **源码阅读与分析**:通过查看和分析源码,理解组件的生命周期、数据绑定、事件处理等小程序开发的核心概念。 5. **运行与部署**:掌握如何在抖音小程序开发者工具中导入并运行这个组件库,以及如何在实际项目中...

    android 事件的处理(2)

    当事件被获取到后,InputReader会调用`processEventsLocked`方法来进一步处理这些事件。这个方法会根据事件类型进行区分,主要处理两类事件:一是来自驱动设备的事件,二是设备增加、删除和修改事件。 2.1 设备增加...

    C# 基于 directinput 操控手柄

    这个压缩包文件“C# 基于 directinput 操控手柄_1601170233”很可能包含了实现这些功能的完整源码,你可以通过下载并研究代码来更深入地了解DirectInput与C#的结合使用。记住,实际应用中还需要考虑错误处理、设备...

    directInput_joystick-master_direct_joystick_completelyh2s.zip

    深入研究这个源码,开发者可以学习到如何有效地使用DirectInput API来优化游戏输入性能,以及如何处理各种输入设备的差异。同时,这也是一个很好的实践,可以帮助理解多线程编程,因为DirectInput常常在后台线程中...

    基于输入到状态稳定原理的线性系统优化:事件触发策略的Matlab仿真实验研究,基于输入到状态稳定原理的线性系统优化:事件触发策略的Matlab仿真实验研究,151.基于输入到状态稳定原理的线性系统的事

    同时,通过列举的文件名称列表,我们可以看到研究者们对线性系统事件触发策略的研究不仅限于理论分析,还包括了从不同角度对系统稳定性和控制策略的深入探索。 通过对相关文件的深入分析和研究,研究者可以更好地...

    4种时尚精美的input元素滑块UI设计效果

    本篇文章将详细介绍4种时尚且精美的input元素滑块UI设计效果,以及它们的实现原理。 首先,滑块UI的设计注重用户体验,要求简洁易用且视觉吸引人。通过CSS3,我们可以创建各种美观的动画效果,如滑动过渡、渐变背景...

Global site tag (gtag.js) - Google Analytics