如何写事件冒泡和事件捕捉?

以下是一个简单的例子,演示了事件冒泡和事件捕获的过程




	事件冒泡和事件捕获


	

点击我

JS中的事件流分为三个阶段:捕获阶段、目标阶段和冒泡阶段。事件捕获是从外向内依次触发,而事件冒泡则是从内向外依次触发。在使用addEventListener方法添加事件监听时,第三个参数用来控制是冒泡事件还是捕获事件(false为冒泡,true为捕获,默认值为false)。

举个例子,当一个按钮被点击时,事件会首先在最外层的元素上进行捕获,然后逐级向下,直到到达目标元素,接着在目标元素上进行处理,最后再从目标元素开始向上冒泡,直到到达最外层的元素。

当我们点击后会出现相应的内容

outer捕获
inner目标
outer冒泡


 

你可能感兴趣的:(前端,javascript,开发语言)