常见的触发函数的事件(实现不同的用户体验)

简介: 常见的触发函数的事件(实现不同的用户体验)

写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会不会触发呢?不会,因为没有改变内容。

相关文章
MonacoEditor 主动触发代码提示功能
MonacoEditor是微软提供的代码编辑器 vscode即是使用它作为编辑器。 它的开发语言是ts,可以嵌入到浏览器中。   代码提示或者说代码补全功能是我们经常需要定制的部分。 目前它提供的快捷键是ctrl+space,和win10以下的操作系统的默认中英文切换是冲突的。
6431 0
|
2月前
|
JavaScript 前端开发
|
5月前
|
JavaScript
vue 数据变化触发页面响应的三种方式(解决:数据变化页面无响应/不刷新的问题)【含原理】
vue 数据变化触发页面响应的三种方式(解决:数据变化页面无响应/不刷新的问题)【含原理】
356 0
如何让touchmove之后不触发touchend的事件
如何让touchmove之后不触发touchend的事件
65 0
uiu
|
JavaScript 调度
【Svelte】-(5)DOM事件 / 事件修饰符 / 组件事件 / 事件转发 (组件之间的事件沟通)
【Svelte】-(5)DOM事件 / 事件修饰符 / 组件事件 / 事件转发 (组件之间的事件沟通)
uiu
216 0
【Svelte】-(5)DOM事件 / 事件修饰符 / 组件事件 / 事件转发 (组件之间的事件沟通)
|
JavaScript API
StencilJs 学习之事件
其实并没有所谓的 stencil Event,相反 stencil 鼓励使用 DOM event。然而,Stencil 提供了一个 API 来指定组件可以触发的事件,以及组件监听的事件。 这是通过 Event()和 Listen()装饰器实现的。
82 0
|
JavaScript 前端开发
【高频触发事件优化】封装节流和防抖
【高频触发事件优化】封装节流和防抖
175 0
|
Web App开发 JavaScript 前端开发
页面运行中事件频繁触发会阻塞页面吗?
之前看`防抖`和`节流`的时候,看到短时间内大量的事件触发会引起浏览器卡死,浪费浏览器性能,那么为什么事件触发会引起阻塞页面的情况呢?引起页面阻塞的原因真的是因为事件触发太多了吗?
|
图形学
Unity碰撞事件和触发事件
大家在刚开始接触Unity的时候,一定要理解碰撞与触发
528 0
Unity碰撞事件和触发事件