表单文档事件
焦点: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失去了焦点")};
![bfd02f22ca682932667436ae43ede11c.png](https://i-blog.csdnimg.cn/blog_migrate/2945e31171e8ffae2597cd5bc440a5d6.jpeg)
![e57ada0b4ea8ef856137278a6d1dce66.png](https://i-blog.csdnimg.cn/blog_migrate/5b37d0f058320e93fae31280831d861d.png)
1.3 oninput事件和onchange事件
onchange:元素发生变化的时候,就会触发。
oninput:当给元素输入内容的时候,就会触发。
区别:
onchange:当失去焦点的时候才会触发此事件。
oninput:当输入内容的时候,会立即触发。
![f6417e09f30ed5c02c8d7027314b7628.png](https://i-blog.csdnimg.cn/blog_migrate/6ccc2713706a5fc32b55c912e8c2e72b.jpeg)
![09e6daa35e1a31c4ffc47832bfedc6c5.png](https://i-blog.csdnimg.cn/blog_migrate/f14b7f45480951479f4ea685d5e71916.jpeg)
![9735d0eb0091865e66bf1600b68507fe.png](https://i-blog.csdnimg.cn/blog_migrate/633f8b249a2a3fa40aae36062dff2ab5.jpeg)
![cf69003bcfd33649d3ba69a867212dc3.png](https://i-blog.csdnimg.cn/blog_migrate/3bb2685beda7454bedae5f5b52aeb9d5.jpeg)
键盘事件
2.1键盘事件种类
键盘事件是指当用户在操作键盘的时候会自动被触发的事件,通常有以下三种:
- onkeydown:用户按下任意键都可以触发这个事件。如果按住不放,事件会被连续触发。
(2) onkeypress:用户按下任意键都可以触发这个事件(功能键除外)。如果按住不放,事件会被连续触发
(3) onkeyup: 用户释放按键时触发
ps:键盘事件一般绑定在需要用户输入的元素上(例如input),但是由于键盘事件默认采用事件冒泡机制,因此将键盘事件直接绑定在body之上也是允许的。