你不知道的Event

ert', false, false);     // 初始化自定义事件名称
	div1.addEventListener('alert', function () {    // 监听事件
				alert('alert一下吧')
			}, false)
	div1.dispatchEvent(alertEven)   // 触发事件
复制代码

用这种方式我们同样可以完成一个自定义事件。这两种方式本质上并没有什么区别，它们都有同样的步骤，创建事件实例，addEventListener()监听事件，dispatchEvent()触发执行，而且它们都是继承制EventTarget接口。

2.事件传播

在我们日常工作当中，事件冒泡这个事件行为，肯定是有遇到的，先不说是否是经常，遇到后大家也知道使用event.stopPropagation()来阻止冒泡，还有在使用element.addEventListener(type,fn,false)事件监听的方式绑定事件时，它的第三个参数是个布尔值，默认false，表示冒泡阶段触发,如果设置为true则表示捕获阶段触发，问题来了：触发事件后的事件传播是怎样的呢？其实一个事件发生后，事件会在子元素和父元素之间传播，共三个阶段：

阶段1：从window对象传导到目标节点（上层传到底层），称为“捕获阶段”（capture phase）;
阶段2：在目标节点上触发，称为“目标阶段”（target phase）;
阶段3：从目标节点传导回window对象（从底层传回上层），称为“冒泡阶段”（bubbling phase）。

那么我们怎么判断我们的事件触发后处于在哪个阶段呢，在event实例对象上有一个属性event.eventPhase返回一个整数常量，就是用来表示事件目前所处的阶段：

0 表示事件目前没有发生，
1 表示事件目前处于捕获阶段，从父节点向目标节点传送过程(从上向下传递)，
2 表示事件到达目标节点，即Event.target属性指向的那个节点，
3 表示事件冒泡阶段，即从目标节点向父节点传递(从下向上传递)。

有了上面的认识，我们下面看个例子： `

<span id='s1'><button id='b1'>click me</button></span>

var s1 = document.getElementById('s1'), tx1 = document.getElementById('tx1');

b1.addEventListener('click', eventObj, false);
b1.addEventListener('click', eventObj, true);
s1.addEventListener('click', eventObj, false);
s1.addEventListener('click', eventObj, true);

function eventObj (event) {
    // event.stopPropagation();
	var el = event.currentTarget.tagName;
	console.log(el , event.eventPhase)
}   // 则可以看见span的事件会输出1，3，button的事件会输出两次2
// 如果我们放开event.stopPropagation()的注释，则只会输出1
复制代码

有了这些认识，大家首先想的肯定是它的实际应用价值，有什么用呢？最最常用的，就是：事件代理，事件代理是基于事件冒泡的特性扩展出来的开发方式，事件代理的优势是由父节点监听子节点的事件行为，并统一处理子节点触发的事件函数，这样做就减少了浏览器对事件的监听，处理程序对内存的开销，进而提高性能。简单来说就是,你去盯五个人的稍和盯一个人的稍，你会觉得哪个容易一点？道理就这么简单。而我们最常应用事件代理的地方就是分页控件。

3.常用事件属性和方法

event事件对象是个庞大的对象，下面又拥有众多的属性和方法，总有一些是我们常用的和不常用的，下面我们稍微列一下我们常用的属性和方法，供大家参考：

element.addEventListener()：二级DOM事件绑定方法，接收三个参数：参数一:事件类型，参数二，执行的方法，参数三布尔值，什么节点捕获事件。
element.removeEventListener()：移除二级DOM事件，注意：该方法要和绑定的事件类型，绑定的元素，捕获阶段都要保持一至。
element.dispatchEvent()：方法在当前节点上触发指定自定义事件，从而触发监听函数的执行。
event.eventPhase：返回触发的事件目前所处阶段，详细请看上面的介绍。
event.cancelBubble：属性是个布尔值，设置为true时可以取消事件冒泡。
event.preventDefault()：取消浏览器对当前事件的默认行为。
event.currentTarget，event.target：获取事件触发的目标节点元素，currentTarget返回事件当前所在的节点，即正在执行的监听函数所绑定的那个节点,target返回原始触发事件的那个节点，即事件最初发生的节点。
event.type：返回一个字符串，表示触发的事件类型。
event.stopPropagation()：方法阻止事件在 DOM 中继续传播,一般用于阻止事件冒泡这类行为的。
event.stopImmediatePropagation()：该方法同样可以阻止事件冒泡，不同的是在触发一次后，它会彻底注销掉传播的事件监听的函数。
mouseEvent.clientX，mouseEvent.clientY：鼠标事件触发时，返回鼠标指针相对于浏览器窗口的水平坐标和垂直坐标值。
mouseEvent.button：鼠标事件，返回一个数值，表示按下了鼠标哪个键：0表示左键，1表示滚轮，2表示右键，默认0。
mouseEvent.ctrlKey：布尔值，是否同时按下了 Ctrl 键，默认值为false。
mouseEvent.shiftKey：布尔值，是否同时按下了 Shift 键，默认值为false。
mouseEvent.altKey：布尔值，是否同时按下 Alt 键，默认值为false。
mouseEvent.metaKey：布尔值，是否同时按下 Meta 键，默认值为false。
KeyboardEvent.keyCode：键盘事件，返回按下键盘按钮的键码。
KeyboardEvent.code:键盘事件，返回按下键的code。
KeyboardEvent.key:键盘事件，返回按下键的键名，比如按下数字1，返回就是1，按下a，返回就是a。

总结

在上面我列举了个人认为常用的一些事件属性和方法，其实还有不少并未列举到，详细的大家可以去网道这里查看吧，这里是我参考的地方。今天本文呢主要目的是和大家分享一些event非常有使用，但是又不常用的一些特性，比如上面的自定义事件，和事件传播的概念，希望本文对你有所帮助，正所谓码字不易，喜欢的朋友烦请点个赞，谢谢。

作者：IT男爵
链接：https://juejin.im/post/5bdffe696fb9a049b77fcf71
来源：掘金
著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。

2.事件传播

3.常用事件属性和方法

总结

猜你喜欢