千家信息网

JavaScript中DOM操作常用事件实例分析

发表于:2025-01-18 作者:千家信息网编辑
千家信息网最后更新 2025年01月18日,这篇文章主要讲解了"JavaScript中DOM操作常用事件实例分析",文中的讲解内容简单清晰,易于学习与理解,下面请大家跟着小编的思路慢慢深入,一起来研究和学习"JavaScript中DOM操作常用
千家信息网最后更新 2025年01月18日JavaScript中DOM操作常用事件实例分析

这篇文章主要讲解了"JavaScript中DOM操作常用事件实例分析",文中的讲解内容简单清晰,易于学习与理解,下面请大家跟着小编的思路慢慢深入,一起来研究和学习"JavaScript中DOM操作常用事件实例分析"吧!

由此可以看出事件分三个部分:

事件源头: 也就是要操作的元素是谁。

事件类型: 也就是事件触发条件,比如鼠标点击以及鼠标滑过等。

事件处理: 如果触发了这个行为,如何操作,以及操作结果。

常用事件

现在说一下常用的事件,这个不是全部的事件,如果需要了解全部的事件可以看官方文档。

常用的事件有:

事件类型描述
onblur对象失去焦点的时候触发
onfous当获得焦点的时候触发
onclick用户鼠标左键点击的时候触发
ondblclick用户双击时候触发
onchange当对象或者选中区内容改变的时候触发
onkeyup当用户释放键盘按键时候触发(还有两个事件onkeydown和onkeypress)
onload浏览器加载完毕后立即触发
onmouseout当用户将鼠标移出对象范围时触发
onmouseover当用户数鼠标在对象上滑动的时候触发
onselect当当前选择区改变时触发
onunload对象卸载前理解触发

下面演示的时候会有些涉及到涉及到一些属性的变化,可以先不关心而是关系这个事件是如何触发发。后面单独为再写一篇关于属性的修改以及赋值。

演示得到焦点和失去焦点

演示:

        测试文档 

演示 鼠标划过和离开

        测试文档   

点击事件

        测试文档   

load加载页面事件

        测试文档    

补充 innerText和innerHTML区别

  • innerText 在页面上输出文本内容,直接将标签删除

  • innerHTML在页面上输出标签效果以及其内容。

onkeyup 键盘弹起事件

        测试文档     

内容变化事件

演示:

        测试文档     

选中时触发

        测试文档    

感谢各位的阅读,以上就是"JavaScript中DOM操作常用事件实例分析"的内容了,经过本文的学习后,相信大家对JavaScript中DOM操作常用事件实例分析这一问题有了更深刻的体会,具体使用情况还需要大家实践验证。这里是,小编将为大家推送更多相关知识点的文章,欢迎关注!

0