一、Event事件
事件是发生在 HTML 元素上的事情。当在 HTML 页面中使用 JavaScript 时， JavaScript 可以触发这些事件。
常用事件的分类：鼠标事件、键盘事件、表单事件
- 鼠标事件
- 键盘事件
- 表单事件
二、事件绑定
我们学了很多的事件，而要想让用户的操作作出响应，我们还要对事件进行绑定。
在JavaScript中，有三种常用的绑定事件的方法：
- 行内绑定
- 动态绑定
- 事件监听
- 行内绑定
按照约定，事件处理程序属性的名字由“on”后面跟着事件名组成：onclick、onchange等。这些属性名是区分大小写的，所有都是小写，即使是事件类型是由多个词组成的（比如“readystatechange”）。也就是直接在html标签中通过 onXXX=“” 来绑定。
缺点：
- 结构，样式，行为都绑定在同一标签中，这种方式如果行内样式过多，代码就会臃肿，不利于维护。
- 事件处理程序属性的缺点是其设计都是围绕着假设每个事件目标对于每种事件类型将最多只有一个处理程序。
- 动态绑定
在JavaScript代码中（即<script>标签内）绑定事件可以使JavaScript代码与HTML标签分离，文档结构清晰，便于管理和开发。
- 事件监听
- 通过监听事件看当前事件是否被触发。
- window对象、Document对象和所有的文档元素（Element）都定义了一个名为addEventListener()方法，使用这个方法可以为事件目标注册事件处理程序。
addEventListener()
语法：elementObject.addEventListener(eventName,handle,useCapture);
参数：
- eventName：事件名称。注意，这里的事件名称没有“ on ”，如鼠标单击事件 click ，鼠标双击事件 doubleclick ，鼠标移入事件 mouseover，鼠标移出事件 mouseout 等。
- handle：事件句柄函数，即用来处理事件的函数。
- useCapture：Boolean类型，是否使用捕获，一般用false 。
三、事件传播
当一个事件发生以后，它会在不同的DOM节点之间传播（propagation）。这种传播分成三个阶段：
第一阶段：捕获阶段——从window对象传导到目标对象
第二阶段：目标阶段——目标事件本身的事件处理调用
第三阶段：冒泡阶段：从目标对象传导回window对象
这种三阶段的传播模型，会使得一个事件在多个节点上触发。比如，假设点击<div>之中嵌套一个<p>节点。
如果对这两个节点的click事件都设定监听函数，则click事件会被触发四次。
上面代码表示，click事件被触发了四次：<p>节点的捕获阶段和冒泡阶段各1次，<div>节点的捕获阶段和冒泡阶段各1次。
- 捕获阶段：事件从<div>向<p>传播时，触发<div>的click事件；
- 目标阶段：事件从<div>到达<p>时，触发<p>的click事件；
- 目标阶段：事件离开<p>时，触发<p>的click事件；
- 冒泡阶段：事件从<p>传回<div>时，再次触发<div>的click事件。
注意，用户点击网页的时候，浏览器总是假定click事件的目标节点，就是点击位置的嵌套最深的那个节点（嵌套在<div>节点的<p>节点）。所以，<p>节点的捕获阶段和冒泡阶段，都会显示为target阶段。
事件传播的最上层对象是window，接着依次是document，html（document.documentElement）和body（document.dody）。也就是说，如果<body>元素中有一个<div>元素，点击该元素。事件的传播顺序，在捕获阶段依次为window、document、html、body、div，在冒泡阶段依次为div、body、html、document、window。
四、定时器
JavaScript提供定时执行代码的功能，叫做定时器（timer），主要由setTimeout()和setInterval()这两个函数来完成。它们向任务队列添加定时任务。
添加定时器
1.setInterval() 方法
setInterval(要执行的动作,时间:毫秒);多少时间就执行,重复执行多次
示例：
第一个参数是函数（function）。
第二个参数间隔的毫秒数
注意: 1000 毫秒是一秒
2. setTimeout() 方法
setTimeout(要执行的动作,时间:毫秒);多少时间后执行,只执行一次
示例：
第二个参数指示从当前起多少毫秒后执行第一个参数。
定时器三种写法
1.匿名函数
示例：
2.没有参数的函数名
示例：
3.传参的函数(将函数作为字符串就可以传递参数)
示例：
清理定时器
1.clearInterval()方法
clearInterval() 方法用于停止 setInterval() 方法执行的函数代码
要使用 clearInterval(要清理的定时器名称) 方法, 在创建计时方法时你必须使用全局变量
示例：
2. clearTimeout()方法
clearTimeout(要清理的定时器名称) 方法用于停止执行setTimeout()方法的函数代码, 在创建计时方法时你必须使用全局变量
示例：
扫一扫
6892
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
