前端学习之路6-事件

本文主要是介绍前端学习之路6-事件，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！

文章目录

概念
- 捕捉
- 目标
- 冒泡
命名
事件函数
事件监听

概念

一个事件的生命周期包括三个阶段：捕捉（capture）、目标（target）和冒泡（bubbling）

捕捉

当某个事件被触发时，浏览器会找出事件涉及的元素，它被称为该事件的目标。浏览器会找出body元素和目标之间的所有元素并分别检查它们，看看它们是否带有事件处理器且要求获得其后代元素触发事件的通知。浏览器会先触发这些事件处理器，然后才会轮到目标自身的处理器。
事件捕捉让目标元素的各个上级元素都有机会在事件传递到目标元素本身之前对其作出反应。上级元素的事件处理器可以阻止事件流向目标，方法是对Event对象调用stopPropagation或stopImmediatePropagation函数。这两个函数的区别在于，stopPropagation会确保调用当前元素上注册的所有事件监听器，而stopImmediatePropagation会忽略任何未触发的监听器

目标

可以多次调用addEventListener函数，因此某个给定事件类型可以有不止一个监听器。如果在目标阶段调用stopPropagation或stopImmediatePropagation函数，相当于终止了事件流，不再进入冒泡阶段。

冒泡

完成目标阶段之后，浏览器开始转而沿着上级元素链朝body元素前进。在沿途的每个元素上，浏览器都会检查是否存在针对该事件类型但没有启用捕捉的监听器（也就是说，addEventListener函数的第三个参数是false）。这就是所谓的事件冒泡。

事件添加
ie的事件添加使用attachEvent()，接受2个参数，第一个参数是事件名称(带「on」,例如’onclick’)，第二个参数是要执行的函数
attachEvent(eventName, handler);
chrome添加事件使用addEventListener()，接受3个参数，第一个参数是事件名称（不带「on」,例如’click’），第二个参数是要执行的函数，第三个参数是是否在时间冒泡阶段执行函数，默认为false，在事件捕获阶段执行。
addEventListener(eventName, handler, useCapture);
阻止默认事件
ie使用returnValue = false来阻止默认事件
chrome使用event.preventDefault()来阻止默认事件
阻止事件冒泡
ie使用cancelBubble = true来阻止冒泡
chrome使用event.stopPropagation()来阻止冒泡
ie没有事件捕获过程