我们再看一段代码:
- <style>
- body * { margin: 10px; border: 1px solid blue; }
- </style>
- <form onclick="alert('form')">
- FORM
- <div onclick="alert('div')">
- DIV
- <p onclick="alert('p')">
- P
- </p>
- </div>
- </form>
如果我们点击 P ,浏览器会依次执行 alert('p'); alert('div'); alert('form')。
这说明,当触发某个节点上的事件时,它首先会执行自己的事件,然后会找到自己父级 div 的事件,再到 Form, 最终这个事件会 "冒泡" 到水面,即它的祖先即 document 对象。
这个处理的过程 就叫 "冒泡",就像水里的泡泡,是由下而上的。
注意:并不是所有的事件都有 "冒泡",例如 focus 等。
event.target 与 this 的区别:
event.target: 是查找发起事件的 "目标" 元素,在冒泡的过程中它是不会被改变的。
this :指的是当前元素
例如:如果我们有一个 form.onclick 的函数,它可以捕捉 form 内的所有点击事件,别管这个点击事件在 form 哪里触发,它都会冒泡到 form 这一层并且执行这个 onclick 函数。
在 form.onclick 函数里,this(=event.currentTarget) 指的是
来源: https://www.cnblogs.com/sheldon-blog/p/8150117.html