- 搜索
日期：2025/04/02 13:00来源：未知 人气：54
一、事件
事件是指可以被JavaScript侦测到的行为，是一种“触发-响应”的机制。这些行为指的就是页面的加载、鼠标单击页面、鼠标指针滑过某个区域等具体的动作，它对实现网页的交互效果起着重要的作用。
事件三要素是指事件源、事件类型和事件处理程序这3部分。名词解释如下：
事件源：触发事件的元素（谁触发了事件）
事件类型：如 click 单击事件（触发了什么事件）
事件处理程序：事件触发后要执行的代码（函数形式），也称事件处理函数（触发事件以后要做什么）
案例演示：为按钮绑定单击事件，触发按钮事件后，会弹出一个信息。
二、操作元素
1、操作元素内容
在前面的内容中已经讲解了获取元素的几种方式，接下来将利用DOM提供的属性实现对元素内容的操作。常用的属性如下表所示：
innerHTML在使用时会保持编写的格式以及标签样式
innerText去掉所有格式以及标签的纯文本内容
textContent属性在去掉标签后会保留文本格式
2、操作元素属性
在DOM中，HTML属性操作是指使用JavaScript来操作一个元素的HTML属性。一个元素包含很多的属性，例如，对于一个img图片元素来说，可以操作它的src、title属性等，或者对于input元素来说，可以操作它的disabled、checked、selected属性等。
案例演示：以单击按钮操作img元素属性为例进行代码演示。
// 2. 注册事件 处理程序
flower.onclick = function () {
img.src = 'images/flower.png';
img.title = '鲜花';
};
grass.onclick = function () {
img.src = 'images/grass.png';
img.title = '四叶草';
};
3、操作元素样式
操作元素样式的两种方式：一种是操作style属性，另一种是操作className属性。
操作style属性
元素对象的样式，可以直接通过“元素对象.style.样式属性名”的方式操作。样式属性名对应CSS样式名，但需要去掉CSS样式名里的半字线“-”，并将半字线后面的英文的首字母大写。
操作classname属性
在开发中，如果样式修改较多，可以采取操作类名的方式更改元素样式，语法为“元素对象.className”。访问className属性的值表示获取元素的类名，为className属性赋值表示更改元素类名。如果元素有多个类名，在className中以空格分隔。
