JavaScript-事件详解

目录

一、DOM（Document  Object Model:文档模型对象）

二、键盘事件

三、鼠标事件

四、定时事件（Time Events  可以在一定的时间间隔内执行）

---

一、DOM（Document  Object Model:文档模型对象）

1、DOM 当网页被加载时 浏览器会创建爱页面的 文档对象模型；

2、HTML DOM模型被结构化为DOM对象数

3、JavaScript 能改变页面中所有的HTML元素

（1）JavaScript 能改变页面中所有的HTML属性
（2）JavaScript 能改变页面中所有的CSS 样式
（3）JavaScript 能删除页面中所有的HTML元素、属性
（4） JavaScript 能添加页面中所有的HTML元素、属性
（5）avaScript 能对页面中已有的HTML事件做出处理

（6）总结：HTML DOM进行获取 更改 添加 删除

4、DOM节点

（1）节点 Node 是构成我们页面的基本组成,网页中的每一个部分都可以称为一个节点

例如：html标签、属性、文本、注释、整个文档都是一个节点

（2）节点与节点之间类型是不同的，属性和方法也不同。

例如： 标签：元素节点 :HTML文档中的HTML标签

                属性：属性节点  ：元素的属性

                文本 ：文本节点  ：HTML标签中的文本内容

                文档：文档节点 ：整个HTML文档

（3） node 是构成HTML文档最基本的单元

二、键盘事件

释：判断当键盘按下时是不是a 如果是 输出true 否则 输出false

1、onkeydown 当按下键时

键盘上按住某个键时触发该事件。如果按住，会不断触发该事件。

2、 onkeyup 当松开键时

按住，放开键盘某个键时，该事件触发一次。

3、onkeypress 当按下并松开按键时

按下键盘某一个按键，放开时触发该事件。如果按住不放开，会不断触发该事件直至放开。

示例：代码编写

                 document.getElementById("inpt").onkeydown = function (event) {

                        event = event || window.event;
                        console.log(event.keyCode)

                }

三、鼠标事件

1、 onclick 当鼠标单击时；

2、ondblclick 当鼠标双击时

3、onmousedown 当鼠标按钮按下时 左右按键按下都触发

4、onmouseup 当鼠标按钮松开始  左右按键按下都触发

5、 onmousemove 当鼠标指针移动时

6、 onmouseover 鼠标指针移入元素时

7、onmouseout 鼠标指针移出元素时 

8、onmouseenter  当鼠标指针移动到元素上时 可以阻止事件冒泡

9、 onmouseleave 当鼠标指针移出元素上时 可以阻止事件冒泡

10、onmousewheel 当转动鼠标的滚轮时

11、示例：代码编写：

        window.onmousewheel=function () {
                  console.log("触发了鼠标事件1");

        }

12、事件冒泡

示例：

四、定时事件（Time Events  可以在一定的时间间隔内执行）

1、延时器

示例代码编写：

2、定时器

示例代码编写：

3、清除定时器：

示例代码编写：