一、事件、事件监听函数、事件对象
首先,我们明确一下事件、事件监听函数、事件对象,这三个概念之间的关系。
(1)事件,就是发生了什么事,比如点击事件、文本框输入事件、ajax成功返回事件等。
(2)事件监听函数,是在事件发生时我们想执行的代码,是我们在事件上挂的钩子。
(3)事件对象,是对事件的描述对象,就是我们熟悉的那个“e”。每个事件发生时,事件对象都会作为一个参数,被传入事件监听函数。浏览器原生提供一个Event对象,每个事件对象,都是Event的一个实例。并且除了事件发生时自动生成的那个“e”,我们还可以通过 new Event(type, options),来自己生成一个事件对象。
二、事件的捕获和冒泡
你可能会奇怪,为什么会有捕获和冒泡这种东西,搞得这么复杂?
当你点击页面上的一个按钮,你可以说你点击了按钮,但也可以说,你点击了包着它的div,你点击了这个页面,甚至你点击了window,你都挑不出毛病来,因为确实如此。那怎么办呢?
浏览器设计了这样一个事件模型:当你点击一个按钮时,事件从最外层的window,一层层的往下传播,直到这个按钮,这个过程称为捕获。然后再回去,从这个按钮开始,一层层的往上传播,直到最外层的window,这个过程被称为冒泡。
捕获阶段,从window开始,到目标节点结束。冒泡阶段,从目标节点开始,到window结束。
比如我们点击了div中的一个span标签。事件在页面上