你不知道的Event

web灰太狼
1,359 阅读7分钟

event,事件对象，在我们前端开发中，event对象上的各类方法肯定是熟悉的不能在熟悉了，什么onclick,onload,onmouseover,onkeydown这些我们是经常使用的事件都属于event，但是我们强大的event远不止事件触发这些事件类型，它本身还有很多属性，来告知我们触发该事件所包含的信息，那么我们的event有哪些是非常具有实用价值，但是我们又不是辣么熟悉的呢，今天一起来扒一扒event事件对象吧。

1.event事件对象

我们在网页页面上进行操作，就会触发事件，会产生一个事件对象，作为参数传给监听函数。浏览器原生提供一个Event对象，所有的事件都是这个对象的实例，或者说继承了Event.prototype对象。 而Event对象本身就是一个构造函数，可以用来生成新的实例。

`

var even = new Event(type, options);

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

  • 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(): `

document.dispatchEvent(dialog)  // 触发自定义事件

`

到这里，我们的自定义事件就已经可以正常运行了。其实这个自定义事件，在我们的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非常有使用，但是又不常用的一些特性，比如上面的自定义事件，和事件传播的概念，希望本文对你有所帮助，正所谓码字不易，喜欢的朋友烦请点个赞，谢谢。

avatar
文章
阅读
粉丝