理解jquery事件冒泡
网络编程 2021-07-04 21:04www.168986.cn编程入门
这篇文章主要介绍了jquery事件冒泡,以及如何阻止jQuery事件冒泡现象,感兴趣的朋友可以参考一下
一、什么是jquery事件冒泡
在很多教材或者手册都可能会涉及到事件冒泡的概念,老手来说这当然是最基本的概念,但往往对于初学者可能比较陌生或者说从来没有听说过。狼蚁网站SEO优化就结合代码实例来简单介绍一下什么是事件冒泡。
代码实例如下:
<html> <head> <meta charset=" gb2312"> <title>事件冒泡</title> <script type="text/javascript" src="mytest/jQuery/jquery-1.8.3.js"></script> <script type="text/javascript"> $(document).ready(function(){ $("#second").click(function(){ alert("我是second"); }) $("#first").click(function(){ alert("我是first"); }) }) </script> </head> <body> <p id="first"><a id="second" href="http://.baidu.">点击查看效果</a></p> </body> </html>
在以上代码中,我们可能只想点击锚点后弹出“我是third”,但是令人奇怪的事情却是所有父元素定义的click事件都会被触发。这就是一个典型的事件冒泡效果。所谓的冒泡事件就是,如果在某一个对象上触发某一类事件(如上例的click事件),那么此事件会向对象的父级对象传播,并触发父对象上定义的同类事件。事件传播的方向是从最底层到最顶层,类似于水泡从水底浮上来一般。
二、javascript如何阻止事件冒泡
冒泡事件能够带来便利,有时候也会带来麻烦,狼蚁网站SEO优化就简单介绍一下如何阻止事件冒泡。
代码实例如下:
<!DOCTYPE html> <html> <head> <meta charset=" utf-8"> <head> <title>事件冒泡</title> <style type="text/css"> #grandfather{ border:1px solid #0066FF; cellpadding:0px; cellspacing:0px; } #grandfather td{ border: 1px solid #0066FF; } </style> <script type="text/javascript"> function trclick(){ alert("父亲的onclick事件触发"); } function tableclick(){ alert("祖父的onclick事件触发"); } window.onload=function(){ var grandfather=document.getElementById("grandfather"); var father=document.getElementById("father"); var noS=document.getElementById("noS"); var haveS=document.getElementById("haveS"); grandfather.onclick=tableclick; father.onclick=trclick; noS.onclick=function(){ alert("没有阻止冒泡的子元素"); } haveS.onclick=function(evt){ alert("阻止冒泡的子元素"); if(window.event){ event.cancelBubble=true; } else if(evt){ evt.sPropagation(); } } } </script> </head> <body> <table width="204" id="grandfather"> <tr > <td width="96"></td> <td width="96"></td> </tr> <tr id="father"> <td id="noS">没有阻止事件冒泡</td> <td id="haveS">阻止了事件冒泡</td> </tr> <tr> <td> </td> <td> </td> </tr> </table> </body> </html>
代码注释:
1.if(window.event)这个用来兼容IE8和IE8一下浏览器。
2. evt.sPropagation()这个是标准浏览器。
以上代码中,一个单元格阻止了事件冒泡,一个没有阻止事件冒泡,希望对大家的学习有所帮助。
编程语言
- 机械手焊接机器人编程 机械手焊接设备编程
- vb数据库编程实例,vb做数据库
- tiobe世界编程语言排行榜,全球编程语言排行
- 成都java编程培训 成都it编程培训中心
- 编程基础培训,编程基础知识培训
- flash游戏编程基础教程,flash游戏开发教程
- 不会英语能学编程吗 不会英语可以学程序员吗
- 爱心代码编程C语言 爱心代码编程c语言公式
- c语言编程学习入门 c语言编程快速入门
- 西门子plc编程培训 西门子plc编程培训班
- 哪里可以学编程 台州哪里可以学编程
- 少儿编程哪个好 少儿编程哪个品牌好
- 编程是什么意思,图形编程是什么意思
- c语言编程软件下载,c语言编程软件在哪下载
- java编程软件下载,java编程下载手机版
- ug编程培训学校,ug编程培训教程