鼠标,焦点事件

onclick是点击事件,on表示当,click表示点击:


点击事件


运行结果

ondblclick(双击事件),和点击事件差不多

oncontextmenu 鼠标右键点击事件:


鼠标右键事件


运行效果

onmouseenter,onmouseover都是表示鼠标进入事件,onmouseleave,onmouseout都是鼠标离开事件,但是onmouseout 比 onmouseleave 先执行,而且如果元素里面存在子元素,鼠标在元素中移动时会反复触发 onmouseover 和 onmouseout,所以推荐使用onmouseenter,与onmouseleave。

onmousemove, 鼠标移动事件:


鼠标移动事件


运行结果

onmousedown是鼠标按下事件,

onmouseup是 鼠标弹起事件,

这两个事件用法与上面相似,这里不再赘述。

焦点事件:

获得焦点事件:

onfocus

失去焦点事件:

onblur

案例:输入框获取和失去焦点时的变化(动态效果不好截屏)


焦点事件

阻止默认行为:

e.preventDefault(),这里的e是事件函数的形参,表示的是参与动作的事件:


阻止默认事件


运行结果

喜欢就点个赞吧!

©著作权归作者所有,转载或内容合作请联系作者
【社区内容提示】社区部分内容疑似由AI辅助生成,浏览时请结合常识与多方信息审慎甄别。
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

相关阅读更多精彩内容

友情链接更多精彩内容