事件基础和操作元素学习

一.事件三要素

事件概述

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

网页中的每个元素都可以产生某些可以触发JavaScript的事件，例如，我们可以在用户点击某按钮时产生一个事件，然后去执行某些操作。

1．事件是有三部分组成 事件源 事件类型 事件处理程序 我们也称为事件三要素

(1)事件源 事件被触发的对象 谁 按钮

(2)事件类型 如何触发 什么事件 比如鼠标点击(onclick) 还是鼠标经过 还是键盘按下

(3)事件处理程序 通过一个函数赋值的方式 完成

2.常见的鼠标事件

二.操作元素

1.改变元素内容

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

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

例子：

2.innerText和innerHTML的区别

innerText 不识别HTML标签  非标准  去除空格和换行

innerHTML 识别HTML标签 W3C标准 保留空格和换行的

 3.修改元素属性

常用元素的属性操作

 

（1）.获取元素

（2）. 注册时间 处理程序 

4. 分时问候案例

根据系统不同时间来判断，所以需要用到日期内置对象

利用多分支语句来设置不同的图片

需要一个图片，并且根据时间修改图片，就需要用到操作元素src属性

需要一个div元素，显示不同问候语，修改元素内容即可

 5.修改表单属性

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

 注意： input.innerHTML = '点击了'；这个是  普通盒子 比如 div标签里面的内容

            表单里面的值文字内容是通过 value 来修改的

            this 指向的是事件函数的调用者

6.仿京东显示隐藏密码明文案例

核心思路：核心思路︰点击眼睛按钮，把密码框类型改为文本框就可以看见里面的密码

一个按钮两个状态，点击一次，切换为文本框，继续点击一次切换为密码框

算法∶利用一个flag变量，来判断flag的值，如果是1就切换为文本框，flag设置为0，如果是0就切换为密码框，flag设置为1

7.修改样式属性

我们可以通过style修改元素的大小、颜色、位置等样式。

 注意:

1.Js 里面的样式采取驼峰命名法

2.Js 修改style样式操作，产生的是行内样式，

css权重比较高命名法比如fontSize、backgroundColor

8.仿淘宝关闭二维码案例 

9.显示隐藏文本框内容

案例分析：

首先表单需要2个新事件，获得焦点onfocus失去焦点onblur

如果获得焦点，判断表单里面内容是否为默认文字，如果是默认文字，就清空表单内容

如果失去焦点，判断表单内容是否为空，如果为空，则表单内容改为默认文字

 10.使用className修改属性样式

 注意:

1．如果样式修改较多，可以采取操作类名方式更改元素样式。

2. class因为是个保留字，因此使用className来操作元素类名属性

3. className会直接更改元素的类名，会覆盖原先的类名。

11.密码框验证信息

案例分析：

首先判断的事件是表单失去焦点onblur

如果输入正确则提示正确的信息颜色为绿色小图标变化

如果输入不是6到16位，则提示错误信息颜色为红色小图标变化

因为里面变化样式较多，我们采取className修改样式

 三.操作元素总结