事件和事件对象

button.onclick = function(all){
  console.log(all)  
}

事件（Event）

事件是您在编程时系统内发生的动作或者发生的事情，系统通过它来告诉您在您愿意的情况下您可以以某种方式对它做出回应。

比如在一个机场，当一架将起飞的飞机的跑道清理完成后，飞行员会收到一个信号，结果是他们开始起飞。而在事件里会以一段Javascript代码做结果

var btn = document.querySelector('button');

function random(number) {
  return Math.floor(Math.random()*(number+1));
}

btn.onclick = function() {
  var rndCol = 'rgb(' + random(255) + ',' + random(255) + ',' + random(255) + ')';
  document.body.style.backgroundColor = rndCol;
}

值得注意的是并不是只有 JavaScript 使用事件——大多的编程语言都有这种机制

而DOM事件是我们最常用的事件，而每个事件都是继承自Event 类的对象，所以我们当然为Event划分了类

• 资源事件
• 焦点事件
• 网络事件
• CSS动画事件
• .......

所以总结来看事件Event，是当我在特定环境中触发了某个行为而获得的接口对象，从而去操作各种环境提供的功能

Event 对象代表事件的状态，比如事件在其中发生的元素、键盘按键的状态、鼠标的位置、鼠标按钮的状态。

 
// 当我触发点击事件
[object MouseEvent] {
  ALT_MASK: 1,
  altKey: false,
  AT_TARGET: 2,
  bubbles: true,
  BUBBLING_PHASE: 3,
  button: 0,
  buttons: 0,
  cancelable: true,
  cancelBubble: false,
  CAPTURING_PHASE: 1,
  clientX: 21,
  clientY: 17,
  composed: true,
  composedPath: function composedPath() {
    [native code]
},

这就是当前浏览器环境对我点击事件的 “对象模型”

事件对象的属性

知道JavaScript 的设计是一个简单的基于对象的范式这一点很重要，所以可以浅显的认为JS的所有都是对象，那么事件当然也是对象。

事件这个对象是环境用来描述它自己的各种功能的“对象模型”，也就是上述的例子

clientX: 21,
clientY: 17

就是浏览器的窗口当前的横纵轴位置的描述，所以当然这是事件对象的属性，所以事件对象也就是事件只是加深了对JS事件的理解

 为什么事件和事件对象有时不能很好的理解，难点就是事件对象是事件的状态的而事件又是其环境的事件对象

 

---

 

关键字：事件的状态为事件对象，事件对象是当前环境借”对象模型“对自己各种特定功能的描述，其对象模型又有各种属性来描述事件的状态

 

（2019年2月16日初撰）

（2019年2月17日修订）

 

参考资料：

MDN 事件介绍

MDN 事件参考W3C DOM Event

MDN Event