Javascript 事件处理

2019-01-14

客户端 js 采用了异步事件驱动编程模型，有大概5个类型的事件。
事件处理需要注意以下五点：
(1) 事件类型（event type）：用来说明发生什么类型事件的字符串，事件类型只是字符串，因此实际上有时会称之为事件名字
(2) 事件目标（event target）：是发生的事件或与之相关的对象，window、document 和 element 都是常见的事件目标
(3) 事件处理程序（event handler）：是处理或响应事件的函数
(4) 事件对象（event object）：是与特定事件相关且包含有关该事件详细信息的对象
(5) 事件传播（event propagation）：是浏览器决定哪个对象触发其事件处理程序的过程

我们为了测试作为的 demo：

<div id="t1">
  you are successed
</div>
<div id="t2">
  you are faild
</div>
<div id="t4">
  <span id="t3">
    you are good
  </span>
</div>
<div id="t5"></div>
<div id="t6">
  this is a test
</div>

1.文档加载事件

有时候需要浏览器通知文档加载完毕和操作准备就绪的事件。

load 当文档和外部资源完全加载并显示给用户且可以操作时会触发它
unload 当用户离开当前文档转向其他文档时会触发它
onerror 属性有点像事件处理程序，当 js 出错的时候就会触发它，但是它不是真正的事件处理程序
resize 当用户调整浏览器窗口的时候会调用它
scroll 当用户滚动浏览器窗口的时候会调用它
window.onload = function(){} 在文档加载完成之后才会触发后面的方法，此时，在文档中所有对象在dom中，图片，链接，脚本都装载完了

2. 表单事件

submit 提交表单
reset 重制表单
focus 表单得到焦点
blur 表单失去焦点

3. 注册事件

注册事件处理程序有两个方法，我们在下面 demo 里面说明：

window.onload = function(){
  // 第一个方法是给事件目标或者文档设置事件处理属性（onclick=""）
  // 按照约定，事件处理程序属性名字由“on”后面跟着事件名组成：onclick，onchange，onload，onmouseover，全部为小写
  // 这种事件元素注册适用于所有的浏览器的常见事件以及元素，但是缺点是每种事件类型只能最多只有一个处理程序
  var k = document.getElementById('t6');
  k.onclick = function(){
    console.log('test,test it!');
  }
  var a = document.getElementById('t1');
  var b = document.getElementById('t2');
  // 直接给目标元素添加一个属性方法
  a.onclick = function(e){
    console.log(e.target.innerText);
  };

  // 第二个方法比较通用，使用 addEventListener() 给元素传递方法（IE8 之后可以使用）
  // 接受三个参数
  // 第一个参数：注册处理事件的类型
  // 第二个参数：指定类型（第一个参数）触发时执行的函数
  // 第三个参数：默认是 false，若为 true 则注册为捕获事件处理程序
  // 更重要的是能通过多次调用 addEventListener() 为同一个对象注册同一事件类型的多个处理函数，而且逐一执行
  b.addEventListener('mouseenter',function(e){
    console.log(e.target.innerText);
  }, false);
  // 相对 addEventListener() 的是 removeEventListener()，从对象中删除事件处理函数，常用雨临时注册事件处理函数
  // 也接受三个参数
  // document.removeEventListener('mouseup',handleMouseUp,true)

  // ie9 之前不支持 addEventListener() 和 removeEventListener()，因此 ie5 使用了 attachEvent() 和 detachEvent()
  // 它们的工作原理类似，但有区别：ie 事件模型不支持捕获，因此只有两个参数：事件类型，处理程序函数；事件类型名必须以“on”前缀加事件处理程序名
  // 这个方法高版本的浏览器已经被 addEventListener 替代，所以很少使用
  // if (b.addEventListener) {
  // 	b.addEventListener('click',handle, false);
  // } else {
  // 	b.attachEvent('onclick',handle);
  // }

  // 事件取消与传播
  // 在支持 addEventListener() 的浏览器中，能够通过 preventDefault() 方法取消事件的默认行为
  // 在支持 addEventListener() 的浏览器中，能够通过 stopPropagation() 方法阻止事件传播
  // 如果在同一个对象上定义了其他事件处理程序，剩下的的处理程序将依旧被调用，但是 stopPropagation() 之后的其他任何对象上的事件处理程序将不会被调用
  var c = document.getElementById('t3');
  var d = document.getElementById('t4');
  c.addEventListener('click',function(e){
  // 不使用 stopPropagation() 会把 绑定 #t4 的方法也一起触发了，因为冒泡
  e.stopPropagation();
    console.log('1111');
  });
  d.addEventListener('click',function(){
    console.log('2222');
  });
}

4. 鼠标事件

事件：

click ：当用户按下并且释放鼠标按钮时触发
contextmenu ：当用户按下鼠标右键出现上下文菜单时触发
dbclick ：当用户双击鼠标时触发
mousedown ：当用户按下鼠标按钮时触发
mouseup ：当用户释放鼠标按钮时触发
mousemove ：当用户移动鼠标时触发
mouseover ：当用户鼠标移入时触发，不冒泡版本 mouseenter
mouseout ：当用户鼠标移出时触发，不冒泡版本 mouseleave
mousewheel ：当用户滚动滚轮时触发，久版本的 firefox 不支持

属性：

clientX／clientY 属性指定了鼠标在窗口中的坐标位置
botton／which 属性指定了按下的鼠标键是哪个

var e = document.getElementById('t5');
e.addEventListener("click", function(e){
  var a = e.clientX; // 获取当前事件对象鼠标在文档中的 x 坐标
  var b = e.clientY; // 获取当前事件对象鼠标在文档中的 y 坐标
  console.log('x: '+ a +' y: ' + b);
});

5. 键盘事件

事件：

keydown ：用户在键盘上按下按钮时触发，按的时间长会使这个事件重复
keypress ：当用户键盘键入一个按键时触发，按的时间长会使这个事件重复
keyup ：用户在键盘上释放按钮时触发
keypress／keydown 键盘对象的 keyCode 属性指定了输入字符的编码（unicode），firefox 中使用 charCode
keypress／keydown 获得到的字符编码必须使用 String.fromCharCode() 转化成字符串

属性：

key ： 3级 DOM 属性，以字符串的形式返回键名
altKey ：默认 false，当事件发生且对应的辅助键按下，这会变成 true
ctrlKey ：默认 false，当事件发生且对应的辅助键按下，这会变成 true
metaKey ：默认 false，当事件发生且对应的辅助键按下，这会变成 true
shiftKey ：默认 false，当事件发生且对应的辅助键按下，这会变成 true

document.addEventListener("keypress", function(e){
  var a = e.keyCode || e.charCode;
  var b = String.fromCharCode(a);
  // 或者直接使用 key 属性就可以获得这个键入的按键值了
  var c = e.key;
  console.log(e);
  console.log('keyCode:', b);
  console.log('key:', c);
});