jquery中使用event.target的几点
1.this和event.target的区别:
js中事件是会冒泡的,所以this是可以变化的,但event.target不会变化,它永远是直接接受事件的目标DOM元素;
2.this和event.target都是dom对象,如果要使用jquey中的方法可以将他们转换为jquery对象:$(this)和$(event.target);
比如:event.target和$(event.target)的使用:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 | < ! DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> < html xmlns="http://www.w3.org/1999/xhtml"> < head > < meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> < title >无标题文档</ title > < script type="text/javascript" src="http://www.css88.com/tool/css3Preview/jquery-1.4.2.min.js"></ script > < script type="text/javascript"> $(function(){ $("li").live("click",function(event){ $("#temp").html("clicked: " + event.target.nodeName); $(event.target).css("color","#FF3300"); }) }); </ script > </ head > < body > < div id="temp"></ div > < ul class="JQ-content-box" style="padding:20px; background:#FFFFFF"> < li >第一行 < ul > < li >这是公告标题1</ li > < li >这是公告标题2</ li > < li >这是公告标题3</ li > < li >这是公告标题4</ li > </ ul > </ li > </ ul > </ body > </ html > |
上面的例子如果改成使用this:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 | < ! DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> < html xmlns="http://www.w3.org/1999/xhtml"> < head > < meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> < title >无标题文档</ title > < script type="text/javascript" src="http://www.css88.com/tool/css3Preview/jquery-1.4.2.min.js"></ script > < script type="text/javascript"> $(function(){ $("li").live("click",function(event){ $("#temp").html("clicked: " + event.target.nodeName); $(this).css("color","#FF3300"); event.stopPropagation(); }) }); </ script > </ head > < body > < div id="temp"></ div > < ul class="JQ-content-box" style="padding:20px; background:#FFFFFF"> < li >第一行 < ul > < li >这是公告标题1</ li > < li >这是公告标题2</ li > < li >这是公告标题3</ li > < li >这是公告标题4</ li > </ ul > </ li > </ ul > </ body > </ html > |
注意这里的event.stopPropagation();这个是阻止事件冒泡的!
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】凌霞软件回馈社区,博客园 & 1Panel & Halo 联合会员上线
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步