js事件，元素
【摘要】 事件概述在开发中，JavaScript 帮助开发者创建带有交互效果的页面，是依靠事件来实观的。事件是指可以被 JavaScript 侦测到的行为，是一种 " 触发-响应 " 的机制。这些行为指的就是页面的加载、鼠标单击页面、鼠标指针滑过某个区域等具体的动作，它对实现网页的交互效果起着重要的作用。事件三要素事件由事件源、事件类型和事件处理程序这 3 部分组成，又称为事件三要素，具体解释如下。(...
事件概述
在开发中，JavaScript 帮助开发者创建带有交互效果的页面，是依靠事件来实观的。
事件是指可以被 JavaScript 侦测到的行为，是一种 " 触发-响应 " 的机制。
这些行为指的就是页面的加载、鼠标单击页面、鼠标指针滑过某个区域等具体的动作，它对实现网页的交互效果起着重要的作用。
事件三要素
事件由事件源、事件类型和事件处理程序这 3 部分组成，又称为事件三要素，具体解释如下。
(1) 事件源: 触发事件的元素。
(2) 事件类型: 如 click 单击事件。
(3) 事件处理程序: 事件触发后要执行的代码 ( 函数形式 )，也称事件处理函数。
以上三要素可以简单理解为 " 谁触发了事件 " " 触发了什么事件 " " 触发事件以后要做什么 " 。
在开发中，为了让元素在触发事件时执行特定的代码，需要为元素注册事件，绑定事件处理函数。具体步骤是，首先获取元素，其次注册事件，最后编写事件处理代码。
操作元素样式
操作元素样式有两种方式，一种是操作 style 属性，另一种是操作 className 属性。下面我们分别进行讲解。
1. 操作style属性
除了前面讲解的元素内容和属性外，对于元素对象的样式，可以直接通过 " 元素对象style. 样式属性名 " 的方式操作。样式属性名对应 CSS 样式名，但需要去掉 CSS 样式名里的半字线 " - " ，并将半字线后面的英文的首字母大写。
例如，设置字体大小的样式名 font-size，对应的样式属性名为 fontSize。
常用 style 属性中 CSS 样式名称：
| 名称 | 说明 |
|---|---|
| background | 设置或返同元素的背景属性 |
| backgroundColor | 设置或返回元素的背景色 |
| display | 设置或返同元素的显示类型 |
| fontSize | 设置或返回元素的字体大小 |
| height | 设置或返回元素的高度 |
| left | 设置或返回定位元素的左部位置 |
| listStyleType | 设置或返回列表项标记的类型 |
| overflow | 设置或返回如何处理呈现在元素框外面的内容 |
| textAlign | 设置或返回文本的水平对齐方式. |
| textDecoration | 设置或返回文本的修饰 |
| textIndent | 设置成返回文本第一行的缩进 |
| transform | 向元素应用2D或3D转换 |
2. 操作 className 属性
在开发中，如果样式修改较多，可以采取操作类名的方式更改元素样式，语法为 " 元素对象.className " 访问 className 属性的值表示获取元素的类名，为 className 属性赋值表示更改元素类名。如果元素有多个类名，在 className 中以空格分隔。
【声明】本内容来自华为云开发者社区博主，不代表华为云及华为云开发者社区的观点和立场。转载时必须标注文章的来源（华为云社区）、文章链接、文章作者等基本信息，否则作者和本社区有权追究责任。如果您发现本社区中有涉嫌抄袭的内容，欢迎发送邮件进行举报，并提供相关证据，一经查实，本社区将立刻删除涉嫌侵权内容，举报邮箱：
cloudbbs@huaweicloud.com
- 点赞
- 收藏
- 关注作者
评论（0）