学习指标:
节数 | 知识点 | 要求 |
---|---|---|
第一节 表单文档事件 | 获取焦点事件 | 理解 |
失去焦点事件 | 理解 | |
第二节 键盘事件 | 键盘事件的品种 | 理解 |
键盘属性 | 理解 | |
第三节 滚动事件 | 回到页面顶部 | 把握 |
滚动事件 | 把握 | |
滚动事件的属性 | 把握 | |
第四节 手机触摸事件 | 手机触摸事件 | 把握 |
第五节 表单注册案例 | 表单注册案例 | 把握 |
一、表单文档事件
焦点: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.