标签：DOM web 元素 鼠标 触发 JavaScript API 事件 节点

API

官方：API（Application Programming Interface，应用程序接口）是一些预先定义的函数，或指软件系统不同组成部分衔接的约定。目的是提供应用程序与开发人员基于某软件或硬件得以访问一组例程的能力，而又无需访问原码，或理解内部工作机制的细节。简单地说API就是一个可以提供很多功能的工具。

web API

js提供的两个API，一个用于操作页面的DOM，一个是用于操作浏览器的BOM，通过这两个API就可以轻松对页面惊醒操作。如图：

前面已经学习完了基础缘分的部分，现在则开始进入下一阶段的学习，即DOM和BOM。

DOM简介

DOM（document object model）中文简称文档对象模型。该接口的定义能让我们操作页面上的任任何一个元素。浏览器在解析HTML文件时会首先生成一颗DOM树，这颗DOM树的结构如下：

文档：一个页面就是一个文档，在DOM中使用document表示。

元素：页面上的所有标签都是元素，在DOM中使用element表示。

节点：网页中的所有内容（标签、属性、文本、注释），DOM中用node表示节点DOM把以上内容看做对象。

节点

节点就是一个数据结构类型。在dom的范畴当中就会涉及节点这个概念。它根据概念主要分为：

根节点：即文档最基本的节点，处于dom树的最顶层。在上图中，HTML文档的根节点为。

父节点：节点可以相互嵌套，即存在包含关系 。当前节点包含了另一个节点，就称该节点为被包含节点的父节点。如上图，head节点就是title节点的父节点。

子节点：当前节点被包含在另一个节点中，就称该节点为另一节点的子节点。titlt节点但是head节点的子点。

兄弟节点：处于同一层次并且拥有相同父节点的节点称为兄弟节点。例如上图中的head和body就是兄弟点。

后代节点：一个节点的子节点的集合可以称为该节点的后代节点，与子节点不同的是，后代节点表示的范广。

叶子节点：表示dom树中最底层的节点。如上图中的文本。

根据内容它又分为：元素节点、文本节点、属性节点。

元素节点：一个HTML标签就是一个元素节点，根节点就是一个元素节点

文本节点：包含在元素节点中的文本

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

事件

1、什么是事件？

事件是一个用户触发的一种行为。比如单击一下鼠标，页面的某个地方就会改变，正是因为事件的存在，才能让用户可以更好地和网页进行交互。这也正是JavaScript的行为特征。事件就是用户与网页交互的行为。

2、事件的组成

事件源（触发事件的对象）、事件类型（比如onclick）、事件程序（触发事件执行的函数）

3、事件的执行执行事件到的步骤：

1、获取事件源（获取DOM元素）

2、绑定（注册）事件

3、添加事件处理函数 （与上一步是相连接的）

			//1、获取dom元素
			var btn = document.getElementsByTagName("button")[0];
			//2、注册事件 绑定事件处理函数
			btn.onclick = function(){
				alert('hello world')
			}

执行结果如下：

4、常见的事件处理程序类型：

HTML事件处理程序——写在HTML标签内部的事件处理程序——不常用<button type="button"

onclick="alert('hello world')">点击</button>

DOM0级事件处理程序——给一个DOM添加一个事件。上面的例子就是0级事件

DOM2级事处理程序—— addEventListener() removeAddEventListener()

5、常见的事件类型

鼠标事件

事件名	说明
onclick：鼠标单击事件	单击鼠标时触发
ondblclick:鼠标双击事件	双击鼠标时时触发
onmousedown：鼠标按下事件	按下鼠标时触发
onmouseup：鼠标松开事件	松开鼠标时触发
onmouseover：鼠标移入事件	鼠标移入时触发
onmouseout：鼠标移出事件	鼠标移出时触发
onmousemove：鼠标移动事件	鼠标移动时触发

键盘事件

事件名	说明
onkeydown：键盘按下事件	对于键盘上的所有按键都有效
onkeypress：鼠标按下事件	对于键盘上的某些功能按键不起作用的，如Ctrl、tab、回车等
onkeyup：键盘松开事件	松开某个按钮触发的事件

表单事件

事件名	说明
onblur：失去焦点事件	失去焦点触发的事件
onfocus：获得焦点事件	获得焦点触发的事件
onchange：内容改变事件	内容发生改变触发的事件
onrest：重置事件	点击重置按钮触发的事件
onsubmit：提交事件	移交按钮触发的事件

页面事件

事件名	说明
onload：加载完以后触发的事件	可以用于元素上，当元素加载完毕以后触发
unonload：页面关闭或者刷新触发的事件
onresize：窗口大小发生改变触发的事件

标签：DOM,web,元素,鼠标,触发,JavaScript,API,事件,节点
来源： https://www.cnblogs.com/qmlove/p/13245823.html

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。