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 > jQuery event.target 属性  jQuery 事件方法 实例 返回哪个 DOM 元素触发了事件： $("p, button, h1").click(function(event){     $("div").html("通过 " + event.target.nodeName + " 元素触发。"); }); 尝试一下 » 定义和用法 event.target 属性返回哪个 DOM 元素触发了事件。 这对比较 event.target 和 this 是非常有用的，以便判断事件是否因事件冒泡被处理。 语法 event.target 参数 描述 event 必需。event 参数来自事件绑定函数。

注意这里的event.stopPropagation();这个是阻止事件冒泡的！