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

2019-02-18  本文已影响0人  晚溪呀

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


一、 表单中的操作


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

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

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

上一篇 下一篇

猜你喜欢

热点阅读