javaScript-API篇

导读：
API------应用程序编程接口，是一些预先定义的函数，目的是提供应用程序与开发者基于某软件或硬件得以访问一组例程的能力，且无需访问源码或理解内部代码。
Web API------浏览器提供的一套操作浏览器功能和页面元素的API（DOM和BOM），Web工程师利用两者进行页面交互。

DOM

定义：文档对象模型，是W3C组织推荐的处理可扩展标记语言（HTML或者XML）的标准编程接口
DOM树：

获取元素

1. 根据ID获取标签:getElementById(id)
      作用：返回对应的ID的标签元素
2. 根据标签名获取标签:getElementsByTagName(标签名)
      作用：返回带有指定标签名的对象（伪数组）的集合，或者空的伪数组
      PS：element.getElementsByTagName()获得某个element父元素下的指定标签名的对象的集合
3. 根据类名获取标签：getElementsByClassName(类名)
      作用：返回带有指定类名的标签的对象（伪数组）的集合，或者空的伪数组
4. 根据选择器获取标签：querySelector(选择器)/querySelectAll(选择器)
      作用：返回第一个/所有符合选择器的元素
5. 特殊元素获取（body、html）
      body：document.body
      html：document.documentElement

PS：1、2、3都可以通过element.XXX()获得某个element父元素下的指定标签
PS：3、4方法IE浏览器i9以下不支持（兼容性问题）

事件基础

1.事件三要素：A事件源 B事件类型 C事件处理程序（A.按钮 B.被点击，执行 C.function）

2.基本鼠标事件类型：

鼠标事件	触发条件
onmousedown	鼠标按钮被按下（左键或者右键）时触发。不能通过键盘触发
onmouseup	鼠标按钮被释放弹起时触发。不能通过键盘触发
onclick	单击鼠标左键或者按下回车键时触发。这点对确保易访问性很重要，意味着onclick事件处理程序既可以通过键盘也可以通过鼠标执行
ondblclick	双击鼠标左键时触发
onfocus	获得鼠标焦点
onblur	失去鼠标焦点
onmouseenter	鼠标移入元素范围内触发，该事件不冒泡，即鼠标移到其后代元素上时不会触发
onmouseleave	鼠标移出元素范围时触发，该事件不冒泡，即鼠标移到其后代元素时不会触发
onmouseover	鼠标移入目标元素上方。鼠标移到其后代元素上时会触发
onmouseout	鼠标移出目标元素上方
onmousemove	鼠标在元素内部移到时不断触发。不能通过键盘触发
oncontentmenu	点击鼠标右键时触发
onselectstart	鼠标选中区域

PS：click()是方法，xxx.click(function(){})→xxx触发onclick事件，执行function()事件处理程序
参考：https://www.cnblogs.com/starof/p/4106904.html

3.事件绑定

3.1 传统事件绑定
操作1---<div onclick=''></div>
操作2---var div=querySelector(div);div.onclick=function(){};
缺点：1.绑定多次相同事件，后者覆盖前者；
     2.不支持DOM事件流（事件捕获-目标元素-事件冒泡）
     
3.2 W3C标准事件绑定（推荐使用）
标准浏览器：obj.addEventListener('click',fn,false)
三个参数：1.触发事件
         2.触发的函数
         3.布尔值（表示是否捕获：true--捕获；false--冒泡【默认】）
 PS：event.stopPropagation()阻止事件冒泡
IE浏览器：obj.attchEvent('onclick',fn)
两个参数：1.事件驱动
         2.触发函数
优点：1.绑定多次相同类型事件，事件依次发生；
     2.支持DOM事件流
     
取消事件监听
标准浏览器：obj.removeEventListener('click',fn,false)
IE浏览器：obj.detachEvent('onclick',fn)

4.DOM事件流（事件捕获-当前目标元素-事件冒泡）

注意：   
   1.JS代码只能执行捕获或者冒泡其中的一个阶段；
   2.onclick和attachEvent只能得到冒泡阶段；
   3.有些事件没有冒泡阶段，比如onblur、onfocus、onmouseenter、onmouseleave

5.事件对象
定义：Event 对象代表事件的状态，比如事件在其中发生的元素、键盘按键的状态、鼠标的位置、鼠标按钮的状态。
注意：event在IE中有兼容性问题，解决方法-----e=e||window.event
事件对象属性：

属性	描述
target	返回触发事件的对象 标准
srcElement	返回触发事件的对象 非标准
currentTarget	返回其事件监听器触发该事件的元素，类似于this（存在兼容性问题）
type	返回触发事件的类型
can