你不知道的Event

时间 2019-12-07

标签不知道 event 繁體版

原文原文链接

event,事件对象，在咱们前端开发中，event对象上的各种方法确定是熟悉的不能在熟悉了，什么onclick,onload,onmouseover,onkeydown这些咱们是常用的事件都属于event，可是咱们强大的event远不止事件触发这些事件类型，它自己还有不少属性，来告知咱们触发该事件所包含的信息，那么咱们的event有哪些是很是具备实用价值，可是咱们又不是辣么熟悉的呢，今天一块儿来扒一扒event事件对象吧。javascript

1.event事件对象

咱们在网页页面上进行操做，就会触发事件，会产生一个事件对象，做为参数传给监听函数。浏览器原生提供一个Event对象，全部的事件都是这个对象的实例，或者说继承了Event.prototype对象。而Event对象自己就是一个构造函数，能够用来生成新的实例。html

`前端

var even = new Event(type, options);
复制代码

` Event构造函数接收两个参数，参数一是事件名称，参数二是个对象，这个对象表示事件对象的配置，主要包含两个属性：java

bubbles：布尔值，可选，默认为false，表示事件对象是否冒泡；
cancelable：布尔值，可选，默认为false，表示事件是否能够被取消，即可否用Event.preventDefault()取消这个事件。

如今咱们的问题来了，咱们new出来的这个event实例有什么用呢，今天咱们的第一个知识点，自定义事件，什么是自定义事件呢，说白了就是咱们本身定义一个事件名字，而后触发这个事件行为，下面看代码：浏览器

` // 普通事件 document.onclick = function () { console.log('普通点击事件') }函数

// 自定义事件
var dialog = new Event('dialog', {'bubbles': false,'cancelable': false});
document.addEventListener('dialog', function () {   // 监听事件
			var bool = confirm('我要弹出一个对话框')
			if (bool) {
				console.log('点击肯定了')
			} else {
				console.log('点击取消了')
			}
		}, false);
复制代码

`性能

到这一步，咱们的自定义事件其实已经定义完成了，可是可能你们会发现，这个自定义事件不论怎样都是执行不了的，是的，确实执行不了，由于咱们尚未触发它，由于自定义事件不像普通事件，有具体的触发行为来触发事件并执行方法，自定义事件还有一个触发的方法dispatchEvent(): `spa

document.dispatchEvent(dialog)  // 触发自定义事件
复制代码

`prototype

到这里，咱们的自定义事件就已经能够正常运行了。其实这个自定义事件，在咱们的document文档对象这个节点上也定义了一个自定义事件的接口document.createEvent()，document.createEvent()方法生成一个事件对象实例，document.createEvent方法的参数是事件类型，好比UIEvents、MouseEvents、MutationEvents、HTMLEvents,下面咱们看具体代码：代理

<body>
        <div id='div1'>自定义alert事件</div>
    </body>
    var div1 = document.getElementById('div1');
    var alertEven = document.createEvent('HTMLEvents'); // 建立事件对象
	alertEven.initEvent('alert', 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很是有使用，可是又不经常使用的一些特性，好比上面的自定义事件，和事件传播的概念，但愿本文对你有所帮助，正所谓码字不易，喜欢的朋友烦请点个赞，谢谢。