冒泡事件就是,如果在某一个对象上触发某一类事件,那么该事件会向父级传播,并触发父对象上定义的同类事件。事件传播的方向是从最底层到最顶层,类似于水泡从水底浮上来一般。
一个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前端课程!!
以上就是jquery什么是事件冒泡?的详细内容,更多请关注易知道|edz.cc其它相关文章!