jQuery 什么是事件冒泡? 下面本篇文章带大家了解一下 jQuery 事件冒泡. 有一定的参考价值, 有需要的朋友可以参考一下, 希望对大家有所帮助.
冒泡事件就是, 如果在某一个对象上触发某一类事件, 那么该事件会向父级传播, 并触发父对象上定义的同类事件. 事件传播的方向是从最底层到最顶层, 类似于水泡从水底浮上来一般.
一个 html 文档可以可视化一个 DOM 树:
那么事件冒泡现象就可以形象的表示为下图:
上面仅以 click 事件作为例子进行说明.
注意: 并非所有事件都有冒泡现象, 例如 blur,focus,load 和 unload 事件就不具有.
代码实例:
- <!doctype HTML>
- <HTML>
- <head>
- <meta charset="utf-8">
- <meta name="author" content="http://www.softwhy.com/" />
- <script src="https://code.jquery.com/jquery-3.0.0.js">
- </script>
- <script>
- $(document).ready(function() {
- $("#ant").click(function() {
- $("#result").text("HTML 中文网");
- })
- })
- </script>
- </head>
- <body>
- <p id="ant">
- <input type="button" id="bt" value="查看效果" />
- </p>
- <div id="result">
- </div>
- </body>
- </HTML>
点击按钮会触发 click 事件, 这个事件会向上传递, 然后被 p 元素捕获, 恰巧, p 元素上注册了 click 事件处理函数, 于是就会执行此事件处理函数.
更多 jQuery 的相关知识, 可访问: web 前端课程 https://www.html.cn/ !!
来源: http://www.css88.com/qa/jquery/18031.html