javascript--事件也有可能是页面加载资源过程中的事件。常见的事件比如：click, dbclick, keyd

什么是事件

可能是由用户发起的，比如鼠标事件，键盘事件，窗口事件，表单事件
也有可能是页面加载资源过程中的事件。常见的事件比如：click, dbclick, keydown, keypress, keyup, mousemove, wheel, scroll, focus, blur, load, unload, abort, error, resize, change, select, submit, 大概这些及其相关的。

事件传播机制

事件传播分为三个阶段：这种三阶段的传播模型，使得同一个事件会在多个节点上触发（捕获一次冒泡一次全看usercapture）。

1. 事件捕获阶段（capture phase），就是事件从window开始一层一层向目标传递的阶段
2. 目标阶段（target phase），当事件到达事件发生现场的阶段
3. 事件冒泡阶段（bubble phase），和事件捕获阶段相反，事件从目标到window传递的阶段

事件委托/代理

有个提到比较多的就是事件委托。因为事件有冒泡机制，我们可以不在目标元素监听事件，而在它的父元素监听。一个比较经典的例子，一个拥有很多子项的无序列表，需要监听子项上的点击事件。此时，我们将监听绑定在父元素ul上，当点击li元素时，由于事件的冒泡机制，ul层也能触发点击事件。但是如何判断你点击的就是你想要的li元素，而不是ul元素本身，用事件对象event的目标元素属性target来判断就好了，即event.target。

这样做的优点有：提高性能，从监听多个事件减少到监听一个事件，效率肯定得到提升；能动态地自适应，比如再在ul元素内加一个li子元素，传统的方法就需要再增加一个监听事件，而利用事件委托就可以以不变应万变。(li也是ul一部分，点击li和ul的事件对象是不一样的但是是属于ul的)

jquery就很简单可以监听子元素不用判断target或者path

var ul = document.querySelector('ul');

