乐趣区

关于java: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.

退出移动版