事件

1. 概述：JS是以事件驱动为核心的一门语言
2. 事件（在js中可以说一整套事件能完成一个功能）三要素：事件源、事件、事件驱动程序（事件驱动程序：对样式和html的操作，其实就是DOM操作）

1. 三句话：获取事件源（事件源：引发后续事件的标签）、绑定事件（事件：JS已经定义好，直接使用）、书写事件驱动程序

1. 事件的定义：当什么时候执行什么事
2. 使用事件的基本结构：事件源 + 事件类型 = 执行的指令
3. JS已经定义好的事件：

<1>onclick：鼠标单击

<2>onblclick：鼠标双击

<3>onkeyup：按下并释放键盘上的一个键时触发

<4>onchange：文本内容或下拉菜单中的选项发生改变

<5>onfocus：获得焦点，表示文本框等获得鼠标光标

<6>onblur：失去焦点，表示文本框等失去鼠标光标

<7>onmouseover：鼠标悬停，即鼠标停留在图片等的上方

<8>onmouseout：鼠标移出，即离开鼠标停留在图片等的上方

<9>onmousemove：鼠标在事件源上移动哪怕1像素都会触动的事件

<10>onmouseenter：== onmouseover，就是没有冒泡

<12>onmouseleave：== onmouseout，就是没有冒泡

<12>onload：网页文档加载事件

<13>onunload：关闭网页时

<14>onsubmit：表单提交事件

<15>onreset：重置表单时

<16>onmousedown：鼠标按下

<17>onmouseup：鼠标弹起

<18>onresize：事件会在窗口/框架被调整大小时发生

<19>window.screen.width：检测屏幕宽度（分辨率）—— 分辨率是屏幕图像的精密度，指显示器所显示的像素有多少

2. 获取事件源（也就是获取标签）

1. document.getElementById(“box”)；通过id名获取事件源
2. document.getElementsByTagName(“div”)；获取的是一个数组
3. document.getElementsByClassName(“”)；获取的是类名
4. document.getElementsByTagNameNS(“”) ；获取命名空间（这一种不要求掌握）

3. 绑定事件（事件源.事件 = function(){}）：

（1）.onclick = function(){程序} ；

（2）用函数名绑定：.onclick = fn ；注意这里千万不能加括号，加了括号就表示返回值了

                  function fn(){程序}；

（3）行内绑定：

    <div is=“box” onclick=“fn()”></div>

    function fn(){} ;

4. 书写事件驱动程序（匿名函数）：以后要学习的关于DOM的操作

3. 事件类型

1. onload事件(一个<script></script>标签里面只能出现一次window.onload = function(){}，并且它是JS的入口，是一定要写的)

1. 什么情况下触动onload事件：当页面加载完毕的时候触动事件（包括文本和图片）
2. 用途：整个页面上所有元素加载完毕之后再执行JS里面的内容

<1>JS的加载是和HTML同步加载的（如果使用元素在定义元素之前就容易报错）

<2>window.onload可以预防使用标签在定义标签之前

4. 杂论

1. 触发事件后调用有参的函数要先创建一个匿名函数，然后在匿名函数内调用执行函数

5. 注册事件的两种方式

1. onclick

（1）这种事件绑定的方法容易被层叠

2. addEventListener：事件监听器（原事件被执行的时候后面绑定的事件照样被执行）

1. 可以给同一个事件注册多个事件处理程序
2. 不会出现层叠
3. 调用者是事件源，参数1是事件名（不带on）；参数2是被执行的函数；参数3是捕获/冒泡

3. addEventListener和attachEvent的区别

1. 事件名称的区别

<1>addeventListener中第一个参数名不带on，例如：click、load

<2>attachEvent中带参数名带on，例如：onclick、onload

2. this的区别

<1>addEventListener：事件处理程序会在当前对象的作用域运行，因此事件处理程序中的this就是当前对象

<2>attachEvent：事件处理程序是在全局作用域下运行，因此this就是window

6. 属性绑定

1. .事件 = function（）{}
2. [“事件”] = function（）{}

7. 事件解绑（移除事件）

1. element.onclick = null ;
2. removeEventListener
3. IE9以前用detachEvent

注意事项：

（1）如果注册的时候使用的是匿名函数则无法移除