ul.addEventListener('click', function (event) {
  if (event.target.tagName.toLowerCase() === 'li') {
    // some code
  }
});
e.path. find(el => el.classList && el.ctassList.contains('box) )//判断path来筛选节点

因为window和html没有class所以还要加一个ctassList.contains('box)

事件实现方式

浏览器的事件模型，就是通过监听函数（listener）对事件做出反应。事件发生后，浏览器监听到了这个事件，就会执行对应的监听函数。这是事件驱动编程模式（event-driven）的主要编程方式。

JavaScript 有三种方法，可以为事件绑定监听函数。

HTML 的 on- 属性，元素节点的事件属性，addEventListener()

原始事件实现方式（DOM0）

document.onclick=function(){} //绑定

document.onlick = null; //移除

注意：内部的this对象总是指向触发事件的那个节点。

标准事件实现方式（DOM2）

EventTarget.addEventListener()

EventTarget.addEventListener()用于在当前节点或对象上，定义一个特定事件的监听函数。一旦这个事件发生，就会执行监听函数。该方法没有返回值。

target.addEventListener(type, listener[, useCapture]);

该方法接受三个参数。

type：事件名称，大小写敏感。
listener：监听函数。事件发生时，会调用该监听函数。
useCapture：布尔值，表示监听函数是否在捕获阶段（capture）触发（参见后文《事件的传播》部分），默认为false（监听函数只在冒泡阶段被触发）。该参数可选。

其次，第三个参数除了布尔值useCapture，还可以是一个属性配置对象。该对象有以下属性。

capture：布尔值，表示该事件是否在捕获阶段触发监听函数。

once：布尔值，表示监听函数是否只触发一次，然后就自动移除。

passive：布尔值，表示监听函数不会调用事件的preventDefault方法。如果监听函数调用了，浏览器将忽略这个要求，并在监控台输出一行警告。

document.removeEventListner

注意，removeEventListener方法移除的监听函数，必须是addEventListener方法添加的那个监听函数，而且必须在同一个元素节点，否则无效。

div.addEventListener('click', function (e) {}, false);
div.removeEventListener('click', function (e) {}, false);

上面代码中，removeEventListener方法无效，因为监听函数不是同一个匿名函数。

element.addEventListener('mousedown', handleMouseDown, true);
element.removeEventListener("mousedown", handleMouseDown, false);

上面代码中，removeEventListener方法也是无效的，因为第三个参数不一样。

注意：内部的this对象总是指向触发事件的那个节点。

EventTarget.dispatchEvent

EventTarget.dispatchEvent方法在当前节点上触发指定事件，从而触发监听函数的执行。该方法返回一个布尔值

para.addEventListener('click', hello, false); var event = new Event('click'); para.dispatchEvent(event);

上面代码在当前节点触发了click事件。

事件对象

事件发生以后，会产生一个事件对象，作为参数传给监听函数。浏览器原生提供一个Event对象，所有的事件都是这个对象的实例，或者说继承了Event.prototype对象。Event构造函数接受两个参数。第一个参数type是字符串，表示事件的名称；第二个参数options是一个对象，表示事件对象的配置。该对象主要有下面两个属性。

bubbles：布尔值，可选，默认为false，表示事件对象是否冒泡。
cancelable：布尔值，可选，默认为false，表示事件是否可以被取消，即能否用Event.preventDefault()取消这个事件。一旦事件被取消，就好像从来没有发生过，不会触发浏览器对该事件的默认行为。

事件常见属性

我们已经知道，事件的回调函数中有个事件对象的参数。从第一部分，我们已经看到Event对象的继承关系，比如我们最常见的鼠标事件或者键盘事件，MouseEvent继承自UIEvent，UIEvent继承自Event。

一般比如target，preventDefalut，stopPropagation，type，以及坐标的属性比较常用吧。

Event.preventDefault方法取消浏览器对当前事件的默认行为。比如点击链接后，浏览器默认会跳转到另一个页面，使用这个方法以后，就不会跳转了；再比如，按一下空格键，页面向下滚动一段距离，使用这个方法以后也不会滚动了。该方法只是取消事件对当前元素的默认影响，不会阻止事件的传播。如果要阻止传播，可以使用stopPropagation()或stopImmediatePropagation()方法。

由于浏览器的历史原因，关于鼠标坐标的属性真是好多对：

属性描述x, y在整个浏览器窗口所处的位置screenX, screenY在整个屏幕中所处于位置clientX, clientY在整个浏览器窗口所处的位置，与x, y属性相同layerX, layerY在整个元素的区域鼠标的位置(但算上了scroll的距离)，当不随页面滚动而变化pageX, pageY在整个页面所处的位置，当不随页面滚动而变化offsetX, offsetY在整个元素的区域，鼠标的位置，当不随页面滚动而变化movementX, movementY两个事件之间鼠标的位移差

最好使用W3C规范里面的两对属性，是最安全和最保险的选择，screenX, screenY, clientX, clientY。

stopPropagation方法。

// 事件传播到 p 元素后，就不再向下传播了
p.addEventListener('click', function (event) {
  event.stopPropagation();
}, true);

// 事件冒泡到 p 元素后，就不再向上冒泡了
p.addEventListener('click', function (event) {
  event.stopPropagation();
}, false);

上面代码中，stopPropagation方法分别在捕获阶段和冒泡阶段，阻止了事件的传播。

stopPropagation方法只会阻止事件的传播，不会阻止该事件触发<p>节点的其他click事件的监听函数。也就是说，不是彻底取消click事件

p.addEventListener('click', function (event) {
  event.stopPropagation();
  console.log(1);
});

p.addEventListener('click', function(event) {
  // 会触发
  console.log(2);
});

上面代码中，p元素绑定了两个click事件的监听函数。stopPropagation方法只能阻止这个事件的传播，不能取消这个事件，因此，第二个监听函数会触发。输出结果会先是1，然后是2。

stopImmediatePropagation方法可以彻底取消这个事件，使得后面绑定的所有click监听函数都不再触发。所以，只会输出1，不会输出2。

自定义事件

我们可以利用自定义事件去实现我们自己想要的发布订阅模式。

// 新建事件实例
var event = new Event('build');

// 添加监听函数
child.addEventListener('build', function (e) {
    console.log(' custom event build');
}, false);

// 触发事件
child.dispatchEvent(event);