JS事件深入理解

学习目标：

节数	知识点	要求
第一节 表单文档事件	获取焦点事件	了解
	失去焦点事件	了解
第二节 键盘事件	键盘事件的种类	了解
	键盘属性	了解
第三节 滚动事件	回到页面顶部	掌握
	滚动事件	掌握
	滚动事件的属性	掌握
第四节 手机触摸事件	手机触摸事件	掌握
第五节 表单注册案例	表单注册案例	掌握

一、表单文档事件

​ 焦点：js当前正在和用户发生交互的节点称为焦点。可以类比为人类目光汇聚的地方。

​ 语法：获得焦点和失去焦点事件既可以使用DOM1绑定也可以使用DOM2绑定

八哥总结说明：

这两个事件均不支持事件冒泡。

1.1获得焦点事件

i2.onfocus = function () {console.log("i2获得了焦点")};

i1.addEventListener('focus', function () {console.log('i1捕获事件');}, true);

1.2 失去焦点事件

i1.addEventListener('blur', function () {console.log('i1捕获事件');}, true);

i2.onblur = function () {console.log("i2失去了焦点")};

1.3 oninput事件和onchange事件

onchange:元素发生变化的时候，就会触发。

oninput:当给元素输入内容的时候，就会触发。

区别：

onchange:当失去焦点的时候才会触发此事件。

oninput:当输入内容的时候，会立即触发。

二、键盘事件

2.1键盘事件种类

​ 键盘事件是指当用户在操作键盘的时候会自动被触发的事件，通常有以下三种：

(1) onkeydown:用户按下任意键都可以触发这个事件。如果按住不放，事件会被连续触发。
(2) onkeypress:用户按下任意键都可以触发这个事件(功能键除外)。如果按住不放，事件会被连续触发
(3) onkeyup: 用户释放按键时触发

ps：键盘事件一般绑定在需要用户输入的元素上(例如input)，但是由于键盘事件默认采用事件冒泡机制，因此将键盘事件直接绑定在body之上也是允许的。

2.2键盘属性

key和keyCode属性

Key:具体是哪一个键
keyCode:返回keydown何keyup事件发生的时候按键的代码，以及keypress 事件的Unicode字符(ascii码值)。

A:65,a:97,0:48,空格键：32.