JavaScript高级手记（事件对象和默认行为）

JavaScript高级手记（事件对象和默认行为）

/* 
 * 事件对象：存储当前事件操作及触发的相关信息的（浏览器本身记录的，记录的是当前这次操作的信息，和在哪个函数中无关）
      给当前元素的某个事件行为绑定方法，当事件行为触发，不仅会把绑定的方法执行，而且还会给方法默认传递一个实参，这个实参就是事件对象

  * 鼠标事件对象  MouseEvent
    + clientX/clientY  鼠标触发点距离当前窗口的x/y轴坐标（只对当前屏，卷去的部分不计算在内）
    + pageX/pageT  鼠标触发点距离当前body的x/y轴坐标（不受页面滚动的影响）
    + type 事件类型
    + target / scrEment  获取当前事件源（当前操作的元素）
    + path  传播路径
    + ev.preventDefault() / ev.returnValue=false  阻止默认行为
    + ev.stopPropation() / ev.cancelBubble=true  阻止冒泡传播
    + ...

  * 键盘事件对象 KeyboardEvent
    + key / code 存储按键名字
    + which / keyCode  获取按键的键盘码
      + 方向键 左37 上38 右39 下40
      + Space 空白键 32
      + BackSpace 回退键 8
      + Delete 删除键 48
      + Enter  回车键 13
      + Shift  16
      + Ctrl 17  
      + Alt 18
      + ...

  * 手指事件对象  TouchEvent（移动端）
    + changedTouches / touches  都是用来记录手指的信息的，常用的是changedTouches
      + 手指按下、移动、离开屏幕 changedTouches都存储了对应的手指信息，哪怕离开屏幕后，存储的也是最后一次手指在屏幕中的信息；而touches在手指离开屏幕后，就没有任何信息了；
      + 结果都是一个ToucheList集合，记录每一根手指的信息
      + ev.changedTouches[0]  第一根手指的信息
        + clientX/clientY
        + pageX/pageY
        + ...

  * 普通事件对象 Event
    + ...

*/
/* 
 * 默认行为：浏览器会赋予元素很多默认的行为操作
      + 鼠标右键菜单
      + 点击A标签发生页面跳转/跳转到指定位置(锚点定位)
      + 键盘按下输入内容
      + ...

  可以基于ev.preventDefault() 来禁用这些默认行为

*/

// 禁用鼠标右键菜单(可以改成自己想要的内容)
window.oncontextmenu = function(ev) {
  ev.preventDefault();
}
// 禁用a标签发生页面跳转
// 点击啊标签是先触发其点击事件行为，再触发其默认行为，所以可以通过给a标签的点击事件绑定方法，在方法中调用 ev.preventDefault()来阻止其默认行为
let a = document.querySelector('a');
a.onclick = function(ev) {
  ev.preventDefault();
  // 或者
  // return false;
}


let n = null;
document.body.addEventListener('click',function(ev){
  n = ev;
  console.log(ev, 0);
});
document.body.addEventListener('click', function(e){
  console.log(n === e);  // => ture
  console.log(e, 1);
});