22-第二十二章 表单事件 事件委托 onready封装 键盘事件

一、 表单中的操作

1、 焦点事件 设置焦点方式：点击 tab js

• onfocus 获取焦点事件 <input>、<textarea> 以及 <select> <a/> 元素

1.obj.focus() 给指定的元素设置焦点

• onblur 失去焦点事件 <input>、<textarea> 以及 <select> <a/> 元素

1.obj.blur()取消指定元素的焦点

2、 onchange 内容改变触发 <input>、<textarea> 以及 <select> 元素

3、onsubmit 事件
submit() 提交表单
4、onreset 事件
reset() 重置表单

二、 事件委托

标准：e.target 指向事件触发对象
非标准：e.srcElement 指向事件触发对象

三、 window.onready封装

一、文档的onreadystatechange 事件，

当文档的readyState 属性发生变化的时候触发
readyState 属性返回当前文档的状态（载入中……）。
该属性返回以下值:
uninitialized - 还未开始载入
loading - 载入中
interactive - 已加载，文档与用户可以开始交互
complete - 载入完成

1.window.onready = function (callback) {
2.            ///兼容FF,Google
3.            if (document.addEventListener) {
4.                document.addEventListener('DOMContentLoaded', function () {
5.                    //console.log(document.readyState);
6.                    document.removeEventListener('DOMContentLoaded', arguments.callee, false);
7.                    callback();
8.                }, false)
9.            }
10.             //兼容IE
11.            else if (document.attachEvent) {
12.                document.attachEvent('onreadystatechange', function () {
13.                    //console.log(document.readyState);
14.                      if (document.readyState == "interactive") {
15.                                document.detachEvent("onreadystatechange", arguments.callee);
16.                                callback();
17.                       }
18.                })
19.            }
20.
21.        }
22.        //window.onload= function(){ alert('onload');}
23.        window.onready(
24.            function(){ alert('ok'); }
25.
26.        );

四、 键盘事件

1.不是所有元素都能够接收键盘事件，能够响应用户输入的元素，能够接收焦点的元素就能够接收键盘事件,document能够响应

keydown：用户在键盘上按下某按键是发生。一直按着某按键则会不断触发（opera浏览器除外）。
keypress：用户按下一个按键，并产生一个字符时发生（也就是不管类似shift、alt、ctrl之类的键，就是说用户按了一个能在屏幕上输出字符的按键keypress事件才会触发）。一直按着某按键则会不断触发。
keyup：用户释放某一个按键是触发。

event.keyCode : 数字类型 键盘按键的值 键值
ctrlKey,shiftKey,altKey 布尔值

当一个事件发生的时候，如果ctrl || shift || alt 是按下的状态，返回true，否则返回false