事件基础

事件概述

JavaScript 使我们有能力创建动态页面，而事件是可以被JavaScript侦测到的行为。 理解为：触发—响应机制

事件三要素

事件源（谁）：触发事件的元素事件类型（什么事件）：例如click点击事件事件处理程序（做啥）：事件触发后要执行的代码（函数形式），事件处理函数

执行事件的步骤

获取事件源注册事件（绑定事件）添加事件处理程序（采取函数赋值形式）

常见的鼠标事件

鼠标事件触发条件onclick鼠标点击左键触发onmouseover鼠标经过触发onmouseout鼠标离开触发onfocus获得鼠标焦点触发onblur失去鼠标焦点触发onmousemove鼠标移动触发onmouseup鼠标弹起触发onmousedown鼠标按下触发

操作元素

JavaScript的DOM操作可以改变网页内容、结构和样式，我们可以利用DOM操作元素来改变元素里面的内容、属性等。

改变元素内容（获取或者设置）

element.innerText

从起始位置到终止位置的内容，但它去除html标签，同时空格和换行也会去掉

element.innerHTML

起始位置到终止位置的全部内容，包括html标签，同时保留空格和换行

innerText和innerHTML的区别

获取内容时的区别： innerText会去除空格和换行，而innerHTML会保留空格和换行设置内容时的区别： innerText不会识别html，而innerHTML会识别

常用元素的属性操作

innerText、innerHTML 改变元素内容src、hrefid、alt、title 获取属性的值 元素对象.属性名 设置属性 元素对象.属性名 = 值 案例代码

表单元素的属性操作

利用DOM可以操作如下表单元素的属性：

type、value、checked、selected、disable

获取属性的值 元素对象.属性名 设置属性的值 元素对象.属性名 = 值 表单元素中有些属性如：disabled、checked、selected，元素对象的这些属性的值是布尔型。 案例代码

样式属性操作

常用方式

1.element.style 行内样式操作 2.element.className 类名样式操作

方法1：通过操作style属性 元素对象的style属性也是一个对象！ 元素对象.style.样式属性 = 值； 注意 1.JS 里面的样式采取驼峰命名法 比如fontSize、 backgroundColor 2.JS 修改 style 样式操作，产生的是行内样式，css权重比较高 案例代码

方法2：通过操作className属性

元素对象.className = 值； 因为class是关键字，所有使用className。 注意： 1.如果样式修改较多，可以采取操作类名方式更改元素样式。 2.class因为是个保留字，因此使用className来操作元素类名属性 3.className 会直接更改元素的类名，会覆盖原先的类名。 案例代码