创建: 2017/10/15
完成: 2017/10/15
更新: 2017/11/04 加粗事件的参数
更新: 2017/12/12 增加事件处理时获取事件对象的方法
更新: 2019/05/20 补充Promise对象 异步处理, 删除相关TODO
【TODO】
补充15.5 改变事件监听器的this p422
补充 15.6 自己查， 补充完事件初始化函数的后续参数
补充15.9 做一个画图软件 p435
| 事件句柄的登陆方法 |
事件句柄
的登陆方法 |
| HTML元素的事件句柄属性 |
传送门
例:
《a href="" onclick="sample();"》
问题:
1. HTML被JavaScript污染
2. 一个事件只能登陆一个函数，多个的话最后一个有效 |
| DOM的元素对象的事件属性 |
传送门
var sample =
document.getElementByIdx_x_x_x_x_x_x_x_x_x_x_x_x("t");
sample.onclick = sample();
问题
1. 一个事件只能登陆一个函数，多个的话最后一个有效 |
| 通过addEventListener()方法 |
元素对象.addEventListener(type, listener,
useCapture);
| 参数 |
| type |
事件的种类
字符串, 去掉前面的on |
| listener |
发生事件时的回调函数的参照 |
| useCapture |
true ---> 捕获阶段
false ---> 起泡阶段
默认值 false |
|
| 例1 |
var a =
document.getElementByIdx_x_x_x_x_x_x_x_x_x_x_x_x("a");
a.addEventListener("click", function(e) {
e.currentTarget.style.backgroundColor = "red";
}, false); |
| 例2 |
function test(e) {
e.currentTarget.style.backgroundColor
= "red";
}
a.addEventListener("click", test); |
登陆初始化事件
| 图象等资源加载好以后初始化 |
window.addEventListener("load", function ()
{}); |
| 文档加载好后就加载 |
document.addEventListener("DOMContentLoaded",
function () {}); |
| |
|
| |
|
| |
|
指定函数时候不带参数的不要括号，可以带参数(要括号)
好处:
1.一个事件能登陆多个函数 |
| |
|
|
| 删除事件监听器 |
target.removeEventListener(type, listener,
useCapture);
1. 登陆时候如果是无名函数，不能删
2. 可以删除自己（整个事件？）
element.removeEventListener("click", arguments.callee, false);
|
| |
|
| 事件对象 |
| 参数 |
事件回调的对象函数的参数，
名字任意。一般为e或event |
| 获取 |
可以直接在触发的处理里使用event
或者加上参数e(jquery.event)
$('sample').click(function(e) {
event.stopPropagation();
event.preventDefault();
console.log(event);
console.log(e);
} |
| 事件种类 |
| onclick |
鼠标点击 |
| ondblclick |
鼠标双击 |
| onmousedown |
鼠标按下 |
| onmouseup |
鼠标收起 |
| onmousemove |
鼠标在要素上移动 |
| onmouseout |
鼠标移出要素 |
| onmouseover |
鼠标移入要素 |
| onkeydown |
键盘按下 |
| onkeyup |
键盘收起 |
| onkeypress |
键盘按下并收起 |
| onchange |
input的内容改变 |
| onblur |
input失去聚焦 |
| onfocus |
input获得聚焦 |
| onselect |
文字输入框等文字被选中 |
| onsubmit |
form的submit按钮被按下时 |
| onload |
读取完成 |
| onunload |
关闭浏览器，调向新页面等?? |
| onabort |
页面或者图像的读取被中断（取消） |
| onerror |
页面或者图象读取出错 |
| onresize |
元素的大小改变 |
| |
|
|
| 事件对象共有的属性 |
p412
| type |
事件名
字符串
"click", "mousedown"等 |
| target |
发生事件的元素
要素对象 |
| currentTarget |
登陆正在执行的事件函数的元素
要素对象 |
| eventPhase |
事件传播的相
整数
1: 捕捉阶段
2: 配发阶段
3: 发泡阶段 |
| timeStamp |
事件发生的事件
(1970/1/1 00:00:00开始的毫秒) |
| bubbles |
是不是发泡阶段
true/false |
cancelable
defaultPrevented
两个一样 |
是否可以取消
true/false
取消用preventDefault(); |
| isTrusted |
事件是否是有用户的行为引起的
true/false
取消用preventDefault(); |
| |
|
| |
|
|
| 鼠标事件对象的共通属性 |
click, dbclick, mousedown, mouseup,
mousemove, mouseout, mouseover
screenX
screenY |
点击位置的屏幕左边
整数 |
clientX
clientY |
点击位置的视口坐标
整数 |
pageX
pageY |
点击位置的文档坐标
整数 |
offsetX
offsetY |
发生事件的要素内的相对坐标
整数
以该要素的左上为顶点 |
| altKey |
是否按了Alt键
true/false |
| ctrlKey |
是否按了ctrl键
true/false |
| shiftKey |
是否按了shift键
true/false |
| detail |
事件详细情况
鼠标事件的话显示点击次数 |
| button |
鼠标按下的键
整数
|
| relatedTarget |
对象
| mouseover |
鼠标的出发点的元素 |
| mouseout |
鼠标的到达点的元素 |
| |
|
| |
|
| |
|
|
|
| 键盘事件的共通属性 |
keydown, keypress, keyup等
| altKey |
是否按了Alt键
true/false |
| ctrlKey |
是否按了ctrl键
true/false |
| shiftKey |
是否按了shift键
true/false |
| metaKey |
是否按了Meta键
true/false
Mac的command键, Windows的Windows键 |
| key |
按下的键的值的DOMString
字符串 |
| keyCode |
按下的键的编码
整数 |
| code |
表示被按下的键在键盘上的物理位置
字符串 |
| |
|
| |
|
| |
|
注:
keyCode
按下的键的编码 |
只对数值和字母正确
不受Shift和Ctrl的影响 |
| 获取大小写 |
keyCode+shiftKey |
key
按下的键的值的DOMString |
全部正确 |
code
表示被按下的键在键盘上的物理位置 |
不受Shift和Ctrl的影响 |
| |
|
|
| |
|
| |
|
| 事件的传播 |
| 事件的相 |
| 捕捉阶段 |
从Window Object出发一直到目标对象
有登陆事件的就执行 |
| 正常事件派发 |
执行登陆事件 |
| 发泡阶段 |
|
|
| 取消事件 |
阻止事件的传播
| 函数 |
event.stopPropagation() |
| 意义 |
阻止事件的传播
也就是阻止发泡阶段的发生 |
| |
|
| |
|
| |
|
阻止事件的传播与其他同级事件
| 函数 |
event.stopImmediatePropagation() |
| 意义 |
阻止事件传播，并且该句柄的其他事件不执行 |
| |
|
| |
|
| |
|
阻止默认动作
| 函数 |
event.preventDefault(); |
| 意义 |
取消浏览器默认处理
如点击链接跳过去等 |
| 注意: |
不一定可以取消
event. cancelable |
| |
|
| |
|
|
| |
|
| |
|
| 事件监听器内的this |
| 事件监听器内的this |
表示登陆该事件的元素对象 |
| 改变this指定的对象 |
略 p422
// TODO: 补充这里 |
| |
|
| |
|
| 向事件监听器添加参数的方法 |
| 用无名函数 |
在无名函数里面传递参数
e.addEventListener("click", function(e) {
test(e, 想要传递的参数);
}, false);
function test(e, 想要传递的参数) {...}; |
| 用返回函数的函数 |
e.addEventListener("click", test(...), false);
function test(想要传递的参数) {
return function(e) {
...
};
}; |
| |
|
| |
|
| |
|
| 自定义事件 |
| 步骤 |
| 创建事件对象 |
var event =
document_createEvent(type);
type: 事件种类
| "UIEvents" |
UI事件
初期化: event.initUIEvent |
| "MouseEvents" |
鼠标事件
初期化: event.initMouseEvent |
| "TextEvent" |
文本事件
初期化: event.initTextEvent |
| "KeyboardEvent" |
键盘事件
初期化: event.initKeyEvent |
| "MutationEvents" |
变异事件？
初期化: event.initMutationEvent |
| "HTMLEvents" |
HTML事件
初期化: event.initEvent |
| "CustomEvent" |
自定义事件
初期化: event.initCustomEvent |
| |
|
| |
|
| |
|
|
| 初始化事件 |
event.initXXXXX(type, bubbles, cancelable,
...);
参数含义
| type |
事件种类
"click"等 |
| bubbles |
是否要发泡阶段 |
| cancelable |
是否可以取消 |
| ... |
不同初始化函数不一样
// TODO: 自己查，补充这一块 |
| |
|
| |
|
| |
|
| |
|
| |
|
| |
|
|
| 配发事件 |
target.dispatchEvent(event);
target: 元素对象
一旦配发， 该事件的事件监听器立即执行 |
| |
|
| |
|
|
| 和默认事件的区别 |
event.isTrusted
true: 用户产生
false: 开发端产生 |
| 自定义事件的用途 |
一旦派发，监听器立即执行。所以和直接执行监听器函数没区别。
但是这样更加面向对象，不用在意接口 |
| |
|
| |
|
| |
|
| 间接的实现非同期处理(Promise) |
| 通常的回调 |
回调只是注册在运行堆, 实际运行时刻为可执行时间和实际设定开始时间中最先到来的
// 输出 A C B
console.log('A');
setTimeout(() => {
console.log('B');
}, 0);
console.log('C');
要想实现期待的顺序
setTimeout(()=>{
console.log('A');
setTimeout(()=>{
console.log('B');
setTimeout(()=>{
console.log('C');
}, 0);
},0);
}, 0);
|
| Promise |
var promise = new Promise(function(resolve, reject) {...});
● 参数
想要执行的参数
| resolve |
以成功状态中断promise
执行then, 可以带一个参数
|
| reject |
以出错状态中断promise
执行catch, 可以带一个参数
|
● 运行
| then(onFullfilled) |
resolve来呼出
const promise = new Promise((resolve, reject) => {
console.log("a");
resolve('b');
reject('c');
})
promise
.then((data) => {
console.log(data);
})
.catch((data)=>{
console.log(data);
});
● then究极体
then(onFullfilled, onRejected)
onRejected对应catch
|
| catch(onRejected) |
|
| 串联事件 |
|
|
并联事件
all
|
|
| race |
|
|
| |
|
| |
|
| |
|
| |
|
| |
|
| |
|
| |
|
| |
|
| |
|
|---|
| |
|
| |
|
| |
|
| |
|
| |
|
| |
|
| |
|
| |
|
| |
|
| |
|
| 做一个画图软件 |
| |
|
| |
|
| |
|
| |
|
| |
|
| |
|
| |
|
| |
|
| |
|
| |
|
| |
|
|---|
| |
|
| |
|
| |
|
| |
|
| |
|
| |
|
| |
|
| |
|
| |
|
| |
|
