【事件处理三要素】

【第一节：DOM树===】

又称为文档树模型，把文档映射成树形结构，通过节点对象对其处理，处理的结果可以加入到当前的页面。

总结：

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

节点：网页中的所有内容，在文档树中都是节点（标签、属性、文本、注释等），使用node表示。

标签节点：网页中的所有标签，通常称为元素节点，又简称为“元素”，使用element表示

DOM把以以上内容都看做成对象。

第二节 获取元素方式

1. 根据ID获取

document.getElementById(id)

2. 根据标签名获取元素

document.getElementsByTagName('标签名')

3. 根据类名获取元素集合

document.getElementsByClassName('类名')

4. 获取指定选择器第一个元素（注意这里的类名选择器需要加符号"." "#"

document.querySelector('.box')

document.querySelector('#box')

document.querySelector('li')

5. 根据指定选择器返回所有元素 querySelectorAll()返回指定选择器的所有元素对象集合

document.querySelectorAll('.box')
document.querySelectorAll('标签名')

6. 获取特殊元素

document.body  //返回 body 元素

document.documentElement //返回HTML元素

第三节 事件基础

JavaScript 使我们有能力创建动态页面，而事件是可以被 JavaScript 侦测到的行为

简单理解：

网页中的每个元素都可以产生某些可以触发 JavaScript 的事件，例如，我们可以在用户点

击某按钮时产生一个 事件，然后去执行某些操作

第一节：事件的步骤

- 事件源：触发事件的元素（获取事件源）

- 事件类型： 例如 click 点击事件（绑定事件）

- 事件处理程序：事件触发后要执行的代码(函数形式)，事件处理函数

var btn = document.getElementById('btn');

btn.onclick = function() {

     alert('鼠标单击事件');//鼠标点击事件

}

1 常见的鼠标事件

onclick 鼠标点击左键触发

onmouseover 鼠标经过触发

onfocus 获取鼠标焦点触发

onblur  失去鼠标焦点触发

onmousemove 鼠标移动触发

onmouseup  鼠标弹起触发

onmousedown  鼠标按下触发