常见的触发函数的事件(实现不同的用户体验)
写js的时候都知道,函数是我们基本上面每天都在写的一个东西,因为很多的功能是需要函数来实现的,没有函数很多的效果是没办法实现的,那么今天简单的总结一下可以触发函数的一些事件。
onclick //鼠标点击触发
应用场景:一般是button的时候,可以点击的地方会用到的一个事件。
效果实现:鼠标点击完成一次的时候触发。
例如:
<input type="text" id="testid" value="123"/>
<button οnclick="test()">点击测试</button>
function test(){layer.msg("您输入的数据是:"+$("#testid").val())}
onmousedown //鼠标按下去触发
应用场景:一般是可以输入的地方,例如type=text的input。
效果实现:当鼠标点击在输入框按下去瞬间的时候会触发这个函数。
onmouseup //鼠标放开触发
应用场景:一般是可以输入的地方,例如type=text的input。
效果实现:当鼠标松开的时候会触发,和down是相对的。
onmousemove //鼠标在元素上移动操作
应用场景:一般是需要随时获取某一个元素信息的时候,一些图片的介绍或者别的。
效果实现:鼠标移动到该元素上,在元素上只要鼠标发生移动就会触发这个函数。
onmouseenter //鼠标进入元素操作
应用场景:一般是需要介绍一个元素信息,但是不需要实时获取的时候。
效果实现:鼠标从非元素的区域进入到该元素区域的时候,但是离开的时候是不会触发的,而且在元素里面移动也是不触发的,只有进入的一瞬间会触发。
onmouseleave //鼠标离开元素范围操作
应用场景:一般是用到给用户提示。
效果实现:鼠标从元素的区域离开的时候。
onmouseout //鼠标离开元素操作
应用场景:也是给用户提示的时候用到的。
效果实现:这里可能很多的人没有具体的追究过和leave的区别,这里需要说明的一点是leave是离开范围的时候,但是out是离开元素的时候,怎么看出来呢?举个例子:
<div title="onmouseleave与onmuseout的区别,leave是离开范围,out是离开元素" style="border:0px;height:100px;margin-top:10px;" οnmοuseleave="this.style.display='none'" >
<div title="1" style="border:0px;height:33px;background-color:blue;"></div>
</div>
说明一下,这里是两个元素,也就是说,里面的div是外面div的子元素,这个时候如果是leave也就是离开元素范围的操作,那么也就是说,我们从外面进入到里面div的时候是不会触发函数的,但是离开这个父元素范围最大的范围的时候会触发,如果是out的时候,那么我们从父元素就如到子元素的时候,out会认为你离开了元素本身,那么就会触发,尽管你还在最大的div里面,但是你进入到了别的元素(子元素)。
onmouseover //鼠标移动进入该区域
应用场景:提示。
效果实现:当您的鼠标进入到了该元素的区域,那一刻会触发,但是在元素里面移动是不会触发的。
onmousewheel //滚轮滚动的时候触发
应用场景:需要滚轮操作的时候
效果实现:将鼠标移动到该元素的区域,这个时候滚动您的鼠标的滚轮,就会触发函数。
onkeydown //键盘按下去触发
应用场景:实时获取键盘输入数据的时候。
效果实现:将鼠标移动到该元素的区域,这个时候按压键盘上的任意键位,均可以触发,那么numlock如果关闭的时候,数字键是不是可以呢?答案是可以的,这个函数监听的是键盘的是操作,不管是不是被锁定,也就是说这个监听的是包含系统按键的。
onkeypress //键盘完成一次按压抬起触发
应用场景:实时获取键盘输入数据
效果实现:将鼠标移动到该元素上面,这个时候按压任意字母或者数字键均可以触发,那么numlock关闭的时候呢?这个是不可以的,系统按键也是不可以的,例如方向键。这里需要说明一下,如果您调的输入法是中文的,那么您输入中文的时候是不会触发的,即使完成了一次按压,还有就是回车键和空格键是属于系统按键,但是是可以触发这个函数的。
onkeyup //键盘松开的时候触发
应用场景:实时获取键盘输入的数据。
效果实现:将鼠标移动到该元素上面,这个时候按压任意键位并放开就会触发,这个时候如果您的输入法是中文的,那么放开会不会触发呢?会的,只要您的键位放开了,不管是不是系统按键,都是可以触发的。
onseeking //用户开始重新定位视频或者音频的时候触发
应用场景:播放视频或者音频的时候更改播放进度。
效果实现:鼠标点击或者滑动播放时间条的时候。
onseeked //用户重新定位视频或者音频的时候触发
应用场景:播放视频或者音频的时候更改播放进度。
效果实现:鼠标重新定位播放时间的时候,这里滑动是不是可以触发呢?是可以的,但是滑动的过程总是要停止的,也就是说如果一直滑动没有停止的话,这个函数是不触发的,但是onseeking是知道滑动就会触发,不管是不是停止。
onchange //当内容改变的时候触发
应用场景:提示用户信息的更改
效果实现:这里是里面内容改变的时候,例如123是内容,那么您删除3,然后又输入3会不会触发呢?不会,因为没有改变内容。
常见的触发函数的事件(实现不同的用户体验)相关推荐
- Node.js: 如何继承 events 自定义事件及触发函数
events 是node.js的核心api ,几乎大部分node.js 的api都继承 events 类(javascript中没有类,也不存在继承,确切说是模拟类和继承,点击查看) 比如我们常见的 ...
- 【前端06_JS_ECMA 语法标准】声明变量、数据类型*、tupeof返回值、输入输出、运算、循环、条件、函数*、事件*
JavaScript_ECMA 概述 ECMA 语法标准 声明变量 全局变量 注释方法 数据类型 * typeOf 能返回的值 * 输入与输出 运算 算数运算 赋值运算 关系运算 关系运算中的特殊题目 ...
- JavaScript常见变量和函数命名示例
JavaScript作为前端开发从业人员必须掌握的3大基础知识中最重要的一环,也是平是接触时间最长.写得最多的.在开发过程中必然会遇到命名的问题,你会词穷.纠结.惆怅吗?本文的出现相信能够解决大部分烦 ...
- js中函数,方法,事件对比区分,什么是方法,什么是函数
微信小程序开发交流qq群 581478349 承接微信小程序开发.扫码加微信. 正文: 简单的理解:函数是运行在本地的,方法是公用的. 事件是开关,通过某某事件触发某个函数 通常命名规范 ...
- Javascript函数和事件
一.默认函数 JavaScript提供了一些默认的函数 编码函数escape():将非字母.数字字符转换成ASCII码 译码函数unescape():将ASCII码转换成字母.数字字符 求值函数eva ...
- python 常见内置函数setattr、getattr、delattr、setitem、getitem、delitem
常见内置函数 内置函数:在类的内部,特定时机自动触发的函数 示例1:setattr.getattr.delattr class Person: # def __init__(self, name): ...
- 如何把创建ECS(CreateInstance)作为触发器来触发函数计算
问题描述 函数计算虽然不支持直接集成到ECS的管控事件上,但是函数计算本身是支持日志服务作为触发器的.即可以配置日志服务中logstore里的增强日志作为触发器来触发函数计算服务中的函数,同时可以传递 ...
- select下拉框如何触发函数并传递参数
select下拉框和函数触发怎么写 首先需要写select下拉框的HTML代码,标准格式如下 <form><select id="para_region" nam ...
- 虚幻4蓝图脚本中,函数,事件,宏的区别
函数,事件,宏的区别 语法上的区别 执行引脚: 返回值 延迟节点 允许访问范围 逻辑区别 总结 语法上的区别 执行引脚: 调用函数和发射事件只能有一个执行引脚,而宏在调用的时候可以有很多执行引脚进入或 ...
最新文章
- wireshark的使用教程--用实践的方式帮助我们理解TCP/IP中的各个协议是如何工作的
- 清华大学软件学院院长王建民:以数字基建为契机,加强工业互联网大数据软件建设...
- Exchange服务器系列课程之四--管理Exchange收件人
- 杀掉某个进程的 Shell
- 在Python中用turtle函数画同心圆
- Linux的Page Cache
- opencv4 图像特征匹配_概述 | 全景图像拼接技术全解析
- Ubuntu 系统进不去 左上角减号
- 机器学习之深入理解K-means、与KNN算法区别及其代码实现
- 《MySQL从入门到精通》读书笔记
- 复化科特斯公式matlab_牛顿
- 创建批处理文件.bat文件(删除指定文件夹下的文件及文件夹并循环)
- Guass列主元、平方根法、追赶法求解方程组的C++实现
- linux 限制进程网速,Linux限制网速
- (瑞萨,norti系统,partner-jet2) 实时系统下DMAC使用的注意事项
- C语言——兔子繁殖问题多解
- Kaldi简介【开源语音识别工具】
- android实现3D地球转动组件,Rajawali3D基础教程-一个地球旋转的例子
- 初识搜索引擎 —— ElasticSearch
- 查询数据库表字段属性