前端技术（JavaScript）学习笔记（四）HTML事件、DOM对象、BOM对象

最新推荐文章于 2024-03-13 11:11:16 发布

dl0246

最新推荐文章于 2024-03-13 11:11:16 发布

阅读量949

点赞数 2

分类专栏： Web前端技术文章标签： DOM JSON HTML事件 JSON数组遍历通过DOM对象对HTML元素的操作

本文链接：https://blog.csdn.net/dl0246/article/details/80106232

版权

本文详细介绍了HTML事件，包括onload、onunload等常用事件，并探讨了DOM对象的概念和用途，如动态管理HTML元素、操作属性和样式。此外，还讲解了如何通过JavaScript获取DOM对象以及BOM对象的相关知识，如Window、Screen、Location对象，以及JSON对象的使用和类型转化。

摘要由CSDN通过智能技术生成

1、HTML事件
html事件，是html元素提供的响应外部动作的唯一途径，也就是说，html的事件可以响应外部动作。比如你希望当鼠标移动到div元素区域内时弹出一个一个消息框，或者鼠标离开div区域后也弹出一个消息框即需要html事件支持才能完成，若html没有事件支持的话，这个需求是无法完成的。

<div onmouseover="alert('进入');" onmouseout="alert('离开');"></div>

2、常用的HTML事件
常用事件
8、关于html元素的事件
①、onload事件，在浏览器装载页面时触发
②、onunload事件，在浏览器卸载页面时触发
③、onchange事件，在文本域中的内容发生改变时触发
④、onmouseover事件，在鼠标进入到元素区域内时触发
⑤、onmouseout事件，在鼠标离开元素区域时触发
⑥、onclick事件，在鼠标单击时触发
⑦、onmousedown&onmouseup事件，在按下鼠标左键还没送开时触发，在弹起时触发
⑧、onfocus事件，在获取焦点时触发
⑨、onkeydown、onkeyup、onkeypress ，在按下键盘时、在弹开键盘时，按下和弹开时触发
⑩、onblur事件，失去焦点事件

3、添加事件的语法规则
①、在html元素的开始标记内通过事件名称添加事件，同时指定事件处理程序
②、除了以上方法外，还可以通过在JavaScript绑定html元素时间
案例代码：

<div onmouseout="alert('拜走啊，坐会啊');" onclick="run();">我是div元素的值</div>

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
    </head>
    <body>
        <div id="d1">我是div元素的值</div>
        <script type=

最低0.47元/天解锁文章

dl0246

关注

2
点赞
踩
7

收藏

觉得还不错? 一键收藏
0
评论
前端技术（JavaScript）学习笔记（四）HTML事件、DOM对象、BOM对象

1、HTML事件 html事件，是html元素提供的响应外部动作的唯一途径，也就是说，html的事件可以响应外部动作。比如你希望当鼠标移动到div元素区域内时弹出一个一个消息框，或者鼠标离开div区域后也弹出一个消息框即需要html事件支持才能完成，若html没有事件支持的话，这个需求是无法完成的。&lt;div onmouseover="alert('进入');" onmouseout...
复制链接

扫一扫

专栏目录