JS：DOM，事件初识

DOM：

（Document Object Model）文档对象模型

模型：

浏览器在加载一个页面时，是按照自上而下的顺序加载的，读取到一行就运行一行。如果将script标签写到页面上面，在代码执行时，页面还没有加载，页面没有加载DOM对象也没有加载，会导致无法获得DOM对象。

***load***事件会在整个页面加载完成后才出发。
为window绑定一个onload事件，该事件对应的响应函数将会在页面加载完成之后执行。这样可以确保我们的代码执行时所有的DOM对象已经加载完毕了。

1.getElementsByid()返回一个HTML元素对象： object HMTLElement
2.getElementsByTagName()返回一个类数组对象，所有查询到的元素都会封装到对象中：object HTMLCollection
3.getElementByName():返回所在name元素对象。

4.innerHTML用于获取元素内部的HTML代码，对于自结束标签，这个属性没有意义。要用元素内属性。注意！！：class属性不能采取这种方式，读取class属性需要用.className

1.元素h节点内的getElementsByName():获取元素内的标签节点
2.childNodes:属性会获取包括文本节点在内的所有节点，DOM标签与标签之间空白部分也会当成text文本节点。
3.children:属性会获取当前元素的所有子元素

InnerText:
与innerHTML类似，但是他会自动把html标签去除。

剩余一些DOM方法

在document中有一个属性， 它保存的是body的引用。

var body = document.body;

document.documentElement保存的是Html标签

document.querySelector():
需要一个选择器的字符串作为参数，可以根据一个CSS选择器来查询一个元素节点对象，虽然IE8中没有getElementsByClassName()但是可以使用querySelector()代替 。使用该方法总会返回唯一的一个元素，如果满足条件的元素有多个，那么它只会返回第一个元素，用querySelectorAll可以将全部元素封装为数组返回。

事件对象

当事件的响应函数被触发时，浏览器每次都会将一个事件对象作为实参传递进响应函数，在事件对象中封装了当前事件相关的一切信息。

event.clientX,evnet.clientY

可以获取鼠标指针的水平与垂直坐标。

event.cancelBubble = true:取消冒泡

事件的委派

我们希望，只绑定一次事件，即可应用到多个的元素上，即使元素是后添加的。我们可以尝试将其绑定给元素的共同的祖先元素。

事件的委派指将事件统一绑定给元素的共同的祖先元素，这样当后代元素上的事件触发时，会一直冒泡到祖先元素，从而通过祖先元素的响应函数来处理事件。
事件委派是利用了冒泡，通过委派可以减少事件绑定的次数，提高程序的性能。

事件的绑定

addEventListener()
通过这个方法也可以为元素绑定响应函数
参数：
1.事件的字符串，不要On
2.回调函数，当事件触发时该函数会被调用
3.是否在捕获阶段触发事件，需要一个布尔值，一般都传false.
4.它的this是绑定事件的对象
使用addEventListener()可以同时为一个元素的相同事件同时绑定多个响应函数。
这样当事件被触发时，响应函数将会按照函数的绑定顺序执行。

这个方法也可以同时为一个事件绑定多个处理函数，不同的是它是后绑定先执行，执行顺序和addEventListener()相反。

定义一个函数，用来为指定元素绑定响应函数
参数：
obj:要绑定事件的对象
evenStr 事件的字符串
callback 回调函数