本文介绍了JavaScript中的事件基础，包括事件概述、事件三要素、案例分析和执行事件的步骤。讲解了如何在用户点击按钮时弹出警示框。此外，还详细阐述了DOM操作元素的方法，如改变元素内容、属性操作、表单元素属性和样式属性操作，这些都是DOM操作的核心内容。
目录
一、事件基础
1、事件概述
JavaScript 使我们有能力创建动态页面，而事件是可以被 JavaScript 侦测到的行为。
简单理解： 触发--- 响应机制。
网页中的每个元素都可以产生某些可以触发 JavaScript 的事件，例如，我们可以在用户点击某按
钮时产生一个 事件，然后去执行某些操作。
2、事件三要素
1. 事件源 （谁）
2. 事件类型 （什么事件）
3. 事件处理程序 （做啥）
3、案例：点击按钮弹出警示框
页面中有一个按钮，当鼠标点击按钮的时候，弹出“你好”警示框。
案例分析：
① 获取事件源（按钮）
② 注册事件（绑定事件），使用 onclick
③ 编写事件处理程序，写一个函数弹出 alert 警示框
4、执行事件的步骤
1. 获取事件源
2. 注册事件（绑定事件）
3. 添加事件处理程序（采取函数赋值形式）
5、事件基础
5.1 常见的鼠标事件
二、操作元素
JavaScript 的 DOM 操作可以改变网页内容、结构和样式，我们可以利用 DOM 操作元素来改变元
素里面的内容 、属性等。注意以下都是属性
1、改变元素内容
2、常用元素的属性操作
1. innerText、innerHTML 改变元素内容
2. src
、
href
3. id、
alt
、
title
3、表单元素的属性操作
利用 DOM 可以操作如下表单元素的属性：
type、
value
、
checked
、
selected
、
disabled
4、样式属性操作
我们可以通过 JS 修改元素的大小、颜色、位置等样式。
1. element.style
行内样式操作
2. element.className
类名样式操作
注意：
1. JS 里面的样式采取驼峰命名法 比如 fontSize、 backgroundColor
2. JS 修改 style 样式操作，产生的是行内样式，CSS 权重比较高
3. 如果样式修改较多，可以采取操作类名方式更改元素样式。
4. class因为是个保留字，因此使用className来操作元素类名属性
5. className 会直接更改元素的类名，会覆盖原先的类名。
三、操作元素是DOM 核心内容
扫一扫
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
