js事件篇(复习巩固基础)

JS事件：指在浏览器窗体或者HTML元素上发生的，可以触发JS代码块运行的行为。可被理解为是JavaScript侦测到的行为。
举例：页面的加载、鼠标单击页面、鼠标滑过某个区域等。 附上：web前端初级.pdf

一、事件处理

1.事件概述

(1)事件处理程序

事件处理程序：指的就是JavaScript为响应用户行为所执行的程序代码。
举例：用户单击button按钮，这个行为就会被JavaScript中的click事件侦测到；然后让其自动执行，为click事件编写的程序代码，如在控制台输出“按钮被单击了”。

(2)事件驱动式

事件驱动式：是指在Web页面中JavaScript的事件，侦测到的用户行为，并执行相应的事件处理程序的过程。
举例：鼠标移入文本区域，文本区域变色这一过程。

(3)事件流（事件冒泡与捕获）

事件流：事件发生时，会在发生事件的元素节点与DOM树根节点之间按照特定的顺序进行传播，这个事件传播的过程就是事件流。
事件流的传播顺序解决方案：网景（Netscape）提出了“事件捕获方式”、微软（Microsoft）提出了“事件冒泡方式”。
w3c标准的事件流方向：捕获 → 事件目标→冒泡

2.事件的绑定方式

(1)行内绑定式

事件的行内绑定式是通过HTML标签的属性设置实现的。具体语法格式如下。
<标签名 事件="事件的处理程序">

标签名可以是任意的HTML标签，如<div>标签、<button>标签等；
事件是由on和事件名称组成的一个HTML属性，如单击事件对应的属性名为onclick；
事件的处理程序指的是JavaScript代码，如匿名函数等。
由于开发中提倡JavaScript代码与HTML代码相分离。因此，不建议使用行内式绑定事件。

(2动态绑定式

解决的问题：JavaScript代码与HTML代码混合编写的问题。
实现方式：在JavaScript代码中，为需要事件处理的DOM元素对象，添加事件与事件处理程序。
语法格式：DOM元素对象.事件 = 事件的处理程序;事件的处理程序一般都是匿名函数或有名的函数。

行内绑定式与动态绑定式的异同
不同点：
实现语法不同，前者通过HTML标签的属性设置，后者在JS中处理DOM对象。
事件处理程序中关键字this的指向也不同。前者指向window对象，后者指向当前正在操作的DOM元素对象。
相同点：
同一个DOM对象的同一个事件只能有一个事件处理程序。

(3)事件监听

给同一个DOM对象的同一个事件添加多个事件处理程序，可以让DOM对象通过事件监听的方式实现事件的绑定。根据不同类型的浏览器，分别介绍事件监听的实现方式。

事件监听的处理程序是一个有名的函数时，可移出事件监听。
DOM对象.detachEvent(type, callback); // 早期版本IE浏览器
DOM对象.removeEventListener(type, callback); // 标准浏览器
参数type值的设置要与添加事件监听的事件类型相同，参数callback表示事件处理程序的名称，即函数名。

二、事件对象

当发生事件时，都会产生一个事件对象event，这个对象中包含着所有与事件相关的信息，包括发生事件的DOM元素、事件的类型以及其他与特定事件相关的信息。

1.获取事件对象

2.常用属性和方法

三、事件分类

1.页面事件

事件名称	事件触发时机
load	页面加载
unload	页面关闭
resize	调整窗口宽高
scroll	窗口滚动

2.焦点事件

事件名称	事件触发时机
focus	当获得焦点时触发(不会冒泡)
blur	当失去焦点时触发 (不会冒泡)

3.鼠标事件

4.键盘事件

keypress事件保存的按键值是ASCII码，
keydown和keyup事件保存的按键值是虚拟键码。

5.表单事件

事件名称	事件触发时机
submit	当表单提交时触发
reset	当表单重置时触发

上一篇 >>> DOM 篇
下一篇 >>> 正则表达式