【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="" target="_blank" rel="external nofollow" οnclick="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  鼠标按下的键  整数  左击  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
做一个画图软件

转载于:https://www.cnblogs.com/lancgg/p/8281697.html