【WIP】客户端JavaScript 事件处理

创建: 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

 鼠标按下的键
 整数

0	左击
1	滚轮
2	右击

 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

做一个画图软件